Hi. Yeah. In this video we're gonna look at pages. That sounds boring. It is and it isn't. Um, over here at the moment we're gonna end up creating a page. We've currently got a page one. We're gonna rename it. Mobile. We're gonna create a second page that's gonna have our desktop frames on it and then we're gonna create another page that has our uh brief and our persona and also our task flow all in one kind of nice figure 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 one. it's lurking there. It's kind of probably closed up. You're on your las panel, you've got page one there. It is. You can get quite far in fig a and never have more than page one. Ok. On page one is all of the stuff we've made so far. So we've got, I'm gonna use these little chevrons here to close them down just to make everything look Tidier. Ok? So we've got our confirmation page, check out product ...

details. You can rearrange these because that doesn't make sense. Does it confirmation at the end? Oh, I don't know. Ah, that feels better anyway. So, we've got our frames which you could argue are pages. Ok. They're more like art boards, but we call them frames because that's what fig A calls them pages are a way of separating this kind of art board here. So, page one, you can have more than one page a page two and basically you get to hear and you go OK? I'm gonna start making something different. Why would you have two pages in our case, what we might do? Page one might be I'm going to double click it and call it mobile. OK? 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. Uh So we've got our mobile and desktop. Let me show you some other examples of it. Well, you 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, it's a pretty common one. OK? Over here, I'm gonna say I want desktop and depending on when in the future you're watching this, this is a really good generic size. Um 1440 by 1024. OK. Um We're gonna have 123 or four of these. So I'm going to drag one out. Don't do that. Go to your move tool. OK? Grab the name. Hold down the option. Komac or Kano PC. Hold shift as well. If you, if it's not locking into place totally is and then command D or control D a couple of times. I love that command D so satisfying. Um So we've got three of them. OK? Go through, I'll speed this up. I'm gonna name them all. Exactly like my mobile one. I totally can't remember. So I'm gonna have to flick back and forth. Please hold. Yep. That was a painful copy and paste. OK? 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. Uh Let's have a look. That is my mobile one later in this course. Just stuff ends up everywhere and it's not pretty OK? But it's truthful or honest. It's an honest file. That's what that is. So other use cases uh is we're gonna do it 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. OK? You 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 um uh and icons, uni icons, whatever they are. OK. Over here. I 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 wanna say unicorns so bad. OK? 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. OK? And there are all the good stuff. It's, it gets even more hardcore. Let's look at something a bit more big. OK? I'm at the home, I'm over here at community and I'm at explore, I'm gonna find the find anyone. Let's try this one. So Microsoft teams is liable to be massive. So open it up, it's going to be big if you've got a slow internet connection and it's a big kit. OK? Or a big fig file, it might take a long time to up to download. Mine's I've got kind of rural broadband. It goes OK. It's on a mobile device. So mm that's, that's OK. OK. 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 where all the pages are. Ok. And you'll notice that there's a cover page. Great. Um general information. Ok. 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 uh is where we get started. There's a bit of documentation on it, resources. What else things to download? So you can see it'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. OK. Let's peek at a bit of them, the layouts, the avatars, the icons. So um 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 Uikiu I kits understating what this thing does. This is a system, OK? For how to think about everything about Microsoft teams. So somebody's made this somebody at Microsoft. OK. 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 um pop up window that communicates that I've lost all your files and I'm really sorry. OK. 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 in the course, we'll make a teeny tiny design system normally called like a style guide. Um, but this is, it's a pretty big use case, but I guess I wanted to do just do pages because you're gonna have to file through these. I'm gonna 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 art boards and all sorts of good stuff. So that's what pages are for other use cases might be that you have like say you got mobile, there might be uh option one, OK? It might have a specific kind of task flow and you do another mobile option two 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 gonna give her 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. OK? So it's great to have all this stuff together. Um So it's gonna be at the top. OK? And in here, I want you to bring in the screenshot or the J peg or however you got your persona earlier on in the course. OK? I got mine here. So I'm gonna 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 uh create your own persona and I want you to grab it the screenshot or the JP that you've downloaded and put it onto your brief and task flow. OK. So I'll put it in here. Yours is probably just a big cheap egg. I'm not going to resize mine and I'm going to bring in that task flow. Uh If you remember from earlier, if you've opened up the task flow, it should be under your uh 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. Let me close it down. Go back to our initial, the one we're working on together and I 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.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf

Exercise_Files_-_Figma_Essentials.zip

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design

Ratings and Reviews

Mahyar Hassid

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

2,000+ classes ranging from fundamentals to advanced techniques.

How to Use Pages in Figma

How to Use Pages in Figma

Lesson Info

21. How to Use Pages in Figma

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma