Skip to main content

How To Make Animated Transitions In Figma

Lesson 98 from: Figma UI UX Design Essentials

Daniel Walter Scott

How To Make Animated Transitions In Figma

Lesson 98 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

98. How To Make Animated Transitions In Figma

<b>In this lesson we will show you how to make an animated transition in Figma.</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 Make Animated Transitions In Figma

Hi, everyone see this big bird's nest that turns into this magic. You ready? The phaeton D slide in a little bit later. OK. So that's what we build we're gonna do instead of just doing animation like we've been doing. It's the same thing, but we're kind of building out a page like a page transition. Ok. No, page peels, unfortunately. But there is, yeah, we can do something almost as good. All right. Let's page peel into it. Ok. Uh So we don't wreck our home page. I'm just gonna move it down here and this is where our uh um giant messy um, page starts, well, continues. OK. So we've got our home page. Let's call this thing something different. So we're going to call this one now animation. So the way this works is basically we need a placeholder page. Yeah, we're gonna have to string a few of them together to get that animation. So, uh the first thing we're gonna do is between the, actually not between those two pages, between that one and this one come with me copy down here, paste. Now...

, I'm gonna have mine a bit further apart at the moment just because I'll show you one of it. So I want this page, I'm gonna switch to prototype now. I've been just clicking the buttons over here. OK? If you start getting a bit like shortcut, like, hey, what is it? OK. Remember the shortcut? Is the command or control forward slash? And you can start typing it in like prototype panel. OK? And you saw it there, see the little shortcut, OK? It was option nine or alt nine on a PC. And if you look at your keyboard, hold down the option key on a Mac alt key on a PC. Tap 890890. They're all next to each other along the top of your keyboard. You see design prototype inspect. Also don't forget that there's this little guy down here, OK? And keyboard shortcuts. And that's actually just really well laid out and grouped and they've highlighted the best ones and this one's under view. Where is it? These three weren't these ones blue? I think it's just to show importance. OK? Of the most useful ones. So do keep cast your eye over the blue ones, probably the ones you're gonna want. So I'm going to go actually, what I might do is just break a few of these just because it's a bit messy. It's going back up to the top thing. It's not what I want right now. OK. So what I want to do is say when I click, learn more. I want you to go here to the kind of product details page on tap. I'm gonna use an animation of like push. That's what I used in this one. It doesn't matter uh easing. Let's just give it a preview and let's rename this flow here. So instead of ecommerce flow, this is gonna be my animation. Hello, Copeland's play it from here. Alright. No more. We OK. So that's what I'm gonna start with and I want this to build like I saw before. So what we're gonna do is we're gonna have to have two pages. Can I separate them out again? And basically there's gonna be nothing on this page that's kind of the main takeaway for this course or this video is that when you're doing kind of transitions you probably want to start in for an empty screen and remember we can't have an empty screen. We need to have things off screen or totally transparent. And what I would like to do is have maybe this first block slide in. So these guys I'm gonna push off, we're gonna have to make this way bigger. Remember if they are selected, you can tidy them up and then you can grab the gap in between if you've got a lot of them. OK? So I've got some space not duplicating, I'm just holding shift so they slide off this way you, I'm not sure where I got that thing from that was my footer. Now, in this case, I could, I want to group these now. Ok, because I haven't grouped them before. They should really be components, but we made these earlier in the class. Now, I'm not going to, I'm going to leave them all as this kind of ugly bits and pieces. Why? Because there are bits and pieces over here. Are they room nine? Actually, they're not, they're all together. Ok. Forget me. OK? So you can go over there, you can go over there just be careful when you are gripping them. They don't need to go over there, do they? Nobody can really see them on the first screen. But hey, let's be official. Same with you guys. I'm gonna get you guys to start you, you, you over here and I'm gonna get you start over here and I'm gonna get you probably just to feed in. So I'm gonna start it by fading it out and hit zero on my keyboard capacity set to 0 100%. Um Maybe there is, let me know in the comments if there is a set to a zero, I know there's a set to 100%. How do we not know this? Maybe there's not one. OK. And you can fade in as well. So zero. Cool. So I'm kind of projecting here. I'm saying that I want these things to slide in from these sides. OK? I want that to fade in and what I'm gonna do is over here. Actually, let's preview that just to make sure we've got everything working. So we're gonna click the button, it's gonna go here and then nothing's gonna happen, right? It's just gonna get stalled. OK? So uh for a reset, let's go learn more. OK? And it just sits there. So what I need to do is add a bit of timing. You are going to prototype mode. Let's use our sweet new shortcut. Let remember option on a Mac O on A PC. OK. And type nine prototype. This one is going to go where you can drag that out or you can say I want to add direction. This is uh not tap. I want to say that on delay. We don't want to go, I want it to go to there we go to what page. What did I name this one? I have to do some bit of naming animation, product details, like animation, product details, the so you, you, you delay go to animation, product details. Thank you very much. OK. It's going instant as well. Let's go to smart animate. OK. So let's give it a preview. Now let's ask for a reset you after time it's gonna fade in. It's not what I want. I want it to slide in. So I want you now, why aren't they in there? You might be screaming at the screen going. He didn't put them all in the original frame OK. It's one of the things when you are dragging it out. I wish there was a um they haven't Photoshop. Um One where you can say you do not leave this frame. There's an option in here says do not, you know, leave the parent frame when I drag you. Even if I say even I've kind of drag you out. Hopefully that will come in the future. It might be there now have a check. So all of this. So I need everything to be an animation product. A so I'm going to grab you guys and move it in. Let's do all of this stuff first. So all of that is gonna go inside of now. If I drag this, can you see it's missing those. If I drag those inside animation a under the scrolls part, did it leave the parents behind? It did. So I need you, you is that it those guys came along, some of them are already still in there. So let's get them all in the same part. Alright. Let's give her a preview now so that those guys should work and reset, play. Cool. So those slide in these things aren't part of it. The only reason I left these separately is that if I drag them in, in the wrong order. So if I go, you, you, you and you and so what is it tab? Let's grab the parent frames. OK. Plus U if I drag them in and I select them weirdly or I drag that one in first, let's say, and add it to animation under the scrolling part then fixed is this nav, we don't want it to be fixed and then drag these in on top. Can you see what's going to happen? You might not, but the tabs. Oh Actually you drag it underneath by accident. Let's have a look, click, pause slides in the layer order was around the wrong way for a sec. Let's refresh that one. It's a little hard to see back back. I'm using my back and actually you can't really tell the transition, but you might find that if you start them behind, they have to kind of some stage flip to be on top. Ok? They're on top over here but just know that you just make sure your layer order is it's not important like it doesn't break the animation, but you might find that for part of the transition, these guys are gonna be underneath it. Does that make sense? Why not? Anyway? Where do we go going? Um back forward arrow? OK. So that's kind of what I want and I want these guys to happen later on. So the trick for that is that we, you know, there's everything has to be timed at the same time to come in. Now this is only two for fig A. It's not something I made super clear in the last videos, you know, everything's kind of tied together when you actually go out to build this Apple website, the developer has, you know, they can control all the timing at any stage. OK. So this is just a limitation for fig A at the moment, there are ways around it. If you get there are some timeline animation plugins. Proto pies is another thing that you can export your fig files to and kind of do more complex animations. But outside of the scope of this course, just know that all of this happening at one time. It's only because that's what fig A does. Alright. Next thing is is I want these not to be in, OK? So what I'm gonna do is be clever and duplicate this first. OK? Because the trouble with doing it afterwards, I'll have to try and you know if I move all these off and then duplicate it, I have to try and move them back in where they were. So what I'm gonna do is say you frame 11 give us some more space. You can be off still inside details be you can be off. Oh look how messy this is getting and these guys are off a frame anyway, that can be seen. So we start, it pushes over to an empty screen. This thing builds and then the difference between this and this are these guys and they start it over here and should slide in. Give it a go no frame 11 is not in the right thing. Animation B scrolls. So with 99, you need to be inside animation B scrolls. Now give it a go uh play. Well, one thing we're missing, come on pop quiz. Why isn't that moving to the next one? We just did it, we did it right. I swear we did. Except we didn't say you what, what happens after this just sits there. OK? We need to say you my friend prototype member option or alt nine. OK? We can say you go there and on tap. Nope, I want you to go after a delay. Go there. How long this smart animated? Please ease out. Let's get it to ease in and let's do it in and out and back just for just for Googles. All right, let's preview it now because I didn't select anywhere. It's gonna just preview the first homepage. So I'm gonna go to headphones, animation. No animation flow. OK? And let's go to learn more. OK? So there you go. Um What we might do for this one is that ease in and back because there's so much more going on. Uh We might have to increase this. OK? So click, drag it. If you're unsure, just type it in, it's gonna take 1.5 seconds ish. Other thing we might do before we go and clean it up is I'm gonna click on prototype, have nothing selected and you can drag these around. I feel like my animation flows needs to be there. I have no idea what flo one is so you can select it and delete it. OK? This feels more consistent. Let's go refresh you. Oh slides in these, they felt better better. OK? So those are page transitions. You just have to have potentially what, what you wanna do, you have an empty page and then kind of build it on every single page. If you want different timing, if you obviously want it all to come together at the same one, you can jump from this one all the way over here. All that is how to do page transition animations in fig. Let's get on to the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES