Figma Tutorial: Smart Animate - Create UI & Web Animations (in 17 Minutes)

hey beautiful people it's minsko here you might have noticed new jumper let me know in the comments below what your thoughts are is it on brand is it not but in this video i'm gonna walk you guys through step by step in terms of how to create beautiful and delightful and seamless transitions and animations in your ui prototypes but make sure to stick right to the end because throughout this entire video i'm going to sprinkle in a lot of tips and tricks but more importantly i'm going to answer a lot of edge case questions about animations in figma so guys without further ado let's get right into it so before we do let's just quickly go through those animations once again so you understand and i can walk you through step by step of what we're going to be achieving so i have conceptualized a very simple app to help travelers document their experiences now if you got to pick between japan new zealand and united states where we can travel again which one would you pick and let me know in the comments below so let's just say we want to open up this japan photo that we've taken in japan in some alleyway we want everything to fade out the menu bars to fade in and then the content to fade in right after that's the first animation that we are going to create so the second animation that we are going to create is if we click on this photo it's going to grow fill the screen and then the comments will sort of fade in right after so take a look grow fade in that is the second transition that we are going to be creating and these two are very very different so i'm going to walk you through step by step in how to create all these animations that we're gonna blow your dev team and also your clients away so let's get right into it guys so let's just take a quick look we've got the start screen already designed we've also got the end state already designed and make sure if you want to follow along there is a link in the description so feel free to download the file get access to this beautiful design that i've created but more importantly guys more importantly for your own benefit gently smash that like button because i will really appreciate it and then i will create more free content because this channel will be growing all right guys let's get right into it let's waste no more time let's move this over here let's quickly take a look at this so what happens next right so let's grab the experiences frame we've got all the elements but actually before we do that let's just quickly take a look at what's in this actual frame to help you understand what we're going to be doing so we have navigation right cool then we have united states make sense new zealand japan header why is there a header why is it off the screen why is the comments box hidden why is the leave a comment off the screen as well what is happening here guys what what is going on so i need you guys to understand when you are creating animations in figma you need to make sure that every single element on the screen has a starting state and an end state right so even if you want let's say for example you want this to disappear never should you actually delete it right you should always set the opacity to zero because when you want to bring it back in your prototype unique you can then tell figma that it is just going from zero percent back to 100 and you can create those transitions now if you delete the entire element and then you try to make it reappear and you want it to fade in figma is smart but it's also incredibly dumb and it won't know how to fade it back in because it doesn't even exist anymore so what you need to do is set all the elements that you don't want to be visible to zero percent so this will allow you to set it back to 100 and transition it move it around fade it in or whatever you want to do later on so that is why we actually have a leave a comment that's off the screen because we actually want to fade it up we also have the header off the screen because we want to fade it down and then we also have the comments faded out because we want to fade it in so hopefully you guys understand that now let's hit on experiences mac command d windows control d now grab your grab the navigation right make the opacity zero let's grab japan let's make that zero let's grab new zealand and let's make that zero and let's grab united states and make the opacity zero now that's the first transition that we are going to be creating so everything fades out now what we're going to do is grab experiences frame again command d control d to duplicate now what what do we want to do we want to make the headers and the comments fade in so what we want to do is open up the frame grab the header align it to the top you can manually do it or you can actually just align it spank bang let figma do all the hard work and then what we want to do is also grab leave a comment bar and fade and slide that off so i realized that's zero percent that should actually be 100 and then we want to tuck it to the bottom so you can hit align bottom bang there we go so now what we've what we're telling figma is we are actually telling figma to fade everything out and then fade these menu bars in the comment i tab in and then what we want to do is we want to duplicate this frame once again and what do we want to do here we actually want to fade the image in now so let's just take a quick look at this because it gets a little bit tricky here so do remember right do remember that we have this photo right here and this photo of japan needs to actually be much larger right so what are we going to do here now let's take a look at how this is structured so we have a japan frame that is housing that's sort of grouping all the japan related images and titles together now what we want to do is we actually want to make let's take a look at this one we want to make the image three four three by two seven four so let's do that first so let's make three four three by two seven four right so that's that and we also want it to be 100 and we want it to fade in right but it's already set to 100 why is it still invisible it's because if you take a look at the japan frame we've actually set that to zero percent because we want it to be hidden previously so what we want to do is set this back to 100 and then we want to set the japan title to zero percent because we don't want that to appear we want to hide this other image that is sort of you can see it right there make that zero percent and then we want to move this image with a keyboard just push it up to the top so pretty much what we're trying to achieve is exactly this we want we want the images just to fade in right so that is the third transition now let's hit experiences once again let's hit command d control d to duplicate and what do we want to do here we want to fade in the comments so let's just take a look at the comments over here there we have it now we actually want this to not just fade in but also fade and slide up uh slightly so if you notice that the comments are actually at the same level right now they're in the same exact same position so in the transition what we actually want to do is we want to move it up a little bit so it's going to fade up and then we want to set the opacity to 100 so there we have it now that is really how we can create all the different states for this transition so i'm going to zoom out now what we need to do is select the first screen head over to prototype on the right hand side now what we want to do is we want to zoom back in and we want to just create these transitions in between these screens so simply whoops getting a little bit tricky here sometimes it does do that so if you want you can just create a little bit more distance between each screen so they don't um it doesn't sort of get ordered it doesn't do that auto detection and let's click on this experience what we want to do is on click we want to navigate to this screen we want to make sure that smart animate is set right that will animate everything we want to make sure it eases out and we want the duration to be 400 milliseconds so let's just do that for now let's connect these two screens together should be the same oops actually this one won't be the same this one will be on a delay so remember when we create the prototype when everything fades out we don't want to be clicking anything we just want there to be a slight delay and then the menu bars slide in so let's just quickly set a delay for let's just say 100 milliseconds so a short delay and then ease out bang 400 milliseconds perfect now we also want to do that for the same one over here now once again we don't want to set clicks here we want to set it on a delay again so maybe we can set this one to let's just say uh 200 milliseconds or we can try 100 milliseconds smart animate he's out 400 milliseconds perfect done and then what we want to do here is the exact same thing so let's just quickly set that up on a delay no clicking around or set whoops let's just make that one in milliseconds so pretty much that is as simple as that so what we want to do let's just quickly zoom out let's close our previous prototype let's open it up again refresh it and let's see what it looks like we might have to tinker the transitions a little bit but this will give you a good understanding so when we click on this photo it's going to fade out suddenly everything appears so did you notice something right there did you notice that the photo doesn't really just fade in nicely it sort of grew faded in and moved so let's just quickly take another look at that so take a look at this closely right it sort of did this weird grow animating and also move up now remember that's not what we're trying to achieve right so what we are trying to achieve is we're trying to we're hoping that this photo will simply be the same size it doesn't grow and it just simply fades in and goes up now what we need to fix is on the third screen when the photo is actually hidden we want to set this photo to be the exact same width so 3 4 3 let's grab this photo in this hidden state and let's already define this as 3 four three right whoops let's make sure we set the same aspect ratio three four three there we go and let's just make sure we hide let's just fade out the japan let's fade out the other image as well here we go right and now if you notice the previous state to this one the photo is already the same width so when we transition from this screen to this one it's actually not going to grow it's already the same size it's simply just going to fade up so let's just take a quick look at this new prototype and we'll see the magic happen here we go ready so when we click on the photo what's going to happen it's going to work perfectly bang fade out boom right so obviously we can refine that it doesn't look exactly the same as the prototype is because we just need to move this up a little bit right so we just want to move this up a tiny little bit so it doesn't actually so the photo doesn't actually just fly up so high so let's just quick take a look at this japan boom boom there we go looks much better right so obviously you can tinker this as much as you want you can make it look beautiful make sure the easing is right make sure the distance it's moving is correct but hopefully you get an understanding so let's just quickly close that now the second animation that we are going to create is the fact that it the photo when it's clicked it's actually going to grow so it doesn't disappear it will just simply grow fill the screen and then the comments will slide up so let's just quickly take a look at this grow slider so it's a different approach to what we just created and i'm going to walk you through this step by step all right so make sure to gently smash that like button if you'd like that step-by-step approach all right so let's quickly go back and let's just quickly take a look at what we are going to be creating so now that we've already got this state completed what we want to do is if we click on the back arrow it will actually take us back to the home screen so then we can create the second type of animation so click on the home screen click command d or control d if you're on the windows and what we're going to do is we're going to create the next screen for this animation so once again command d or control d if you're in windows and what have we learned guys what have we learned with let's make the things we don't want zero zero opacity so zero opacity let's make this new zealand um new zealand zero opacity let's make the united states zero opacity now we want to make japan zero opacity all right we want to make this image zero opacity as well and what do we want to happen what do we want happen to this photo we want to make sure the corner the radius is zero we also want to make sure that it fits full width right full screen so 375 let's make sure that this photo set the fixed uh aspect ratio 375 bang flex uh push it to the top let's make it to the top and then make it flush to the side there we go and then what do we want to do we want to fade in the comments so comments right here and remember we don't want the comments to fade up so high that's that's a lot of distance right there so let's just quickly move this comment further up as a starting point right and then let's duplicate the experiences once again let's turn this comment section let's move it up a little bit so that's how much it's going to animate let's hit 100 and let's duplicate this upward again and then what we want what do we want to do we want to grab that comment section so where's that comment section let's just grab this one over here leave a comment and we want to tuck it to the bottom and we also want to turn this 100 so it is that simple when you do the planning and you've got your files structured right you've got the naming conventions right when you do animations it's actually very very simple so you zoom out let's grab our experiences let's grab go to prototype and let's just quickly make sure that we've got everything correct let's remove that transition let's make sure that this experience right let's bring this transition down to this screen so if we click anywhere on the screen it's going to take us back home right and then what we want to do is we want to grab this image or this screen click any if we click on this image it's going to transition over to this screen we want to create a transition from let's just quickly delete that because we duplicated this remember so we just remove those transitions so let's just move this further out move this further out and let's create those transitions in between once again so on click sorry that shouldn't be on click that this one should be after delay let's make that 100 milliseconds 400 perfect let's just create a delay after this one as well milliseconds and 400 so perfect all right so pretty much it is as simple as that let's just quickly click on this home screen let's preview this and let's watch the magic happen alright guys we have the foot we have our home screen we hit on japan fades out fades in beautiful let's go back to home screen oh so good let's hit on japan again boom whoops so what has happened there guys what has happened there let's go back one screen really quickly it didn't actually grow and it just happened right so i know exactly why that happened so if you take a look at this and this is why i mentioned naming conventions is very important i accidentally moved this image out of the out of the frame of japan so figma treated it as an entirely new element right there so now that i moved it back into japan figma will realize oh this photo is exactly the same as this photo so i'm actually going to grab the starting point measurements and dimensions and grow it into what what you see over here so let's just quickly go back into here let's go back a little bit so we're on this screen and we hit the photo boom and it grows right it grew into that photo it set the measurements from the start to the end state and that is why i mentioned always have the start states and end states for all your designs and also make sure that all your naming conventions and structuring of your files are consistent because even if something is outside of a folder outside of a group or a frame figma will treat it entirely different so once again let's just quickly close this and preview it from start to end and here we go guys let's hit japan fade out fade in fade in fade in and then we want to go back we're here in japan once again grow and it all phase in obviously guys you can refine the easing the timing all in between but this hopefully gave you a very good understanding of how to create your very first animation within big mark alright guys hopefully you found this video extremely useful and if you did make sure to you know what to gently smash that like button to help this channel grow once again i really appreciate you guys there's been a lot of support and i will see you in another video very very soon [Music] you

Channel: Mizko

Views: 23,852

Keywords: figma animation, figma animation examples, figma animation prototype, figma animation tutorial, figma animation website, figma design tool, figma prototype animation, figma prototype transitions, figma smart animate, figma smart animate example, figma smart animate tutorial, figma tutorial web design, figma vs adobe xd, figma vs sketch, smart animation, product design, ui design, ux, ux design

Id: 2bA13vdv9h8

Length: 18min 30sec (1110 seconds)

Published: Thu Mar 04 2021