Create An Animated Button In Figma

okay on today's tutorial it's going to be a quick one we're gonna in figma create a book Now button that animates into a success State um pretty cool effect really easy to do and it'll be a component so you can use it anywhere you want so book now animates into a success State an icon and you can take this as far as you want I've turned it into a calendar but I mean you can go you know whichever direction you want so let's let's see how we do it uh so the trick with this one is we're actually going to animate this in Reverse so we're starting with the end State and then we're going to make sure that we've got um kind of we're going to animate it backwards basically so we'll start with a square this will be our calendar give it some corners brand that's looking fine I'm going to add a book now text just because I want to make sure that I got enough space in here okay that's great um and then I'm going to duplicate this to make my rings and I'll just shrink them down so there's one I'm going to give it a stroke on the outside uh three sure duplicate that guy there we go and then to create the check mark we're actually going to use rectangles so that it animates in properly so we'll start we'll make a yeah sure eight let's make sure I ramp up my Corners to get those rounded edges and I will make it a 45 degree angle and then I'm going to duplicate this over five degrees the other way line up those round bits and stretch it out into my check mark which I'll put there it's a little bit off you guys might not care but I do so there we go okay that's all you need to do to get it set up um first thing you're going to do is we're going to turn off the layer of um no not that's a lie we're going to select all of this and we're going to create a component and we'll call it editorial spelled right okay now that it's component we will take this and we will turn that layer off for now if I turn it off I actually mean to set the opacity to zero if you turn off a layer then it won't animate properly if you set the opacity to zero then your Fades will work it's a thing with the smart animating figma okay so now like I said we're going to keyframe this backwards so we'll create a new state and I want these in this state I want these guys to kind of pop up so we're going to move them down and I want this one to pop up a little later so staggered I guess you call it so I'm actually going to move these down this one down a little bit more and this one up just to give it some more time uh and then we're going to take these and we're going to set their layer opacity to zero uh and we're kind of going to do two things with this state we're also going to bring this down uh this part of our check mark and we're going to try and to we're going to be animating that so you shrink that to there and that's about the state we want for this keyframe add a new variant now for this one what we'll do is we'll take our other section shrink it to a DOT line that up so that they're on top of each other and then we're also going to set these layers to zero excellent uh the next thing we're going to do is we are going to create a new state we're going to make this our button shape like our beginning button shaper we're going to take this we're going to shrink it down that's probably good uh just a test you can hover over the book now that looks good and then we will create one more where our book now is at 100 so now we have a button so we have a button you can click it the book now is going to fade it's going to expand to this one and then check Mark's going to animate into a final state so how do we do that well we start with our book now switch to prototype drag that up there we're gonna go on click we'll just do a dissolve for this one probably only like 200 is fine then we're going to grab this state we're going to bring it up to there and we're going to change its action to after delay of one millisecond um and now we're going to change this to Smart animate and I want this to kind of spring so I'm going to change this to bouncy okay and then we'll prototype this guy to there after delay one millisecond because you can't do zero it won't let you so my anime is fine but we're gonna go to ease in and out 300 is fine and then again the exact same thing after delay one millisecond smart animate okay now that should be set up so we will just create a quick iPhone frame we will grab our now tutorial button so the key to this is that you need to set it to the last state I mean you can reorder the states if you want and that's totally fine um it's probably the better way to do it but we can test this now so 45 we'll just make sure we got a flow starting point there we're going to hit play so now if we click this it should animate right through to our final state beautiful look at that an animated button hit on click morphs into an icon and like I said you can take this as far as you want but this is just kind of a fun little way to take your components to the next level and start adding some micro interactions uh into your designs this is a quick one hope you enjoyed it like subscribe and check out my other YouTube channel muttering Pines uh where I don't do figma stuff and for more Fitness stuff stay tuned thanks for watching

Channel: Darren Northcott - Figma, UX & UI

Views: 2,729

Keywords:

Id: 4H128x7G9fA

Length: 7min 15sec (435 seconds)

Published: Wed Feb 08 2023