Join Brian Wood for an in-depth discussion in this video Working with frames, part of Figma for UX Design (2017).
- [Instructor] In this first video about adding content we're going to begin working with frames. Now, frames are similar to artboards you might find in programs like Sketch, ExD, or Illustrator, but they're a little different. You can sort of think of them as special groups that can be nested one in another, and a whole lot more. So let's start by taking a look at setting up some frames. So to get started, make sure you've got a file called App. You can create a new file up here if you haven't done it yet. Then double click on the App file.
Should open it up so we can start working on it. Now out here, when we start doing our design work-- Just a quick overview, you're going to see on the left, layered content's going to show up over here. We got a menu right up here which allows us to do a lot of different things. You can also check out your account under here which is a good thing. These are all the tools we're going to wind up using. Under here, this is actually the name of the file. You can double click to change it. You can also come to the arrow over here, and to click on that you can show version, we're going to talk about this later, duplicate, rename, or go back to the files.
On the right are all the properties. And up here we've got some special things like this is me, we can share, we can turn on some view settings, Pixel Preview can get turned on, all kinds of things out here. We can change our view settings and we can export. Out here is where we're going to start to create our magic. So to get started we're going to work with what are called frames. If you come to the Frame tool you're going to notice there's an arrow, click on the arrow. You can create a slice or a frame. We're going to stick with frames. As soon as you choose the frame tool, on the right it's going to show you all the different sizes we have available to work with.
I want to start with, let's say, iPhone 7. So click on that. And it's just going to create that frame. Now looking at this, I come from Illustrator and Sketch and other programs, this to me looks a lot like an artboard. And that's how you can treat it. But frames can do a lot of things. If you look over here in the layers, you're going to notice that there's actually this icon which indicates frame, it's the same as this right here. You can, if you want to, come out and resize. You can drag and move.
You can also come up here and drag it by the name, that can become important later. I love the size down here that it shows you. On the right you're going to see that you can, if you want to, come out here and change the size again. So we can say you know what, let's turn it into iPhone 7 again, I'll do that. It'll put it back where it was. You can change orientation if you want to. You can come over and change the XY coordinate. The width, height you can type in. You can also change the rotation of the frame, if you want to, either here or you can do it out there.
We can also set a background color if we want. Come right down here and click on the color and you're going to see we can do something like that. I'll put it back to white. You can drag up there. We'll talk about colors a little bit later on. Close that up. You can change things like the opacity. You can turn off the background color if you want to. Come down here, you can say Show in exports the frame itself, maybe you've got a color on it or not. And if you have content out here, you can have it clip. So in other words, if you just want to watch for a second you can.
If I grab the rectangle tool and I draw a rectangle, for instance, it's going to immediately switch to this selection tool so I can move it. If I drag it, you're going to notice that it's going to be clipped by the bounds of the frame. If I move it off just far enough, it will go outside the frame. Coming up to the frame and selecting it, if I turn off Clip Content that basically means that this stuff can sit anywhere. So I'm going to delete that by pressing delete. Come back and click on the frame. And you can turn that on or off if you want, I'll leave it on.
Down here you're going to see we can also add a layout grid. So if you click on the plus, you can add a series of column grids out here which is amazing. And the reason why I say it's amazing is because we can have frames within frames. And you'll see. We can also snap content to these column guides. If you click on the column grid right here, you can come in here and say ah, I want five, 12, you know, whatever I want to do out here, we can change this number. And we can do some different things if we want to. You can change the color, the opacity, we can set these, if we want to, to center themselves, set to the left, or stretch.
You can also set rows if you want to do that. I don't really, in this case, want to set a layout grid to start so I'm going to turn that off. You can turn the eye off if you want. We can do this later if we need to. Down here you're going to see we have some options as well. Setting things like blend modes and opacities and effects, drop shadows, all kinds of things. These are the main options for setting up a frame. Now we're going to make a copy of this. So what you can do is you can option + or Alt + drag a copy of this. Notice that as you do this, you're going to see measurements.
You're also going to see that it's going to snap or align. Release the mouse and then the option or the Alt key and you've got a copy of it. Now we can rename it. If you come over to the left you're going to see these are the layers or the layer stack. We can come over here and say, double click on this one right here, and we'll call this something like Home Screen. Suppose we're going to develop an app or work on an app. Come to iPhone 7 here and call this Login or something like that. I'll call it Login Screen to be consistent. And I can spell, there we go. You can, if you want to, lock.
You can also turn on and off. We'll talk about that a little bit later on when we work with layers as well. Couple things I did not mention. If you come out here and you have nothing selected, you'll notice on the right over here that we have background. This is the background of the canvas, which is behind here, it's really big, okay? You can say show it or not if you want to, you can change the background color, which sometimes I tend to do maybe, depending on what you wind up doing. I'll set that back to, let's say like, E0E0, you can do whatever you want.
You can turn on what's called Pixel Preview. That's going to force everything out here that's vectored to become rasterized, essentially, just for screen viewing. And then you can actually have a pixel grid turn on. Now if you zoom in out here, and you can zoom a couple ways. If you press the number one, now I'm talkin' below the function keys up along the top of the keyboard. I don't have a keypad on the right, a numeric keypad, so I'm not sure how those are going to work. If you press the number two it's going to zoom into what's selected. If you press plus or minus you can zoom in and zoom out.
Notice that pixel grid right there showing up. So I'll press one, you can give that a try. There are a lot of different view options. Matter of fact, if you come up here to view menu, click on the arrow, you're going to see Zoom in, Zoom out. I said plus, it's actually equal. And then minus or hyphen, whatever you want to call that. You've got one, you've zero, you've got a lot of different ways to work. Now later on we're going to talk a little bit about taking content and actually converting to a frame and what that means. But for now, we've got a couple frames set out here.
And once you get the hang of them, you're really going to start to see their power. Now that we've got a few frames, let's move on to creating and editing some shapes in Figma.
- Creating a Figma project
- Importing from Sketch
- Working with frames and shapes
- Adding and formatting text
- Drawing, components, constraints, and versioning
- Sharing, commenting, and exporting
- Prototyping with Framer