How to use Pages in Figma

Hiya, in this video we're going to look at pages, that sounds boring, it is, and it isn't. Over here, at the moment we're going to end up creating a page, we've currently got a Page 1, we're going to rename it "Mobile", we're going to create a second page, that's going to have our Desktop frames on it, and then we're going to create another page, that has our brief and our persona, and also our task flow, all in one kind of nice Figma document, but these pages are going to be nice and separated out, so let's jump in and learn how to make them. 

All right, so to start off, you've already got a Page 1, it's lurking there, it's kind of probably closed up, you're on your Layers panel, you've got Page 1, there it is. You can get quite far in Figma, and never have more than Page 1, on Page 1 is all of the stuff we've made so far, so we've got, I'm going to use these little chevrons here, to close them down, just to make everything look tidier. So we've got our Confirmation page, Checkout, Product Details, you can rearrange these because that doesn't make sense, does it? Confirmation at the end, ah, I don't know, ah, that feels better, anyway. 

So we've got our frames, which you could argue, pages, they come more like artboards, but we call them frames because that's what Figma calls them. Pages are a way of separating this kind of artboard here, so Page 1, you can have more than one page, a Page 2, and basically you get to here, and you go, "Okay, I'm going to start making something different." Why would you have two pages? In our case what we might do, Page 1 might be-- I'm going to double click it, and call it "Mobile", and this other one is going to be "Desktop". 

So I want you to do that, because we will design a mobile version, and a desktop version in this course, there should be a tablet version as well. We're not going to design it because-- we're not, it's just a small bit in between. So we've got our mobile and desktop, let me show you some other examples of it. Well, you've got a desktop, let's, before we go, go to our Frame tool, now your Frame tool, again, I'm not trying to get too many shortcuts, but the F key is a pretty common one. Over here, I'm going to say, I want desktop, and depending on when in the future you're watching this, this is a really good generic size, 1440 x 1024. 

We're going to have one, two, three, four of these. So I'm going to drag one out, don't do that, go to your Move tool, grab the 'Name', hold down the 'Option' key on a Mac, 'Alt' key on a PC, hold 'Shift as well if it's not locking into place, totally is, and then 'Command D', or 'Ctrl D' a couple of times, I love that Command D, so satisfying. 

So we've got three of them, okay, go through, I'll speed this up. I'm going to name them all exactly like my mobile one, I totally can't remember, so I'm going to flick back and forth, please hold, yep, that was a painful copy and paste. So that's a good use of pages, there's no reason why you can't, just have them underneath here, but you will see, before you get too far, they end up looking like this, let's have a look. That is my mobile one, later in this course, just stuff ends up everywhere, and, it's not pretty, but it's truthful, or honest, it's an honest file, that's what that is. 

So other use cases is, we're going to do in this version as well, is often you put another page with things, like your task flow and persona, we'll do that in a second. Also, let's have a look, I'll show you now, because you'll have opened up some of the stuff from the Community, remember, we looked at these un icons, uni icons, whatever they are, over here, maybe I flicked through it, maybe I didn't, I can't remember, but you might have noticed that I kind of, might have gone to Layers, and I might have popped that down, because I'm like, oh, there's pages, and there's cover, and there's unicorns, I want to say unicorn, so bad, and that's how I found it. 

These are different pages within this one, this one here is just acting as a cover or a thumbnail, and there's where all the good stuff is. It gets even more hardcore, let's look at something a bit more big. I'm at the Home, I'm over here, at 'Community', and I'm going to 'Explore'. I'm going to find the, find anyone, let's try this one. So Microsoft teams is liable to be massive, let's open it up. It's going to be big, if you've got a slow internet connection, and it's a big kit, or a big Figma file, it might take a long time to download, mine's, I've got kind of rural broadband, it goes okay, it's on a mobile device, that's, that's okay. 

What you'll find is, can you see, in this one, is you might get to here and go, "That's not that useful, where's all the rest of it?" It's in here, all the pages are, and you'll notice that there's a cover page, great. General Information, they've created a page with nothing on it, just to make it easy over here, can you see, this one doesn't do anything, this one here is where we get started. There's a bit of documentation on it, resources, what else? Things I download, so you can see, there's quite a complex one, the Change Log, let's have a look at-- I bet you, there's more here, look how many pages this one has, loads. 

Let's peek at a bit of them, the layouts, the avatars, the icons, so, you know, at the end of this course, we're not going to be creating a full, this would be called a design system, it's called a UI Kit. UI Kit's understating what this thing does, this is a system for how to think about everything, about Microsoft Teams. So somebody's made this, somebody at Microsoft, and they've separated out, so that, me as a designer, if I'm a junior designer, I come in here and I go, all right, I've got to make this, pop-up window that communicates, that I've lost all your files, and I'm really sorry. 

You can go through here, find, read the guidelines, understand fonts, how they're communicating, with different fonts on different platforms, spacing, what colors they are allowed to use, what the colors communicate. So this is a full design system, later on in the course we'll make a teeny tiny design system, normally called, like a Style Guide, but this is a pretty big use case, but I guess I wanted just two pages, because you're going to have to file through these. I'm going to make mine up again, every page, see, in this case has a bunch of frames in it, inside these frames a bunch of other frames, and artboards and all sorts of good stuff, so that's what pages are for. 

Other use cases might be that you have, like, say you've got mobile, there might be an option one, it might have a specific kind of task flow, and you do another mobile, option 2, with a different task flow or different colors, or a different look and feel, concept one, concept two, you get the idea. You can use pages to separate it out. I'm going to get rid of that, what I want you to do though is have a third page, and this one's going to be our Brief and Task Flow. So it's great to have all the stuff together, it's going to be at the top, and in here I want you to bring in the screenshot or the jpeg, or however you got your persona earlier on in the course. 

I got mine here, so I'm going to copy and paste this, yours will be slightly different. I'm kind of building this functionality for you, but earlier in the course I would have shown you how to create your own persona, and I want you to grab it, the screenshot or the jpeg, that you've downloaded and put it onto your brief and task flow. So we'll put it in here, yours is probably just a big jpeg, I'm not going to resize mine, and I'm going to bring in that task flow. If you remember from earlier, if you've opened up the task flow, it should be under your little Home button, under your Name, and where is that task flow, there it is there, task flow, if you haven't opened it, remember, go back there, go to your Name, go to Drafts, go to Import, and the task flow is in your Exercise Files. 

There it is there, open that up, and I just want you to copy and paste it in here. It's just handy to have all your documents, copy, I'm going to close it down, go back to our initial, the one we're working on together, and I'll put that over there, so my task flow and my brief, all in one place, so that I can refer back to it easily, and we learn what pages do, simple. All right, do those things, and I will see you in the next video.