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

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design

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!

2,000+ classes ranging from fundamentals to advanced techniques.

What is Smart Animation & Delays in Figma?

What is Smart Animation & Delays in Figma?

Lesson Info

26. What is Smart Animation & Delays in Figma?

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

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

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma