Skip to main content

How to Use Pages in Figma

Lesson 21 from: Figma UI UX Design Essentials

Daniel Walter Scott

How to Use Pages in Figma

Lesson 21 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

21. How to Use Pages in Figma

<b>In this lesson we will cover how to use pages in Figma. Pages are another essential part of Figma and creating multiple designs.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

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

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

How to Use Pages in Figma

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

RELATED ARTICLES

RELATED ARTICLES