What is Smart Animation & delays in Figma?

Hi everyone, in this video we're going to look at animation in Figma. Up until now we've been doing kind of more page transitions, with the whole thing sliding out, but now, you ready for it, wait for it, eh, hey, cool, huh. That is the arrow sliding in, just the arrow, rather than the whole thing. 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. 

So to animate in Figma, 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 frame, so we're going to have Confirmation, this first one, we're going to duplicate it, let's hold down the 'Option' key on a Mac, 'Alt' key on a PC, we've got two of them, and on this first one I want it to be off screen, kind of over here. 

One of the tips is, when you are doing animation, is - I'm undoing that - is just have a bit of space. So I'm going to move it over here, just so I've got space for my arrow. So we're going to have this first confirmation, where the arrow is going to be off, and the second one where it's going to be on, and to make the magic happen, is we need to connect these two. 

So I'm going to click on this frame, and I want to say 'Prototype', and I want to say, go there, and when you go there, I want you to use Smart Animate, that's the one we ignored earlier. Basically this works when there are objects of the same name, on two separate frames, and it will animate them. You can see them on this first one, and you can see them on the second one, and it can see, like, hey, they're in different positions. I'm smart, I'm going to animate them, and I'm using the Ease In and Out back, because it looked nice. So yeah, let's give that a go, '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. What's happening is, is that this arrow is actually not part of this frame yet, or not part of this frame anymore. There was a time it was, look, I'm part of this frame, so have a look over here in my Layers panel. I've got this line 13 on the Confirmation page, but watch what happens, look, watch 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, boop, can you see? 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, 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 going to do Confirmation A and Confirmation B, just to be helpful over here, and my OCD says, A needs to be below B, A, B, there you go. 

Now, Confirmation A doesn't have my little line in there, so all I'm going to 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, there, there's one there, it's going to work. So let's go and give it a test, so I'm going to use my back arrow once, I'm just using the arrow, you can click these down here if you want. I'm on page 4, click once, hey, a little animation. 

So yeah, that's the basics of Smart Animate, 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-- let's share 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-- remember, 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-- layer order, 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. 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, 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. 

Let's go test that now, so back arrow, click once, it fades in and does that. 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, so one of the quirks is that if you rename it, so we've got line 13, and line 13, if you're like, oh, I'm going to be very careful, and good, and rename at least one of my layers, because it's got a different name now, it's not going to work. Let's go back, back arrow, click once, just kind of like fudged it. 

So if you got to name one, that's fine, just make sure you name the other one, Arrow, back one, click. What else do I want to do? I don't like the Fade In, I'm going to 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 Checkout page, and when I click this, I want the arrow to start kind of like moving in, automatically, because at the moment I've got to 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, because 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 in 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 going to go to 'Instant', and I'm going to turn that clipping back on. 

So back to 'Design', remember, we clipped it off before, or 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 off screen, make sure that it's inside Confirmation A, ready? So I'm going to 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 going to introduce another kind of transition between frames. So basically what I want to happen is, when it gets to here and we go to Prototype, at the moment what happens is, we say, on Tap, navigate to this other Confirmation B, 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, and then, after a delay of, however long, I'm going to turn it down to one millisecond. You can't have zero for some reason, you have to have one millisecond, which is one thousandth of a second. 

So it's going to be instantaneous, it's going to get here, and then automatically move to this, and it's going to 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, see, it got to there, and it automatically moved on. If that's a bit confusing let's change it to 2 seconds, so 2000 milliseconds, and let's go, back. 

So we click this, it gets here, waits for 2 seconds, and then moves to the other one, and the smart animation moves it in. You're 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 keyframes, and Figma does it, but if you're thinking, "This seems a little bit clunky", it is, don't tell anyone, it is Figma trying its best to be all things to all people. 

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, you 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. 

The other big thing is that everything needs to be within the frames, what I mean by that is, remember, our little arrow over here 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 in the artboard, it needs to be kind of grouped together inside that frame. Those are the rules of animation in Figma. All right, that is it, I will see you in the next video.