Using frames - Figma Tutorial

- [Instructor] So to start working on our title slide, let's go ahead and create a new page for our overall report. So inspiration, I'm just going to hit this plus sign and let's call this UX report, hit my enter key. So now we have a new page where we can start bringing in all of the inspirational images we want to help building out our slides. So again, right now we're going to end up bringing over all these inspirational assets, but in the future you could have this page containing hundreds of different things. So you'd only bring over certain ones into the page that you're actually starting to bork on your report. For now, we'll just simulate we're working on our title slide. So we're going to want to grab our title slide inspiration which is this one, and also want to grab this interior logo and the colors that we're going to be working with. So let's go ahead, multiple ways to do this, we can just click and drag. You can notice as we do that over in our layers pane, remember over here in our left hand side, the layers pane, we can also just click directly on things there. So we could have just clicked, held down our shift key and clicked. We could hold our shift key down here and do groups of clickings. There's all kinds of things that we can do in order to select things. Typically, though what I do is just drag long as we have easy way to do that. Now, what I'm going to do is move elements from one page to another page, all inside of the design file. So I'm just going to hit copy, command C on my Mac and I'm going to go to my UX report page that we created, let's just paste that in there, all right. So we have our inspiration along with our colors and logos. Just move this up a bit so we can start to see things a little bit better. So, to begin creating a presentation the first thing we need are slides, right? So just like other tools that you use to create your presentations, we're going to have slides and each slide's going to be just a element in our presentation. We're going to have multiple slides. So in Figma terms, a slide is going to be known as a frame. So the first thing we want to do is go ahead and just create a frame. So I'm going to click off of this so we have nothing selected, I'm going to come up to our top menu here and this little hashtag thing is our frames. So if I just click that, if you notice over on the far right hand side, our properties pane, it's switched to a bunch of predefined frames for us. So again, our design colleagues may be creating phone templates, so they could come in here and find the dimensions for common iPhones, Android phones, there's tablets, there's desktops, there's presentations, we could do a watch, whatever we want to. For us, Figma has created this one called presentations and we have the option of 16 by 9 or 4 by 3. So of course the most common for laptops and conference room televisions is going to be 16 by 9. This is going to be similar to what you use inside of keynote, inside of slides, inside of PowerPoint, whenever you pick just wide angle or 16 by 9 aspect ratio. So with my frame selected, I'm going to go ahead and click that and now this gives us our frame, all right, again, this is where the building blocks of everything we put inside of this frame become our slide. But the overall frame is kind of the house, just think of it that way. Now, whenever we added our frame, you'll notice that we also have a new item over in our layers pane, all right. So again, just to clarify everything, these are our pages and then there's a line and underneath that line is our layers. So for UX report, here's all the layers that we have. You can see we've added a frame by the icon here and that frame is called slide 16 by 9 dash one. So for us just so we can keep things organized, I like to rename these, so I'll double click that let's just call this Title. So it's updated the title here, you can also see that it updated the title of the frame here, all right, so with that frame selected title turns blue and we know that we have that whole frame selected. So what we know is that Sentier yellow, pink, orange, these other assets are not inside of this frame, right? They're different layers. So we'll kind of keep that in mind as we play with things later on, but for now that's a frame. So we can create frames by using, again, clicking up here on the hashtag, using the templates over on the right hand side. However, we don't have to use those templates, we could also just with the frame selected come into our main content area and we can drag a frame however big we want to. So if you have a client or you have a company that requires a certain size for their slides just go ahead and just drag whatever size you need, everything else we do will be the exact same. So you can create custom slide sizes, or you can use Figma's from the templates pane over in the right hand pane. All right, so that's how you create a frame. These are the key elements for your presentations as they will contain all the information you want to show on a slide. So let's move on to using the text tool and let's add some text to our first frame.