Figma Advanced Animations

have you ever wondered how to create amazing animations like this one in figma Jennifer you Nelson director and storyboard artist for films like Kung Fu Panda said a lot of the time in animation is spent getting the story right and that's something you cannot rush now if you haven't seen me before my name is Tim and today I will show you how I and animators like Jennifer use storyboarding to create these amazing animations I will also show you what kind of features I use in figma to create Advanced animations and last but not least of course you will know how to create this amazing animation let's waste no more time and get straight into it alright so we're in fegma the very very first step when it comes to animation is storyboarding because this is the way for us to map out what the animation actually will look like so what will our flow be we take that idea we have or the reference or whatever we have we might have seen an animation we want to create we take it and we break it down into different frames or different storyboards so here you can see the animation that you saw in the beginning of the clip broken down into different boards or different frames like this and these are all the frames that the story contains so on Hover we're gonna go to this Frame when we click this we're gonna go to this Frame when we click on either one of these links we're going to go to a different image and we're gonna get a different active link so if we click Monroe's Palace we go to this one if we click Massimo Tower two we go to this one so starting out by just making your frames creating your storyboard is essential because otherwise you're going to be in the blind when trying to create these animations so get your storyboarding going number one the second thing we need to do is if we look at our animation so if we go back to this animation that I've created and we look at the different interactions we have we have this one on Hover where we just kind of move the position of the text we get this Arrow into the image we increase the size of this image and change the color of it if we click into it these appear from the bottom and if we change items here you can see that we change the images here as well now one thing here though that is different about these link items is that we have both a hover State and an active state which means that we have multi-interactions now what the implications of this is if you want to have both a hover State and an active state or two different states or something you would before in figma have to create frames for both of these states so we would have to have a state for when it's hovered so Massimo Tower 2 here whenever it's hovered and when it's clicked which means that we get a whole spaghetti dish of frames if we do it that way instead we can create components out of it so so if we take this one grab it and put it into a frame I'll call it link item this is going to be the active State then we're going to have the regular State and here I'm going to do something that is quite handy for all of these animations um for all of these different interactions when it comes to masking is the clip content checkbox here if we click that we do the same here we see that this is going to be the regular or default state then I can move this outside of the frame and it's no longer seen because we're clipping the content and then I can duplicate it again and I can add the hover State here when that's done I can go up here and create a component set and then I just go to each of these items I rename them this is going to be active this is going to be default and this is going to be hovered sorry hovered and we're going to call this state and now we have this component that is going to help us in making our animation a bit cleaner reducing the amount of frames I increase the width here so that the text doesn't get cut off now I'll bring this down here to the next step which is to start animating so we start from the beginning we're going to be naming our layers properly to make it easier when things get messy because if you have long chains of animations a big storyboard and you don't have proper naming it's going to be it's going to be a mess so naming layers properly we're gonna be adding and removing elements as we go and we're going to try different settings in the smart anime setting window for the actual feel of the animation so we're going to use something called custom bezier which is a way for us to create cooler interactions for our animations or cooler just cooler animations I guess you'll see so let's go up here let's grab our first frame and go into it and look at what we have so we have this work text we have this Arrow here that is hidden because it's outside of the frame currently we have the image and it's container now remember the first thing we talked about which is to rename stuff so I'm going to call this image container and this is going to be space image so this image container currently Clips the image just like we did with the link you're gonna see why in a bit then if we duplicate this and we look at the top here we want this text to move we want the arrow to come into the frame we want this image to increase in size and we want it to change color so that's what I'll do so I'll move this I'll move this into the frame Arrow as well and maybe something like this I'll increase the size of the space image Center it maybe somewhere like that then I'll go to the image in the right side panel click blend mode and Luminosity okay so I think that's what we need for this date let's go to the first frame click prototype let's add a float starting point I'll call it new flow and on Hover on this image I click it I drag that interaction to the next frame say while hovering it's going to navigate to this Frame and it's going to be a smart anime animation so you can change these things inside of this we'll drop down here so I changed to Smart animate and I'm going to do a custom busy like I said busier busy not sure how you pronounce it so here we can change the timing how long is the animation going to be but we can also change the handles here to kind of manipulate what the animation looked like whenever you drag the handle here beneath the Baseline you're going to have a bit of a bounce it's going to bounce in the beginning whenever you drag it outside or above the Top Line the same thing bounce in the end and whenever the path is straight like this it's going to accelerate faster when it's more smooth like a uphill battle here you're gonna have a more smooth Ascend and here it's a smooth descend as well so let's just drag those handles to something like this the typical s-curve and this is the ease in ease out so it's easing in easing out if I click play on my flow you can see that it kind of eases in and then eases out hmm now maybe you want to make it a bit bouncy in the end to make it fun maybe increase the timing or the time that looks a bit more fun right and you can spend all day just doing like the smart animate settings so I'm going to leave that to you so just go with trial and error as your guiding principle for this so the next thing is when we click this we're going to go to this state so let's grab this whole frame and let's see what we can do here I'll have this here as a reference I'll duplicate this Frame again I'll remove these because we're not using them so these are removed then this image is going to change its position and it's gonna increase in size right so right now we have an image in the background on the image container here that's what you're seeing here in the background so let's remove that because we don't need it and this will place so that covers the full frame okay then what else we have a back button I'll just copy that paste it in map it to the top and then we have these items right in this one they are not components but remember we created components for these so I'll grab my component drag it in here I'll duplicate it and I'll change the states here default and we'll change the names as well so just copy this text paste it in copy paste and what we didn't do for this component yet was we didn't add an interaction that's a key part of these components so when we hover this default state it's a prototype when we hover it's going to go to this one so while hovering it's going to Smart animate onto this one and maybe it goes a bit quicker than 600. so let's actually add a quick interaction for this one so that we can try out the hover animations a quick and this should be a longer animation go to the flow okay and we click now okay we have a hover state cool so that works all right so what happens next when we click Massimo Tower we're going to change the image then we click Monroe's Palace we're going to change the image again okay so I'll duplicate this again and we'll add some quick interactions so when we click my SEMO Tower it's going to go to this Frame so on click we have the same smart anime animation here and something else happens right we have this image changing now if we look at the original animation we can see that when we click it kind of Scrolls up like that so these images are stacked on top of each other and when it comes to animations or interactions like that I usually like to use Auto layout so I'll actually just grab this image and I'll grab this one grab this one take them all place them here and I'll add an auto layout to this set it to be vertical Center it something like this oh something like this maybe I'll call this image stack and I will first of all remove that one and I will replace first of all also drag this down a bit I will replace this image so remove that one with this image stack so here we go alignment to the top so now it's kind of the same thing but now we can scroll through the images like that so I'll take that image stack go into this one remove that image place it here as well but this one is going to be for Massimo Tower so I'm going to change the position so that Massimo toddler is in the top and it's a bit too short so I'll just increase the size a bit I'll change this to be State active and this won't be default okay let's see if we yes we already have the click interaction quick and it works that's nice we go back we duplicate the frame again and I'll drag this one so that we have the bottom image in the top now this is also a bit short so I'll just increase the size a bit change the length to be active for Monroe's palace and this should be default and if we click Monroe's Palace add a prototype on click it goes to that frame and that works as well so now all we have to really do here is add the rest of the links so click goes tomorrow's Palace Morrow's Palace space goes back to space goes back to space Mo to Massimo so now we should be able to go between all of these yep just making sure that no I'm not on the new flow this is an issue so we've been looking at my previous prototype now let's see if it works as we're expecting with the new prototype so the hover State works a bit of a janky animation maybe so this is where the tweaking comes in okay that works the image increases in size and these no these just appear so they just kind of fade in the reason for that is we didn't add them to the previous frame because all your layers that you want to do a smart animation of has to be in the previous frame so if they are going to come from the bottom we have to place them in the bottom so I drag those outside of the frame like that replay the animation now they come from the bottom maybe a bit too quick so we could change The Click animation here to be a bit longer and maybe it shouldn't be as bouncy that looks good I think but the back button just appears as well so we have to do the same treatment here copy it paste it and then drag it outside of the frame now I replay it comes from the left just like that okay cool so now we need to see if the click The Click interaction works so the hover works and the click works cool and if we click back we can because we haven't yet added the back interaction so let's add interactions for the back button as well on click smart anime back here let's see if 800 is going to look any good let's go back in here yeah I think that works but there's a problem shouldn't go back to the hover state it should go to the default state so when the card or the image there isn't hovered so my bad again let's move these to the first date this one as well did I move them all this one okay let's replay on Hover boom our state's on these click through boom and click back it goes back now knowing these techniques what kinds of animations will you be creating in figma let us know in the comments below until the next one have a great life we'll talk soon ciao foreign [Music]

Channel: Flux Academy

Views: 117,691

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: 20IfkyJigKg

Length: 19min 40sec (1180 seconds)

Published: Fri Oct 28 2022