Awesome Micro Animations With Figma Tutorial

hello there my gorgeous friends on the internet in today's episode i want to show you a few awesome things that you can do with figma and you can create these awesome micro animations i would say so let me just show you quickly what you can do because there's quite a lot so i put together two examples that i want to teach you and yeah that's pretty much it and then i'll leave you alone so here's a button toggle so take a look at this quite cool now it's 30 frames per second the video is 30 frames per second so it's not going to look as smooth but if you remake it of course it's 60 frames it's gonna look quite nice but that's one and i also made another one which is this one [Music] so quite cool and we can do this quite fast actually we can probably put it together in like 15 minutes or so both of them so yeah let's get started i'm going to close this up so just open up figma and the first thing that we're going to do i'm just going to set up a new artboard here so i'm gonna go to the artboard tool and click on macbook boom so we have macbook five i'm gonna position it right here okay i'm gonna smooth out the borders for no apparent reason i just like to do it like that okay so the first step is to make the background so i'm gonna go here and just gonna go here to the tools where you have the shapes select rectangle drag it out drop it in the middle and we're gonna resize this let's do let's do 300 so i'm gonna go down until i have 300 by let's do 150 or 100. let's do 100 let's see just like that so width is going to be 300 height is going to be 100 i'm going to center it just like that until it snaps right there and i'm going to smooth out the borders let's do 50 on the borders like that perfect all right now i'm going to color it a bit darker i had it a bit darker here now this is a bit longer but it doesn't matter i guess you can shorten it up to maybe 200 yeah but i'm gonna keep it big there we go 300 that's good for me i'm gonna go here to the fill click on it just make it slightly darker something like that okay cool and now we'll just add a circle in the middle so click here eclipse holding shift i'm gonna drag out let's do 50. let's see how this fits in here okay maybe a bit bigger now the cool part is if you hold down shift it's going to resize like that but you can keep it in place by holding shift and option and then if you drag up it's going to stay right there so i'm going to make this oh let's do 70. i'm going to change the color to white there we go all right so that's our toggle now i want to move this from here to here and i want to make sure the distance from the position is the same so the spacing here is the same and where it lands it's also the same so what i'm going to do is just drag it all the way till it snaps here to the edge and then holding shift and the right arrow key i can just do 30 like that move it 30 pixels across cool so now when we move it i'm just going to create a duplicate one here i can just go here to the edge and then one two three and i know that the distance is going to be the same okay so that's kind of the idea all right so we have that now what we can do if i just duplicate this artboard so just do ctrl c ctrl v what i can do is just simply grab this again kind of the same thing that we did one two three and that should be it right so click on this prototype up there in the corner and what i can do is just i'm just gonna do it on the background because we're gonna reset the whole thing so you don't need to follow along here but drag it there hit play right and you have the smart animate on so here in the settings as you can see we have smart animate 850 ms okay so i'm gonna go here click and boom there we go now you probably won't have this um this nice transition here this easing but we're gonna remake it so don't worry okay so i'm just gonna get rid of this because i wanna do a couple more things before i i move this across i want to group everything up so whether i click on the background or the button the animation is going to run but also as you can see here uh we have this off button and then it goes to on so let me hit play again so as you can see the off goes down and the on comes up now the other way wait so yeah off goes down and up also goes down but from up i swear on the high there's no better way for me to explain that i actually like this this looks like a wiener here that's not what i did with the sizing here let's make it thicker of it uh let's go to design i'm going to make this 150. let's do 150 there we go that looks much better does it 120 yeah about 120 there we go by 300 i'm gonna position this again just make this a bit bigger 80 move it across so 10 20 30. okay so what i want to do is add some text on it so go to text click here and say off i'm going to grab it and just change the color to this gray that we have here so clicking the eye drop boom and just position it now you can pick whatever font you want i picked monster on bold so that's cool now when this is going to go up like this as you can see it shows up here right but i don't want it to show up i want it to hide when it goes up so what you can do is create a mask of that circle when you create the mask of the circle if it goes out of the circle it's just gonna turn invisible okay so what we can do is just select the circle this eclipse duplicate it so ctrl c ctrl v so as you can see now i have two eclipses and on this one i'm just gonna click this mask button like that so now it masks everything that's above so in this case only the text right so again you can imagine that this circle is the only thing where things show up in and everything outside won't show up so again i can create whatever shape i want there we go we have this red eclipse as you can see if i move it around it's only gonna show up in that mask okay so now i'm gonna get rid of this we don't need it so when we move it up look at that it's perfectly gone so that's cool okay so we have that here and what i'm going to do is create the on button as well so i'm just going to duplicate this circle for now so just holding option dragging along there we go now i cannot see it so i'm going to temporarily just disable the mask actually what i did was i duplicated the mask which we don't want to do so make sure you click on the eclipse here and not the mask and duplicate that i'm going to go on the mask and turn that off all right so now we just have two circles in here that's pretty much what you want so i'm going to move this across position it because what i want to do one two three move it in position i want to have the on text perfectly centered here that's going to come down so i'm just going to duplicate this off and put it up here like that and change it to on like that all right i'm gonna position it up here where it lines up with the center of this button just like that all right now we don't need this anymore so we can get rid of it and now we're just left again with this eclipse and the mask so if i turn on the mask as you can see the on button disappears so perfect now but also what i want to do is add a gradient to it because as you can see here when we click it this has a gradient on it and then the background changes as well so i'm just going to go disable the mask go on the on button and just add a nice gradient to it so go here to linear i'm going to zoom in there we go and just put this here and then put the other one there just like that okay now i'm just gonna pick two random colors you can pick whatever you want just like that cool so that's pretty much it enable the mask and now i'm going to grab everything here or you can just do that i guess that's easier and just group them so right click and group group selection there we go so now we have just one group and we're going to call it the button there we go so now this is very simple we just duplicate this frame so ctrl c ctrl v on the frame there we go and here all we need to do is take this off holding shift i'm gonna drag it all the way up till it snaps right here okay boom right there i'm gonna disable the um the mask for a bit so you can see let me just line that up there move this across here bring this down here i'm holding shift so i don't move it around like that center it like that that's it we can turn the mask back on now as you can see i only moved the circle and i didn't move the mask so as you can see the mask is still there so i'm going to move this across as well just like that okay cool and now we can just go to the background and add a linear gradient to it and we're going to use the same that we added to the text so just move these around like that click click and that should be it let's take a look so now we can go on the button here prototype i'm gonna drag this to this frame and we're gonna have it on click navigate to the macbook six and we're just gonna use smart animate and i added 850 seconds now it's not gonna look as good as you might think it will if i click on it as you can see it's a bit not so nice what i also want to do is from this one i'm going to drag it back here so i can toggle it basically like that okay it doesn't look that good but here's a cool thing that you can do when i click on this button and on the prototype here we can go to easing and actually select a custom one and you can mess around with this curve however you like what i did though is i want to ease in and out so the last one here ease in and out back so click on that one that's going to be quite cool look at that all right i also want to do it when it goes backwards so click on this one he's in and out back perfect let's see boom there we go now i can also customize this a bit more so just going to custom now and increasing these lines so i'm going to drag it to its direction so like this right at an angle at the 45 angle i'm just gonna keep dragging it out a bit more just like that just to make it a bit more obvious and now i can also just grab these coordinates here copy it and add it to this one so it's identical so i can just paste it here let's see now it's gonna have a bigger bounce boom boom there we go how cool that's one now for the second one let's do that very quickly i'm going to create another artboard some macbook 7 drag it down here for this one i'm going to add a background like that and i'm just going to create a square pretty much so go here to the shape add a rectangle drag it out i'm going to make the width and the height the same 200 by 200. all right center this i'm going to add a bit of radius up here let's do 20. change the color to white i'm going to add three lines now kind of like a hamburger so zooming in here dragging it out let's do a hundred just to keep it fixed all right make this a bit thicker like three i'm gonna change this uh the edges to round so go in here clicking round cool position this kind of in the center like that maybe make it a bit bigger four and there we go i'm just going to hold option and drag down duplicate this two more times and there we go still looks a bit off i'm gonna grab these maybe make them a bit shorter they seem too long i'm gonna do 80 or so i'm going to move one of these a bit down like that because i want them a bit more spread holding shift grab all of them and i can go here and say distribute space vertically and that's going to put them nicely together like that so just center them like that cool and what i'm gonna do maybe i'm still not happy about this make this five seven there we go seven that's quite nice uh just change the color of them again do a gradient linear click this i'm just gonna keep it simple i'm gonna keep them blue like that okay so now just duplicate the frame i'm going to group everything actually before i do that i'm going to group everything in here together together so grab the rectangle and the lines and group them where is the group where is you group selection cool and then duplicate it i deleted this because i don't want to do the same thing here selecting everything and grouping so usually it's better off to kind of make everything here and then just duplicate it and everything is all set up and ready so now quite easy all you do is go in here grab the middle one and pull it till it becomes invisible like that and now we grab these lines and just holding shift i'm gonna rotate it one two three times and dragging it down to the center i'm gonna do the same thing to this one two three dragging it up until it hits the center like that okay something like that cool that looks a bit off actually so i need to move it a bit up one two three there we go something like that um and for this for the rectangle since its size is perfect so 200 by 200 we can just increase the radius to make it a circle so if i increase this to 50 or 100 it's just gonna become a circle how cool is that okay so that's kind of the idea now again if this had a different size the rectangle was like 300 by 200 this would have not worked as you can see it looks off so now we just take this prototype literally drag it same thing same base here everything is going to be remembered from the previous artboard okay so you don't have to do anything else so i'm just going to go here and find it which is this one click and take a look there we go we have our animation let's go back here prototype and make a toggle so i'm going to drag it backwards to the frame and there we go look at that that's it you just made two awesome micro animations and that was like 15 seconds with my blabbering and everything else uh you could probably do better but there we go there's so much you can do with it masking is very underrated um oh i made it a bit smaller actually this is what i did a circle i'm just gonna hold shift and option and just make it a bit smaller hold on hold up click on this there we go so something like that let's see yeah there we go let's make it a bit smaller that looks much better okay there we go thank you so much for watching hope you enjoyed this little video i promise i'm gonna do some programming because it's been a while i've been doing just design videos for probably the past month and a half so i'll be honest don't you worry if you want to check out my courses please do i have one on html and css on javascript and react so probably do those in order if you're interested i have some awesome projects in there i highly recommend you check out the trailers but that's going to be it for me until next time i don't know what i'm gonna do but i'm gonna act like i do

Channel: developedbyed

Views: 240,638

Keywords: figma, Figma animations, Figma prototype, micro animations, Figma tutorial, ui, ux

Id: 0YIovQXnwBY

Length: 18min 8sec (1088 seconds)

Published: Thu Aug 05 2021