[Part 1] Smart Animate Tutorial

[Music] so all right welcome back to my channel a few weeks ago at dropbox it was hack week and during hack week i ended up making this cool product and i made a prototype out of it and it was in figma all through smart animate and a lot of people asked me what did i use to make it and were extremely surprised to know that it was figma so i thought well that that could make a cool youtube tutorial so here we are so today it's going to be part one of a two-part series on how to become a pro at smartanimate i know it seems silly it seems like a simple feature but you can really do a lot of cool stuff with it part one will have kind of the basics of smart animate objects coming in and out and fading in and out which is why you probably would use smart animate most frequently but sometimes you need that extra effect and that's where we're gonna go in part two so part two will be all about mostly masks and how to leverage masks in sigma to actually make really cool animations with smart animate if that sounds interesting stay tuned there will be a video right after this one in this playlist where you're gonna dive deeper into how to use masks to make cool stuff animate let's get started [Music] before heading on to our screen and heading on to the tutorial let's just have an overview of what smart animate even is so when you're in figma and you're trying to prototype something you have various transition modes and smart animate is the most recent of those and what it basically does is it takes your initial state of an object and your final state of the same object it makes it transition from where it is in the first frame to where it is in the second frame and you can see how this can become interesting if the object is at zero opacity in the first frame and at 100 opacity in the second frame the object suddenly appears in part one we're going to talk about change in opacity change in size and changing position so with these three elements you're gonna be able to do most of the stuff so let's take a look and let's see how far we can go with these three things okay so let's start from the finished version so we have this frame frame number one and frame number two and if we click on play let's just see what happens in our prototype so there's a nice list three different colors in this color choosing app we choose pale salmon and as you see there's a bunch of things happening at the same time here let's go back once when i click you will see that the text realigns and goes down here great the square the tile let's say expands to full screen all right and then you have the heart appearing from the side right a couple more subtle things you'll see are these lines appearing just fading in and the tiles the banana experiment fading out so there you go so let's take a look at the um let's take a look at the file so we're closing this up you can download this very file you can download it i'm gonna put it in the description below you can play with it but basically without giving too much away there's a bunch of hidden elements down here and we're going to try to recreate it here in the tutorial so let's check out how it's done so we're going to start from a just empty frame i just put some of the elements here so that i don't spend time figuring out which font it is or whatever so this is just as you see it's just basic groups i don't even rename things this is just a rectangle corner radius a drop shadow and a color that's all it is then you got a text and it's all just grouped up not even in a frame just like this so what we're going to do take this frame shape like an iphone 11 i believe we're just gonna drag it and i'll just duplicate it by holding option what i want to do is now hit command d and duplicate it at least once check that it's like a decent number of pixels and then hit command d again to duplicate again now let's just have some you know fun colors here so let's just do like this and maybe make this white so that it's not that bad and that's our first screen so you would imagine okay this is fine this is pretty much like this version so now just to be extremely clear and make sure that these layers don't all mess around let's just change the name to i don't know what is this color peach navy and this will become cherry great so we've got something here what i would do instinctively is i'll just command d on the frame duplicate it what do i want to have in this screen so basically you want this element which you're sure 100 is the same as the one you had here because you duplicated it to become that background but before we go into that let's just remove some noise we know for sure that we're not gonna need these two in our second screen so we're just gonna delete them what this does is figma will not see them in the second one so it will fade them away there is a default if something wasn't in the previous one and isn't the second one it will fade it in same if there's something in the first screen and then on the second screen there's nothing it will fade it out automatically which is amazing so we're left with a much cleaner screen and what we want to do is start from the background so i command the select the background suit to get straight into the grouping in case you don't know this just command it just goes into selection you see if i don't hit command it will select the group so i'll just go deep into the last layer i want it to be full screen so let me just get rid of the corner radius let's just make it as big as we want it to be i hold option to make it symmetrical and expand and now i just go down to as much as i want let's say here it's a good practice to connect the two screens in prototype mode so that when you click on this it connects to here and give it a try so just select smart animate keep it as it is i usually go for ease in and out but you can do whatever you prefer and now you can just hit play and see if it works let's see it gives it clickable so what i like to do is do a bunch at a time and then test it but you can test every every time you move something you can just play it back and see if it's working so i'm just going to move this text down here the cool thing is that you only have to set up smart animate once on the animation and every element in this screen and this screen will get moved so you don't have to set it up for every single element which is amazing so let's go back to design i had in my components here a little like button so we've got this group i'm just going to copy it and paste it here instinctively again i would probably go and put it here so i'll just put it here and if you play it what do you think it will happen you try it out let's go from here you see that it kind of is already there by the time that the other animations finish right that's because it disappear it it appears in place so we want it to slide in from the side so how do we do that we take this common c to copy it and select the frame command v to paste it in the same place and what i want to do now is because of how figma treats frames if i just move it out with my arrows and holding the shift button to just make it faster it will still be within the same frame so you'll see that it's still within frame one but it's outside and this way when i restart this and animate this it will move inside now i don't quite like that you see the whole thing while it moves so i'm just gonna take this and also make it zero percent opacity so it fades in while it moves let's see it again all right so you don't see that stark coming in from the side cool so this is pretty much it for part one i hope you've learned something and this is pretty much the basics for smart animate and figma it's very very simple and you'll see yourself using this over and over again for all your projects it's just so easy stay tuned for part two if you want to see how you can actually use this to look like a pro we're gonna use masks all the way through in all possible forms and shapes so that you can control when things appear and how they appear cool see you in the next one [Music] me

Channel: Carola Pescio Canale

Views: 91,198

Keywords:

Id: ZogZK04wX54

Length: 10min 25sec (625 seconds)

Published: Fri Aug 07 2020