Skip to main content

What is Smart Animation & Delays in Figma?

Lesson 26 from: Figma UI UX Design Essentials

Daniel Walter Scott

What is Smart Animation & Delays in Figma?

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

26. What is Smart Animation & Delays in Figma?

<b>In this lesson we will cover animations in Figma. You will learn smart animate and how to add delays on your animations.</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

What is Smart Animation & Delays in Figma?

Hi, everyone in this video. We're gonna look at animation in fig bar up until now. We've been doing kind of more page transitions. OK? With the whole thing sliding out, but now you ready for it? Wait for it. Hey, cool. That is the arrow sliding in just the arrow rather than the whole thing. OK? And to do that, we need to learn something called smart animate and we need to add a delay on our pages. So let's jump in and I'll show you how to make it. OK. So to animate in figment just like one element we've just been animating like a transition between the entire thing, we just want this arrow to move in like you saw at the beginning there. So what I want to do is basically you have two of the same frames. So we're gonna have confirmation this first one, we're going to duplicate it. So hold down the option key on A Mac I key on A P CS. We've got two of them. OK? And on this first one, I want it to be offscreen. OK? Kind of over here. Um This one of the tips is when you are doing animation ...

is am I doing that is just have a bit of space. OK. So I'm gonna move it over here just so I've got space for my arrow. So we're gonna have this first confirmation where the arrow is gonna be off. OK? And the second one where it's gonna be on and to make the magic happen is we need to connect these two. OK. So I'm gonna click on this frame and I wanna say prototype and I wanna say go there and when you go there, I want you to use smart animate. OK. That's the one we ignored earlier. Basically, this works when there are objects of the same name on 22 separate frames and it will animate them. OK? You can see them on this first one and it can see them on the second one and it can see like, hey, they're in different positions. I'm smart, I'm gonna animate them. OK? And I'm using the s in and out back because it looked nice. Ah So yeah, let's give that a go um confirmation. Let's hit preview and it's not going to work. I know it's not going to work. This is going to be the big thing that catches you out, especially with these kind of slide in animations. So go click once it faded in. OK. What's happening is is that this arrow is actually not part of this frame yet. OK? Or not part of this frame anymore. There was a time it was look, I'm part of this frame. OK? So have a look over here in my layers panel. OK? I've got this line 13 on the confirmation page. But watch what happens. Look, put it in the layers panel. If I drag it out, it's still part of it, still part of it, still part of it at some stage. It goes poop. Can you see it? Um I'm not sure where that noise came from, but there you go. It is line 13 and it is now like not in this frame or this frame. So it doesn't know what to do. So basically, it says there's no arrow. Now there's an arrow. That's why it just fades in. So it's really important to make sure that it is part of this frame. You can have it over here. OK? You just got to make sure it is inside the frame and you do it by dragging it in. Now, we've got a little, a little tip is, we've got two confirmations and that is pain. It's hard to know which one is which in the layers panel. So I'm gonna do confirmation A and confirmation B just to be helpful over here. And my O CD says A needs to be below bab. There you go. So now confirmation A doesn't have my little line in there. So all I'm gonna do is drag it in. There you go. It doesn't matter where it is as long as it's in this frame and there's one that corresponds in this frame. So there's line 13, we're out there, there's one there, it's gonna work. All right. So let's go and give it a test. So I'm gonna use my back arrow once I'm just using the arrow, you can click these down here if you want. OK. Um I'm on page four. Click once. Hey, a little animation. OK. So yeah, that's the basics of smart anime. As long as there's, there is something on both frames that has the same names and it does something different. It'll work. It could be even, ah let's do a couple of things. One of the things with stuff off screen on confirmation a we know it's there like we can see it there, but we can't see it over here. So what we might do is turn the maybe one of the perks of a frame is under design with the frame selected, you could say clip contents. So it kind of clips it off. So you can actually see it and work on it. It's still part of the right um layer order. OK. Nothing's changed except you can see it now while you're working but there are times you want to kind of turn it off. So it's all tidy. OK. So now I can see it, I can, we did animation of movement, it will actually smart, animate anything. So let's say we want to start it here. So it's still in the right, where were we, we're still in the right frame. It's still a different movement. But here we're going to turn the opacity down to 10% just so I can still see it. OK? And let's go test that now. So back arrow click once it fades in and does that. Ok? So there is a lot you can do. We're just going to keep it simple for the moment. Let's talk about some of the quirks. OK? So one of the quirks is that if you rename it, OK. So we've got line and line 13 if you're like, oh, I'm gonna be very careful and good and rename at least one of my layers. OK? Because it's got a different name. Now, it's not gonna work. Let's go back back arrow click once just kind of like fudged it. OK? So if you got to name one, that's fine. Just make sure you name the other one. Arrow. Be one click. OK? Uh What else do I wanna do? I don't like to fade in. So I'm gonna go back up to 100%. The other thing I want to do is I'm doing it on click. Basically, what I want to happen is I want to go to check out page. OK? And when I click this, I want the arrow to start kind of like moving in. OK? Automatically cos at the moment, I gotta click it and bring it in. You'll also notice if I go back one when I click on this because of the transition between the checkout page and the confirmation page. Cos it does this back and forth. You actually see the arrow look. That's weird. Huh? So we're going to do a couple of things when the checkout is open and prototype. I don't want it to do the crazy, what are we doing? We're going to get it to do on tap. Navigate to our confirmation. Perfect. But I don't want to do the move in. I'm gonna go to instant and I'm gonna turn that clipping back on. So back to design, maybe we clipped it off before I turned it off so we could work on it. It's great while you're working. But if you start seeing weird things, you might have to turn the clip contents back on. So let's give that a go. I actually want this offscreen, make sure that it's inside confirmation a ready. So I'm gonna go back, let's click this instant and I want it to automatically go across, not have to click somewhere and go across. So we're gonna introduce another kind of uh transition between frames. OK? So basically what I want to happen is when it gets to here. OK? And we go to prototype, OK. At the moment, what happens is we say on tap, navigate to this other confirmation be I don't want it to be on tap. I just want to use this one that says after a delay. So I want it to get here, ok? And then after a delay of however long, OK, I'm gonna turn it down to one millisecond. You can't have zero for some reason, ok? You have to have one millisecond which is 1/1000 of a second. So it's gonna be instantaneous. It's gonna get here and then automatically move to this. OK? And it's gonna still use our smart animation. So that's the only change. Let's give it a go. Let's go back to our purchase page. Give it a click. So you got to there and it automatically moved on. If that's a bit confusing, let's change it to two seconds. So 2000 milliseconds. OK? And let's go back. So we click this, it gets here, waits for two seconds and then moves to the other one and the smart animation moves it in you with me. If you're not with me, don't worry, we've got a few more of these to do. It is a little bit weird, especially if you're from another kind of animation tool where you've got a timeline and key frames and figment does it. But if you're thinking this seems a little bit clunky. It is. Don't tell anyone. OK? It is fig a trying its best to be all things to all people. All right. So the rules are make sure that the names of the things you want to animate. Like our arrow here are the same on both frames. We have duplicates of the same frame. Don't move the stuff. You don't want to move the stuff you do want to animate. You need to make sure that the smart animate is transitioning between the two. That's what makes the magic happen. And the other big thing is that everything needs to be within the frames. OK? What I mean by that is remember our little arrow over here, OK? Can't be hanging out in no man's land. It actually has to be on this frame and this frame, even if it's out on the art board, it needs to be kind of grouped together inside that frame. Those are the rules of animation and fig. All right, that is it. 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