Lessons

Lesson Info

Animation With Custom Easing In Figma

Hi, everyone in this video, we're gonna make this animation. We kinda click the button and it turns into a box and then the box goes off. Ok, full on animation. Now when I say full on, I use that term loosely. Ok. It's gonna cover a few of the animation principles that we learned way back in the early part of the course and kind of build on those. A lot of them we've used before. We're going to use them in a bit. Good job and I'm gonna throw in some new stuff like easing. I'm going to throw in some or custom easing at least. And I'm gonna throw in the things that I know my students get wrong and get stuck on when we're building something. So, yeah, if that doesn't look very exciting, you can skip it. There's a video course, but if you want to build it with me, um Yeah, let's do it. Let's jump in. I'm gonna warn you. It's a long one. All right, to get started. Well, we're just going to see where we started in this course. Remember way back here when we made that animation? Ok, we're sti...

ll at that level. So I'm gonna, we're gonna go a little bit further and make it a little bit more exciting. You sort of the beginning there. Um, but yeah, that's where we started. We're going to be updating this page. So, what I've done is I'm gonna be working on my mobile. Hi. I, I've gone back to this original Scott Ecom, um, um, project and if you come just for the easing and animation, I'm going to do some drawing here. First, you might want to skip along. I'll get the editor. Could you put in a time code kind of down the bottom now? Just of where to jump to if you want to skip all this drawing part because you know how to draw. Now you're an amazing drawer. OK? Skip there. Otherwise wait with me. Uh So what I need is two things I need uh box. OK? I'm gonna use my rectangle tool. In this case, cos I'm not gonna do frames for this. I could um just going to be doing quite simple stuff. So um I'm gonna use my brand colors, Hannah, draw some headphones, prepare yourself for not amazing headphones. Another rectangle. Remember I can't see my dots if I'm like, if it's too small, you can't see them. So you got to zoom in a little bit and there they are. And who remembers if I can hold down just to do one, hold down the option key or the old key. OK? I want both of these sides. Yep 66. Why are they all coming? Select it first once. No, we're holding down the wrong key. I am. It's not option at all. It's command. Alright. You knew that? Uh so I've got this Wonky Air muff mod. OK. I'm gonna do a little bit of that. I'm gonna copy and paste it, it goes back over the top of itself which is kind of fine. Um But I want to now go to my, you can't remember what reflectors. OK. Flip horizontal? Is it option? H? Nope, that is center horizontally. I can't remember. So remember command forward slash or control forward slash is the answer to all our options. Let's go to, is it flip? Hey, it is, it's shift H There you go. So let's get these lined up this way far enough apart over for the circle tool. Started about there. If you hold an option or alt on a PC, you can kind of start from the center. OK. I'm holding shift as well to get something like that. Who remembers how to flip the fill in the stroke over shift X woo hoo. OK. I'm gonna use my up arrow to go up a bit for my headphones. We're getting there. I am going to pick my same color. And what I'll do is this one with our R A rectangle and we're just gonna slice it off down here. It disappears. Into this. How do I do that? Like you select you as long as this one's on the top. Click. Not Union. Subtract. Ok. And I've got some kind of headphone one to use my air keys to go in twice and we've got some average looking headphones. Ok. Now, you don't have to group them, but it is really handy to do it um because it doesn't always goes wrong, but sometimes these things end up doing their own thing. So let's stick them all together and shall we stick them in a frame or a group? Let's put them in a frame. Cos everything can be a frame. Let's give it a name, headphones. Remember from our earlier animations, you need to keep the names consistent across both of these panels and this is my box. Wow, that was exciting. Ok. So we've got some headphones, they're gonna drop into the box. They're too small K to scale it up if you need it inside those. That perfect. OK. We are going to duplicate this. So I'm gonna hold my option key I make on a PC and this is how we're going to animate across two frames. What do we do? This one's going to be down here? OK. Layer order. It doesn't really matter. They don't have to match the names have to match. But like on this one, actually, it needs to be underneath the box somehow. Actually, we'll double check that that's actually a rule. Maybe it needs to start in the right bit. Let's give it a go. OK. So how do we animate it? OK. We go to our prototype tool. Where do we get to prototype? It's all the way up the top here. Here you go, scroll up. OK. So we at prototype, you, my friend are gonna go to this box and we're gonna do the same thing we did before we're gonna go on a delay. So after the delay, how much is a second? That's right. 1000 of these milliseconds and then it's going to navigate to this. Now, animation basically always use smart anime. It's magic, it just smart, animates it easing we'll look at in a second. So let's do ease in and out. Why not? All right, let's give it a preview. I've got to make sure this one's selected this flows. Now you can double click it here to change it. Instead of doing it over here. There is a flow too. Let's call this one our headphones animation, bad name. Anyway, it's a plate. Prepare for glory. Everyone. What? Uh it worked? OK. I'm gonna go back using my back arrow. Oh Looks great. So after a delay, they fall in the animation, the easing is fine. OK. What we're gonna do is look at custom easing. So let's go back to, I'm gonna close down that one. OK? What we're gonna do is the easing is done between the two frames here. Ok. So, uh a little tip is you can just use your up arrow to go up in tins whole shift to go up in hundreds. You're only gonna notice hundreds. Ok. So let's go to, um, let's say we go to like 22 seconds. Ok. Let's give it a preview over here. We don't need to reload it, just hit ar key and I should restart it very slow. So, um, you can do maths in lots of things. This is like the bonus for this video. You've stuck with me with the boring old headphones. You get the super amazing shortcut. I can divide this by two. You can do this in lots of different things. Let's say that I need to design and I need the, the width to be half of that I go divide by two. OK? And because they were linked, they both come along. So there's mass that you can do throughout any of these, ok? You need to move it down by double, you know, X is the drag X. I don't know which way X is. I don't know how I got to this age and not know anyway. Uh So if you need X to be like uh let's go uh twice the way over K needs to go twice that way, double, double what it is, you can hit times which is actually the asterisk key normally smushed together with your eight key. So I need to hold shift eight on my keyboard, but you'll find that on yours. Ok? Do that times two and it'll move across to. So there is a lot. So you can do minus divide by times plus you need to add, you know, like um some padding to the outside, you can plus 20 padding, ok, to any of these fields. So segue, uh where do we get to? This prototype is going to have a delay, ease in and out. But actually I wanna switch to custom, ok. So you may or may not have seen anything like this. Basically, the easing in and out. Can I switch? So easing, that's the in, that's the out. The easing is this kind of like lovely bend here. Basically, this is time, ok? And basically this is how fast it's going. So basically over time, this is going very slowly, ok? So the speed increasing, imagine this is MPH, ok? Or kilometers per hour where you depending on where you're from. So 0 to 100. Ok. So between here and here right at the beginning of, you know, this bit, it's actually going very slowly. So a lot of time has passed, ok? But the speed has gone from like zero to like it doesn't take you, it hasn't gone very far, ok. It's only going up to like 10 miles an hour, ok? But in the middle here it's cranking, it's going really fast, it's going really high. So it's moving fast in the middle and then getting really slow at the end. Ok. MPH. It takes ages to get to 80 to 100 miles an hour and all clapped out. Bang a car. Ok. So that's the easing. If I go back to ease, actually, let's do the custom. That's just to ease in and then go back to custom. It'll show you slowly, slowly, fast, fast, fast, fast. OK. That's easing in. OK? If you got a custom though, you can just click on them, click and drag out of them, that's what you gotta do. OK? Click and drag them. OK? And you can get your s and going. There you go. Now that look at that one, this is gonna be pretty extreme. It's gonna go super like whoa and then at the end here uh over one second. So let's give it a preview, hit, refresh. There you go. Is that better? It's, it's not, but we learnt what custom E is. OK? So you can do it the other way around as well. Very few people will do this. Um Oh no, I take it back. I don't use it very often. It's going fast, go slow in the middle and this you might have an animation that works perfect for it. Let's have a look fast, slow, fast at the end. OK? Um The S curve is the nice curve and something like that always looks nice. Curs and Photoshop easing in any of the animations that is a beautiful looking ease. Can you prove it him? Not really well. All right. So that is going to be the custom E. Let's look at a little bit of kind of principles we came for the easing uh custom E but let's actually look at a few other things that might catch you out. OK? I want to put a lid on like you saw at the beginning. So what I need to do is I, you know, the rule is it has to be in both of these frames if I want it to be in both of them. So I if I add it here, my rectangle tool, I'm gonna click this lid thing design it amazingly, here we go. I'm gonna call it lid. I honestly will probably end up with rectangle 50 or 100 and 50 that you're watching. So it's gonna be lid today. Just quickly go design, pick a color. Cool. So I want this to animate on. Actually, I want it to be here. That's where it's gonna finish right in the animation. I want it to be closed on. So it, you need to manually copy it and paste it cos it's not in this first one. It'll just magically push this repeat. It just kind of, it tries its best. It goes. I'm not over here. I'm just going to fade in and hope for the best. OK? So what I need to do is over here, do it this way and I'm going to do some sort of spin thing. There's not a lot of control because it's not a timeline animation tool. OK? It's very primitive and probably the biggest problem is everything happens at the same time that custom easing we just did uh is the same for the box, but for a simple animation, especially prototyping, it is perfect. if you want to get hardcore into animation, something like after effect has a file format called Lotte. That's something to go and research. OK? That does some amazing animated SPG stuff. Maybe I'll do a course in that one day. Um or Adobe animate. There is uh other programs I end up being a bit too Adobe. So um Google Spg animation or lotty animation files, animation tools, but we're working in FIG A. So we'll work with what we've got. Now, I'm going to draw a quick tick click once again that my friend is the amazing tick dragging left and right. I'm gonna click on this and say you in point is going to be round oh round. That end point is also going to be round that corner. We're gonna play with the miter round, you can select the model ones, do the model one go. Anyway, so this is gonna be my tick. OK. I'm gonna go back to my move tool. Now I'm stuck in this kind of object editing mode. I get stuck in here all the time. Click on. Done. OK. And now it's a little unique thing called vector. I call it tick scale tool, scale it down because I want the stroke to scale as well. It's a bit big and all right. So I want this to appear kind of over here. Oh, where is it? Do you know where it is? It's there. It's just kind of tucked inside the headphones there. I've accidentally dragged it by accident inside this frame up above the box. All right, there we go. So remember it has to be on this copy and it has to be on this one and it has to have the same name Tick Tick. And what I want to do is if you want it off screen, let's say I want this thing kind of sliding up here. What tends to happen is that's not gonna work. You remember why? Repeat? It just kind of fades in cos it actually doesn't see it here because it's off the frame. We can have it off the frame. OK? Or you know, visibly over here, but it has to be included in this uh whole confirmation V two frame that I've got V two, eh B cool. So it needs to be on a so even though it's hanging down here, can you see it? It's not inside of any of these, I can just put it in there. I can't see it there so you can decide whether you have this thing clipped or not. OK. And yeah, it'll zoom in. Let's give it a go. I close my preview and I think because I didn't have it selected. I had nothing selected. So it went way back to my flow one. But look, I got my awesome flow. Hey, uh for repeat, refresh. We do, we start. There we go. OK. And what I'm going to also do is probably get it to fade in. So down here I'm going to say you my friend Leah, actually I can use my sweet chalker who remembers select it? How do I get it to zero? Ok. Or 50 just type five or zero? No zero is 100. You can get it down to 10%. What is zero? How do I not know that? Hm. Here you go. You don't have to do that as well. You can just turn the eye off and the whole layer, it'll do the same thing. Alright. Let's give it a preview. Refresh should zoom up and feed in. Now last time we only did two frames, we're gonna go a little bit further in this one. We're gonna get you duplicate because or Kani cos I want all of this stuff with all the great naming to come along. Ok? And what am I gonna do? I'm gonna try and get it to kind of jog off. Ok. So I'm gonna go I want it to go like zip off this way. I want it to go up a little bit. So it looks like it's kind of flying off. Here we go and it needs to make sure that it's inside that frame, even though I can't see it. Here we go. So you're going to come with it. Should we get both of those? Yeah, shift, click, both of those. It's gonna come, it's gonna be a little bit up in the air as well and be un make sure it's underneath my lid. You can come along with the ride and just make sure he where is he headphones is in confirmation but underneath I'm gonna use my square brackets to send them right to the back. There we go find everything. Alright. How good is that gonna be? Probably terrible. The timing's not gonna be good. It's kind of an off the cuff den designing should have spent more time on this one but here we go ready. It's not gonna work. Do we know why? You know why there's no connection between the page, right? You need to go to, where are you? Here? You are prototype. I need a connection. So I'll do another delay on delay. After I don't know, 0.3 seconds we are going to smart animate. We're gonna use our custom ease. Actually, I'm not, I wanted to go like that. So it's getting faster and faster, start, slow, start, slow, start, slow. Fast, fast, fast, fast, fast. Alright let's give it a go refresh lo we ok. It is working. Uh I need to play with the timing. Ok, so it is taking forever to get over there and it's to do with this one. Ok. It is a bit hard. You're like how do I control the timing of this? Ok, it is how long it takes between this one and this one? Here's my custom E ok? And I'm gonna use shift to go down. Yeah, that'll do you have to go up and down a few times. Refresh animation, genius right there. Look at we go. Oh, my box is coming. Oh, it's hidden off real fast to come to my door. All right, I'll probably have a couple and maybe not as abrupt. Alright. That is almost it. I'm gonna show you what happens now when you're like, oh, I know I'm gonna add this other thing way back at the beginning. So you saw at the beginning that kind of purchase button updated. Ok. It's gonna be, you know, I want to actually double back. How do I double back and like add another frame? It's not that hard. Ok. I'm gonna use this one again just so that I got the naming conventions. I don't need half the stuff. What do you do when you got a, you get, you might as well. Final, final, final, final V two. I've ruined the naming. Let's go full into it. Alright, I got two flow starts. It's not what I want. Oh ok. If you want to get rid of the flow, don't click of the whole thing. I want. Why have I got two of these? You I've duplicated it and minus it. There we go. And so you go there. Can you see I can actually have two of them? Which is a weird thing I don't like about fig a You can actually have two of these. OK? So delete one, add one. You go. There you go there. And this one is going to be different. Actually, I'm not gonna have that. I'm gonna have you when you clicked, go there, I'm gonna fake this into a button. Ok? So I'm gonna say you are now a button. I'm not using our components on all that lovely um variance. I'm just kind of faking it here and I'm gonna say design four. I'm gonna add a purchase there, purchase and to make sure I'm using my styles, you've got to actually select them all to make sure their sly uh styles applied. And then I want to make a bowl anyway. So it's about the stage that I'll probably create another textile for um this can be my button one text. OK? It's basically the same as the paragraph except it's bold instead of having to change it and override it. Uh All right. So this is gonna be it. I'm gonna s this guy here prototype when he is clicked, he is gonna go on tap, go to this place under smart animate and I'll probably ditch my custom E and go out and back. Yeah, that might have cool. We'll give it a test anyway. So this stuff here, remember we can delete it as long as you want it to fade in. Over here we saw that if you delete stuff fie goes. Alright. I'm just gonna fade it in cos I don't know what else to do. Yeah, let's play this one. Click on this. So if you don't want that to happen, I'm gonna undo you gotta do something with it. So maybe they fall from the sky, make sure the headphones are still in my final, final V and this thing here you can't get it to follow a path if you are asking you're like, oh can I get it to follow a path in? No, it'll auto animate and you got to kind of get used to a bit of auto animation like what it's likely to do all are they all in there? Turn it on and off as a good way. The eyeball are they all in there? Is this gonna work? Refresh purchase? It's ok. You can say it, you can say it uh refresh purchase purchase. That's kind of cool, right? The little boxy thing. All right. That is gonna be it. And for my little animation here, I'm actually gonna say you after some time loop back here. So on delay, after zero seconds go back there. It's my animate. No, I'm just gonna go dissolve. Let's give that a test button. Go back around loop back. Aha Walt Disney. Eat your heart out. Things to remember. Things have to be named the same on both of them. If I now and go and call this thing, you can just change them quite a bit. Remember if I call this one button because I'm being good. It is not going to animate into this one. Refresh, click, it just faded out. OK? The other thing that I run into problems with is I'm gonna undo that is I'll go over here and I'll start grouping things. I'm in design view, I'll start grouping it and that is not good because it's kind of now this group instead of all these things and it's kind of hidden away. And what does this do with? It just kind of faded out at the end there because it didn't know where to go over here. So be careful not to group things or frame things once you start, just keep the same consistency, keep testing to see if anything breaks. And yes, you end up with loads of frames. That's why it's down here. I wouldn't keep it along with this workflow because it's just you end up with so many of these. Another thing you can do. Maybe we let it tidy up OK, so I've selected all of these and I want to get the spacing the same. Can you see they're all off? OK. If I select them all tidy up works on everything, not just objects in frames, but the frames, outside frames themselves. OK? And if you think this is complex, let me go find you one. You wait there. Alright. I'm reluctant to show you other people's animations cos they're way better look at this. How cool is that? Ok. And I guess I wanted to try and find one that had this, is it? So basically every single thing is in its own frame and they've just played around working with like what can auto animates all auto animate? Ok. And some custom easing to like say this box close. So obviously that falling in is pretty easy, but then the box closing, they've kind of they couldn't go straight from there to there because fig a messed up the animation. So they've had to kind of like do a little bit of in between, a little bit of in between a little bit more, a little bit more, a little bit closed, a bit more closed, bit of tape there. It's pretty amazing. Like uh it's pretty amazing what they've done. Ok. And it looks like this when it's finished. That's another one, that one, this is my favorite. Look how happy this one is. Oh, ok. And I had to go in and have a look at how it was made. And so that's what you're gonna do. Like, I just went into community typed animation and then clicked on lots of them. Lots of them are horrible. OK? And some of them are great. And then you go cos you've got sweet fig skills, OK? You can go through them, the um you know, unpick them. Now, this is so good because the illustration is so wonderful. OK. And I could do the same thing, but my stick man wouldn't be as um as nice. But looking at it, we can kind of see there's from frame one. It's just a lot of time delays goes to frame two, time delay, time delay. So they've actually drawn these separate pieces. OK? And it's actually like, so that's the kind of main part I feel is this lovely illustration, but the actual bouncing between the two is let's have a look. It's all to do with the easing. Can you see they've done smart anime like we've done, but then they've done some nice things with the easing. As in when I say nice, they've gone through and you can click it out and above. It doesn't have to be within here. I kind of kept mine in the box. You can be outside the box. We can ruin this person's animation. OK. Let's have a look. Let's go back, refresh. Will we notice it? Yeah, we will see that kind of zip at the beginning. Ready go. W ok. So, yeah, this is art not science. I feel like there's just beautiful illustration, some great easing going on and lots and lots and lots of shift one frames. I've seen way more as well. I've seen like 3040 of them as well. Wow. What a meandering video. But we learned custom e earlier on, we built a slightly bigger project and I guess that was my goal here is to show you a bit more of a fuller animation. And we went from our little black arrow that moved in to, I don't want to go back to mine now. Mm. Uh On the, on the line. All right. I will see you in the next video.