My Dear Friends of Figma in Hi again, everyone. You have Lauren and Katie here in our learning series. We are learning how to use Figma as a product person. our goal is to be able to build a lightweight prototype that we can use to visually communicate an idea to our stakeholders. And we are today here in lesson two. Last time, yesterday, we learned about. organizing our file and how to think about setting up your files in the file browser. And so we created our file at the end of yesterday and we are ready to dig.
In and start using that file today. So, Lauren, all too often when this happens to me, when I accidentally create that file, I have that untitled file. I get nervous. It’s a blank canvas. I’m not sure where to start. Yes. Can you help us with that problem today? Yes, totally.
So let’s dive into it. So I am going to go to my homepage over here. And here’s our lesson one that we started with yesterday. And that one is our blank file. So I’m actually gonna pop us into our second file over here that’s just got some, a couple of things prepared that we’re gonna talk about that’ll help for better explanations. So what you’re probably gonna be looking at though when you get into a blank file, let’s just look at that one again, is there’s not a lot going on here.
So there’s literally nothing. Where do I start? There’s literally nothing. So today we’re gonna talk about, and this is kind of the order of hierarchy that I like to think of them. Pages, Sections, Frames, Groups, and Shapes, Rectangles, we’re going to focus on. to start out, we want to start out with our pages. Our pages are going to be, you’re going to know what page you’re on by looking.
Right over here on our left hand side. And when I click on that, That’s going to open up over here where we can now create more pages. So it starts out even just knowing this is very helpful because it feels like, how do I even add more pages? So you’re going to want to click on, you’re going to want to click on it always. So it defaults, you just have one page on your file and you don’t add another page. Everything will go on that one page.
Exactly. Yep. Yeah. So the pro move is to create your first page and then start adding other pages as you need to. Is that right? Exactly. Yeah. So the, you might find times where you only need one page, but we’ll talk.
About what things you might want to put on multiple pages and stuff like that. So to create a new page, you’re just going to drop down and then this plus will allow you to create new pages. And while we’re here, actually, let me talk about a couple of things that you can do with pages. I feel like this one is, it blows people’s minds. And I always forget about it. But you can add emojis to your pages. So and that’s just with using the, I’m not totally sure what the shortcuts.
Are on, not a Mac, but on a Mac, it’s gonna be control command spacebar. And that’s just gonna pull off the emoji. So you can put things here like I like to put like a check to let people know this is the page that we’re on. And let me pop into a page or a file that I have, structured. This is like a template that I like to use for myself, just to show you how you could set up your pages here. So we have, I have, I’ve used just lines in here to add some space in here. I have these emojis showing like, do not use below this line, and my, I.
Have a little skull for my archives. and then I also have these blank ones here. If you just you want a little bit more space. space. You can just create a new page here and just put some spaces and that’s going to give you a blank space. So this is what your file might start to look like as you’re adding more pages. So much more organized and so much easier to navigate to like quickly reference what you need.
That’s awesome. Yeah, great So let’s hop into this one actually and I have a little bit of a breakdown here of like when I use each one so pages for me are if you’re doing like an entire flow so what I mean by a flow is if you have like a full checkout flow or if you have a full sign up flow that we’re exactly perfect. Perfect. Yeah, so a full signup flow if you have a full flow that makes sense to have on a page, especially if it can stand alone by itself. so if we look back at our file here, the things on like your playground page and.
Your meeting notes and then your archive and then your local components, these are all things that can stand by themselves. They don’t need to be on the same page when you get to prototyping though. Like maybe you’re doing an entire app, and you do want to move from your signup flow into your homepage and then into your checkout flow. It’s going to be tricky, like right now you can’t move between pages for prototyping. Like I cannot go from, if I have a flow here, say I had another flow on my second page here.
So we have our page two, I’m going to go ahead and move this. I’m right clicking and I’m going to move to page. And I can move this to page two. So that’s really handy instead of copying and pasting something so that you make sure you don’t lose connections. But what I’m trying to show here is that when I open up prototyping, and we’ll go way into prototyping later, but when I open up prototyping, I cannot prototype something from this page to another page. So that’s where sections can now come in and that’s the next.
Thing on my hierarchy here. sections are a really great way to organize your screens together. And I think a lot of the confusion is when would I use pages versus sections? Cause before sections, a lot of folks would just split all those things up into pages. I think it’s totally dependent. You can have a bunch of sections on your page and to create a section , you would go up here to your region tools and drop it down to section or the shortcut shift s and that’s going to give us basically a way to organize our frames, which is.
Going to be the next level down, but you can prototype between sections and you can actually use sections in certain ways in prototyping, that can be really helpful. So if you do, say, want to prototype from your, your loading page into your products page and then into your basket page, this entire flow, sections are going to make sense here instead of putting them each on their own individual page. That makes a lot of sense. And I live in FigJam them all day and used sections left and right there. I imagine it’s a similar concept where it’s just like grouping of the objects that you have on your canvas here.
And it just helps you navigate between them and keep them more organized. Exactly, totally, yeah. And I’ve mentioned prototyping like quite a bit already, but It’s not necessarily for prototyping, just like you said for organization, very, very helpful for organization, like a lot of times I’ll have kind of the different edge cases of maybe I have just this flow here, but I have one section for these edge cases, one section for these errors, one section for these to help differentiate for your developers. And then with sections too for your developers, you can add a.
“mark as ready” for dev tag here. So that can also be section level. And actually now at the frame level too. It used to be just section level and then, in dev mode, we’ve been updating things rapidly. So you can also do it at the frame level as well. Which brings us to frames. Yes. What is a frame within the section?.
Yes. So great transition here. So a frame versus a section, if we could pop back over to here. Frames are, basically I use frames for my screens or for my components. So sections are organizational while frames are presentational. So my frames are going to be like these screens down here that I’ve created. If I was creating a component, I would do that as a frame. And to create a frame, what I’m going to do, I can either go right back up into my regions tools over here and drag out a frame or I can hit.
F on the keyboard and that’s going to allow me to drag out a frame. Here’s a question. Do you normally create the frame first and then fill it or do you create all the elements in the frame and then frame them afterwards? That’s a tricky one. I think it depends on what it is. I’d say maybe 80 percent of the time I create the frame first. but also if it’s more so a component that I’m creating, I might create the stuff and wrap it in a frame.
So if I wanted to wrap this in a frame, I could select them all and do command option G. And that now you can see over on my left hand side. Now all of those objects are within a frame. So Yeah. Yeah. Yeah, it’s really dependent. If I’m, if I know I’m starting on a certain frame size, like on a screen size, like a desktop or a phone, I’m probably going to put.
All of my stuff on the frame first. And there’s actually, if you hit F on your keyboard and you go over to your right hand side, this is where we can, we can find certain screen sizes that iPhone. Yes, preset screen sizes. Very helpful. That’s so cool. Yeah. So you don’t have to remember like how big is an iPhone 14 versus, and we have tons of different ones.
Where’s my favorite one is, the, I think Macintosh 128, this is I think like the first Mac, we have a lot of silly ones in the archives over here, but, yeah, tons of different screen sizes, and this is really helpful, this is where I would go first if I’m creating like a phone screen or something like that. That makes sense. So then within the frames, what are the objects that go in the frames? So then within the frames, and actually even before we get within, talking about groups versus frames. Groups is highly controversial.
I feel like, depending on who you ask, some people… Strongly dislike groups. Some people love groups. yeah, it’s it’s almost as controversial as naming your layers. Uh, which, we’ll get into that. yeah. Some people hate them, some people love them. I’m a grouper. I can’t help it.
I love groups. But I’ll tell you when I group. So right now we have this in a frame, but I could have also put these as a group. So if I had, let’s, let’s take a copy here. So what I’m doing is holding down option shift and dragging so that I just have the same thing. And even though it’s in a frame, I can ungroup it. It doesn’t have to be just a group to ungroup it. It can be a frame too.
So I’m gonna ungroup everything that basically takes the frame away. Okay. And to make this as a group versus a frame, so to group it, I’m gonna go command G. Okay. And you can see they look fairly similar. Right now, my frame versus my group, and I’m actually just gonna, pop these up here away from everybody so we can focus on just these two. So when I would use a group versus a frame over here is if I just want to.
Move things around together, if I need either a background on something, if I needed there to be a certain color background behind here, that means it needs to be a frame because I’m not going to be able to add a background. If I were to go over to my fill over here, And try and change this. it’s just changing all the objects within my group versus if I select this frame over here and I add in a fill now and I change that to red, you can see this was changing the background here. yes. So basically, if I need a background on something, I’m going to go.
For a frame versus a group. The other reason why I would use a frame over a group is if I need to add auto layout or if I, and what I mean by that, cause we haven’t gone into auto layout yet, is if I need to add like a very specific amount of spacing in between here that I don’t want to change or if I just need these, to be a little bit more dynamic when I’m resizing. Because right now, if I were to move this over and I go ahead and resize it, it’s resizing everything all at once. You’re seeing that like the words are going outside of my frames here.
But if I go ahead and resize this one, it’s not changing my objects within. And if I were to add auto layout, this would change a little bit differently. But essentially, I want a home for these objects that is not going to… change, like it’s not gonna distort these. I can find a way to add auto layout or even just adding this background. It’s not distorting these. so grouping to me, TLDR is if you’re really your only goal is to move things around together because it’s a lot easier to obviously move all of these five little sections that I made little things that I made in when they’re in a.
Group instead of having to like select them all and then move them all around. And then, can you talk a little bit about the naming of them? Do you just leave the default? Name on both frames and groups or again, what do you controversial? What should I do and what do I do are different answers? what do I do is I leave them and I have framed 18 million thousand 1, 000 million petrillion What should I probably do is name them, but I’ll say I think it, if I’m in a file by myself, I’m just playing around, I will never rename things. There are certain, once I start to get to more of okay, I’m going to hand this.
Off to my developer, I don’t want to give them a million things that just say, frame one million, frame one million. I try and organize them a little bit more. but I do very much fall under the category of, I don’t name my layers. But, to, yeah, so it’s okay. Goes back to, it all depends who you ask. Of course. And it’s great that we can each find our own personal preference. But it’s helpful to know as someone who’s not, a professional at this,.
That it’s okay to do either way. Whatever works. for you. Yes. And especially as we’re getting started, I imagine just leaving the defaults will probably be much easier for me. Yeah, I think it’s, I think it’s fine. If you did want to rename them though, there are a couple of different ways to do it.
So I could just double click on this frame and I could type in here, Lauren’s frame. and you’ll see that changed right on the left hand side over here. I could also double click right into here and I can change it a name. so frame two, changed it back to there. same thing with like groups. If I want to rename it, I can double click into here. Anything that I do want to rename to, I can also do command R. And that will open this up right here. So that allowed me to just type into here.
Lauren, I renamed it. And then what’s also really helpful is say I have, I’m again, holding down option and shift just to create duplicates here. If I have multiple, whatever they may be, groups, frames, components, anything, and I want to rename multiple things at once, I can select them all, I’m going to do command R, and now I’m going to get this box right here, and it’s going to allow me to batch rename, and that is very handy. So let’s call it, let’s see, Lauren’s Frames. That’s magic!.
Yes, very handy. and you can also let’s call it Lauren’s Frames. We’re going to rename them all. I’m going to go back into command R because I have the word Lauren in here. And actually, let’s just do it with two of them. We wanna keep this one to be Lauren’s frames, but we wanna make these ones to be Katie’s frames. So I’m gonna find the word Lauren, and I’m gonna replace that with Katie. Wow, that is incredible.
Now we have Katie’s frames here, so very handy for batch renaming. You can also do things in there like adding numbers. We’re gonna rename these all to Lauren’s frame and then “number one” and now we’ve got three, two, one. Now this is cause I have them in a different order, but we could change the order and it would be one, two, three. so lots of very handy things to do with batch renaming there. That is going to be a huge time saver. Yes.
Yeah, for sure. They’ll likely go back and be like, I didn’t want to do that. Why did I do that? That’s great. Okay, so we’ve talked about having our, we have our page that we set up. So we set up a couple pages here, page one, page two. And in that we talked about sections, we talked about within sections, having the frames, and then also how to use groups. And then I think the last thing is just what goes in those frames.
And then, but we’re gonna dig much more into that in coming days here, so I think the key thing is just to understand what do you put in a frame once it’s there? Totally. and then we can fill it out more as we go. Exactly. So we have our frames here, that last level that we were gonna talk about is, on this very beautifully done, frame now, is our rectangles, or basically our shapes. so our shapes, and I think it is confusing because when you drop a rectangle in here, I’m just gonna, and what I did was go right up to my left.
Hand corner to grab the shape tool. This rectangle versus this frame looks… They look the same! Yeah, very similar. The only, like, immediate difference, obviously other than the color, but I could just make this white. Actually, let me make this one darker so that it’s… Same color. and I grabbed the eyedropper tool to do that, which is just eye.
So the only difference that I really see right now is this one has a title right here. So I can change this title, but even still I can change the name command R on this rectangle. I could call it frame one if I really wanted to confuse people. So to me the difference of frame versus rectangle is you’re going to be putting multiple things inside of your frame, and this is going to be a home for it. So if I were to put, let’s put a rectangle inside of this frame. Let’s get us a different color.
If I go ahead and put this rectangle inside of this frame, and I move my frame, the rectangle’s moving with me. As opposed to, this looks like I did the same thing. Like I’m put this inside of the rectangle, but I didn’t. They are on two separate layers. They are in two different homes. They don’t move together. I would have to then group them if I wanted them to move together. So Yeah, so to me rectangles or really any shapes which you’ll.
Find all your shapes up here. Those are Just for that, like just for creating visual shapes. They’re not for housing any of your information. I would use those if I’m creating an icon and I need maybe like a circle and like a magnifying glass icon, I would use a shape there. I would also use it if, I use it sometimes to fill the rectangle. So over here I fill, I can fill my rectangle and I can put in a gradient or I can put in an image. I would use it to put my image in there if I wanted, my image.
In the shape of a circle. But anything that you are, creating a, basically a home for something is gonna be a frame versus a rectangle or a shape is just gonna be that just a visual shape. That is so helpful because they do look the same. So understanding they are not the same and when to use each is critical here. And so we’ve talked about creating that new frame. Tomorrow we’re going to talk about like using preset assets, like preset frames and our libraries. so I think we’ve covered everything with frames.
If we just go back to our learning path here, we talked about the object hierarchy. We talked about everything from pages to frames, sections. and then within those, we have our objects and our groups. I think we talked about that, and you showed us how to create that new frame. So, I think we’re, we have the basics of creating our frame, and then we’ll start filling it with our libraries, and then all of those components that we talked about, like shapes and text and all that. Perfect.
Yeah. Lauren, this has been so helpful. Again, I feel like those shortcuts are hidden gems where, you all seem like magicians when you’re moving around a file. I was like, how did that happen? A hundred percent. The shortcuts are key. Along the way are super helpful. And also things like you’re renaming the frames.
This has been already mind blowing. So thank you for showing us how to set up our frames, how to start adding in that structure to our file. And tomorrow we’ll dig into libraries. Yes. Exciting. Awesome. Sounds great. Thank you.
See y’all soon. Bye.
This is part of a learning series on how to use Figma as a product person. We’re learning how to create a lightweight prototype …
Figma Official Channel,lesson,your,file,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, product:figma_design, audience:product_managers, language:english, format:standard, produced_by:design_advocate, theme:basics, event:none, series:learning_figma_as_a_product_person, type:feature_tutorial, level:beginner, product managers,