Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

How to use Pages in Figma

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:00:51
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024