Join Brian Wood for an in-depth discussion in this video Set up frames, part of Figma for UX Design.
- [Instructor] In the first video of this next section, you'll begin working with frames. Now, frames are sort of like art boards you might find in Sketch, Adobe XD, or Adobe Illustrator, but they do have a little bit of a spin on them. Figma considers them to be sort of like special groups. Now, you don't have to use them that way, but they can be nested inside of each other and a lot more, so let's take a look at setting up some frames to start. So, hopefully, you're still on Figma.com and logged in and you've got MyTravelApp open. What we're gonna do is we're gonna start to add our screens for our app.
Now, if you're building a website or designing a website, rather, you're gonna create pages. On the left over here, we're gonna see the layers panel, and you'll see that we actually have the status bar, and this means group, but if you look at it, you can see the content. We have a page here, which is what we're starting with. This is page one, and that's all we have to begin with, and if we wanna create frames, maybe, like I said, for an app, we're gonna create screens. Come up here and you're gonna see the frame tool. Now, if you click on the arrow there, you'll see a frame tool and a slice tool. Slice is for exporting and we'll learn about that later, but click on frame tool, and if you look over here on the right, you'll see that we have a series of default sizes we can start from, even, this is actually kinda cool, social media, if you wanna create like a Facebook cover, for instance.
You could also draw or, you know, resize later on. It doesn't matter. Come up to phone, click on it right there, and come to iPhone 8. That's gonna create what looks like an art board to me, but a frame in Figma. Now, to zoom out, you could press the minus key, and you'll see you have a frame here. We can drag it around if we want. You can actually drag it from inside as well with no content on it. You'll see a scaling size down there. You can resize it if you want, resize the dimensions here and do just about anything you want to, and you can also see a lot of the properties on the right, so if you wanna change the background color, you can do that.
You can say show this in the exports or clip all the content. If we put content on this, it's actually gonna clip to the edge, so if we draw a rectangle just to show you, you don't have to do this, and I go out and take the rectangle and put it out there on the actual frame, make sure it's associated with the frame. Now, it needs to be put in the frame here, okay? I'm gonna do this, I'm gonna drag it into the frame itself which should put it on the frame and associate it, and if you see, when I move it around, it's gonna be clipped, so that's what I'm talking about by clipping content. And we've also got a lot of other things, including layout grids and different things like that, so what I'm going to do is this.
First of all, I wanna set it back to the iPhone 8 size, so come up to frame, and you can choose a different size or the same size. Change your orientation. I wanna change the name, so if you double click on the name up here, it's gonna take you over in the layers panel there and say let's change this. We'll just call this home, and press enter or return. Now, we'll add a little grid to this. If you want, you can add a layout grid to this. By clicking on the plus on the right, you can do something like a typical grid, which is sorta like a pixel grid, and if you click on this icon here, you can go in and change what you want, columns or rows, or grid, for that matter.
Let's go to columns, and let's just do maybe a two column, that way we have a little bit of gap there for some stuff in the middle, or you can go one column. It doesn't really matter. Actually, let's go one column right now, and we'll change the margins. The margins we'll put at 20 and press enter or return and you should see them out there. Now, you can, if you want, change the color by clicking here, change the opacity, and you can stretch them, center them, or keep them to the left. That means, if you choose stretch, if we have a layout grid and I drag to resize this, it's gonna stretch the layout grid, which is really awesome.
Alright, let me go back over to iPhone 8. So, we've got one frame out here. I wanna create a series of frames, so if you take this frame right here, first of all, I'm gonna press the space bar to move over. We can just copy this if we want to. You can actually option drag, and you're gonna see we have smart guides or something similar to smart guides. ALT drag on Windows, let go of the mouse, then the key. You can also copy paste. There's a million ways to do this, but I'm gonna, once you option on Mac or ALT on Windows, drag out a few. Whoops, that one missed, so I'll go back.
There we go. It should snap in. You should see alignments, and it keeps moving on me. Let me put it right where it should be. There we go. Now, on the left, you're gonna see in the layers panel, we actually have them all listed here. If we want to, we can also duplicate and copy and do all kinds of things. If you click on these in the layers panel, let's change the names, so double click on the new home here, and we'll just call this something like Login home, and we'll go to the third one here. Double click on the name there, and let's call this Hikes.
Now, later on, we're gonna create a copy of this one to do sort of like a modal or a layover, but this is what it means to work with frames. Next, we'll move on to creating and editing pages in Figma.
- Creating a Figma project
- Importing from Sketch
- Working with frames and shapes
- Adding and formatting text
- Drawing, components, constraints, and versioning
- Creating a prototype
- Previewing your designs on mobile devices