Skip to main content

How to Prototype in Figma

Lesson 22 from: Figma UI UX Design Essentials

Daniel Walter Scott

How to Prototype in Figma

Lesson 22 from: Figma UI UX Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

22. How to Prototype in Figma

<b>In this lesson we will start prototyping in Figma. We will start putting designs in a phone and work with some interactive elements.</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 Prototype in Figma

Hi, everyone in this video. We're gonna prototype. We're gonna put it in a phone and when we click stuff, it moves through to the next frame. Cool. Huh? I'm also gonna get a little bit lost, a little bit into this video. Something goes wrong. We're gonna fix it together. So we all learn. Let's get started. Ok. It's an exciting time. Uh How do we prototype it? We'll do some basic stuff first. What we need to do, first of all is go from design, which we've been at for a long time. Now go to prototype. OK? And what we're going to do is have the home page selected. Ok? We'll start with this one. And what you'll notice is this little dot This little dot is important. We're gonna click hold and drag, drag, drag at arrow and go book and stick them on there. Uh Give it a play. You can just kind of click it and then let go. Now that's it. It's gonna do some basic stuff to start with. We'll do the other pages. It's the same with this one. Click on the name at the top and say you at the name at t...

he top of this one and there you go. All right, let's prototype it. Hi everyone. It is future Dan. I'm just going to pause the video here real quick and share an update to FI A I'm about to click on this button over here. The little arrow. Ok? And that is the present option. Ok. And that was the only option when I made this course. Ok. The latest update is added an extra option. Preview. So present is what we're gonna use for the rest of this video. It opens up our design in a new tab. OK? The difference between present which we use in this course and preview is preview opens up in like a little window on its own. It still does our interactions. OK? There's no real difference except one is a small little window that you can kind of keep open all the time and the other one is a separate tab. There you go. Nice little update from FIG A which is better. I still use the tab option. This one here is fine but it's always in the way but it is new. So I might get used to it. You can decide which one you prefer. There's no real difference from prototyping other than one's open and one's in a separate tab. I'm gonna close this down and let you get back to the video. Why is his that orange color? I don't know. I tried to recreate the video, but hey, it's close enough you get back to the video. OK? To prototyping it, it's called present. You can see it here. A little play button. Click on that and it will open up. You'll notice another tab. There's our original, we've gone off to this other tab. OK? And what happens is it'll present from whatever page you were on. So that's not what I want. I want to go back here and if I go to this home page here, OK, just click on the word homepage and then present. Ok. It'll basically jump back to that same tab, but at least we're at the home page. Now. Look at that. That's our sweet home page. So what we're gonna do is just click anywhere. OK? So click once. Oh it moved on, click in, check our page. Got it. What is that confirmation page has had a bad day. What is on there that is doing that shouldn't do that. Uh Let's close it downside again. Uh What is on there? Nothing, something's weird happening. Uh I'll leave it in the course in case it happens to you homepage present yours is probably gonna have this little load screen as well. There we go. You, you, you giant something in the way. I'll figure that out later on, but it's kind of working. We're getting on the giant black box. Uh Yucky, you wait there and I'll figure it out. So we all know. Wait there. All right, I'm back. I have no idea is the answer. Did you? You've already sort of in fast mode. Basically. What I normally do in a situation like that is I will start, um, I'll start going through and deleting stuff. I figured it was some SVG doing some weed stuff. So I delete that and I tested it and it still was broken. Let's double check. It's still broken. No, it's fixed. Weird. I don't know then um so all I did was delete it and then undo it and it came back to life. So just in case something else happens and it's not as easily fixed like that took me ages. It took me about 5, 10 minutes to kind of figure out what was going on. What I normally do is actually I go through and I just delete stuff and then test it, delete stuff and test it, delete stuff and test it and to see eventually something that I've deleted kind of shows that it was causing the problems. That's normally how I do it. And then I gave up on that. So I just made another version of it and that worked and in this case I just deleted it and undid it and it came back, probably closing the program, opening it back up, restarting machine anyway. Alright. That was a little bit of a um tangent. But these things happen. So it kinda worked. Let's go to our present. Now, forget this is back in the zone, Dan, back in the zone. OK? So we're gonna preview it and we have done some basic prototyping where you click anywhere and it moves along. OK? It gets to the end and it's kind of stuck. So what you can do if you kind of wiggle around, OK? You'll notice that um after a while, some other little options appear. OK? Restart which is r it's a really common one. Get back to the beginning. So you can kind of work through your prototype again. You can manually get through it. Can you see down here? Page other things that might be useful is under these options here. You might just like you wanna go like 100% or full screen to get rid of all the kind of chrome around the outside. Uh What else do you want to do? That's kind of it. And one thing you need to know is that you don't need to close this every time. OK? You, I don't know, I feel like when you're finished, you close this down and then come back over here, but you don't have to leave it open and just always go back to it because what happens is it updates, see this if I go in here and I decide to uh change the color of this. Ooh Good point. This happens quite a bit when you're new and you're like Where did it all go? OK. Cos you're on prototype. Remember to go back to the design. There's three at the top here we'll look at in spectator in the course. But whenever you're missing your colors or fonts, it's because you're stuck on prototype, not design. So I'm gonna go in here and I'm gonna say you are now going to be another color. OK. Now I'm gonna jump out to this tab that's still open and you'll notice uh if I go back through my pages, it updates. If you're using the browser version, it's handy to get this tab, pull it out and put it on another desktop on the desktop version. It's kind of stuck in here at the moment. I can't kind of pull it apart. So just toggle back between the two. If you do wanna toggle back between the two, the shortcut is there's no shortcut. That is a bit of a pain. There might be in the future check. You want Google, the thing that says uh fig a present uh what is it called? Yeah, present shortcut. OK. It doesn't exist at the moment. What we do is we use the command on a Mac control and a PC and command one is back to your little home screen. OK? We've been clicking on that command two is whatever the second tab is, that's considered the 1st 123. So in my case, I'm gonna be going back between command two and command three, command two, command three, command two make a change come on three. OK? And it updates instantly so you can keep that open. Another thing to note is you can't prototype across pages. OK? So I go to my home page, I go to prototype and I'm like I wanna go to page something over here. That's not possible. OK? So it's only between frames on a page. What you'll notice in mine as well is that I have this nice chrome around the outside of an iphone eight that might look ancient when you're watching this. OK. But you can change that. And let's let me show you how. So let's be on prototype. Let's go to show prototype settings or have nothing selected, you end up at the same place. OK? So having something selected prototype, click this button or just click in no man's land. OK? And you can say, all right, I don't want an iphone six. I want uh I don't know what Google pics are like. I own a four at the moment. Why? Why can't we have a four? You have to look at a really old uh two. and you can pick through the different colors. Um Not that they change much on an iphone, but obviously on a iphone eight. OK? Instead of the gold one, you can pick the space gray one or the silver one. It's basically the backs of the phone. So not a whole lot changes, you can change the background color, you can go from portrait to landscape. OK? And when I go into preview, now, let's have a look, hey, doesn't quite work on landscape, but you get the idea if you can't see any of these. It's because when you started, OK, remember way back in the beginning when we went, all right, make our first frame and we picked one of these defaults, OK? They're attached to this. OK? So even if you've just typed out, you've started with a desktop version and you've typed it out and made it a phone size, it doesn't connect up anymore. So you might have to make phone sizes and copy and paste them on if you want that uh chrome there. It's, it doesn't help the testing very much other than it looks cool. You'll also notice that our desktop versions. So let's have a look at desktop. Click on this one even though there's nothing on this. So click on home page on the frame too, aren't I? OK? Click on the home page. You'll notice some prototype, prototype settings. There's nothing in here. OK. So I can go and say that I want it to be a desktop. OK? Like a laptop and it's not there. OK? So there's only a few things you can actually wrap that chrome around at the moment. Alright. One last thing before we go is if you have been following me, what I want you to do is go back to mobile and I want you to break all of the um these prototypes here cos I don't want to just click anywhere. I want it to go to product details only when I click the learn more button and I want to go straight from buy. Now all the way to the checkout page. When that button's clicked at the moment, it's using the entire frame. So to get rid of it, you can do two things. Uh What I tend to do is just click on the arrow, hit delete or you can click on your frame here. OK? And say under prototype, can you see? It says we've, we've applied this interaction called tap check out. OK. Just hit minus the same thing, whether you want to delete it by selecting and deleting it or selecting the frame and then just minusing any interactions you've got added. All right. So we're back. We've gone nowhere. We added them, but we deleted them. Let's jump to the next video and we will break up the buttons, but we'll also add some animations with our transitions. All right, I'll see you there.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

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!

Student Work

RELATED ARTICLES

RELATED ARTICLES