Figma tutorial: interactive components and smart animate

hi everyone um today i want to show in this tutorial how to create an animated loader using variants uh and animated and actually sorry interactive components which gives us the possibility to animate variants of a component meaning to create an interaction between them and there we can create our animation create our loader i've created a simple form for the sake of this tutorial um a really simple one and we will go ahead and start creating our loader and also i will do a small animation here in the mouth of this cute illustration so i duplicate uh i duplicated the screen and our loader actually is gonna go here okay i'm gonna put this on opacity zero i can also delete it if i want but it doesn't matter so much right now uh let me just design uh the loader and we will do it in the color of the background of the of the screen itself and i'm just going to place it here duplicate it one time and i think that four will be enough good enough for us yeah i think it looks okay i'm going to take it outside of the um of the form itself of our screen and uh you know what i think that in animation i don't think i know usually better to create a frame that will hold each one of them it will make the animation more stable okay it may looks like an overkill but it holds the animating parts and they don't kind of sometimes when you don't do it they have kind of like small annoying jumps or it doesn't go so smooth from experience from trying it a lot of time so i will do it like that okay so we have a frame actually and we have a circle in that frame and the frame actually holds the position of the circle inside the component it's not a component yet but it will be so uh let's call it one two three and four that's good and now i'm gonna frame them all together or actually make them a component yeah we can make them a component actually we can create variants in two ways we can create um let's say i put them in a frame and i call it for example uh [Music] one [Music] okay and then when i duplicate it that can be our second state and so on or i can make it a component okay and then i can just click on the plus add new variant and it's going to create the variant already for us meaning uh instead of creating a few components and combining them as variant we can already do it straight from here and i will call this variant uh two and the default one i will call one okay so that's one that's two and we're going to add uh even we're going to add actually um we will add two more okay so meaning we need actually yes because i want the default state to be like that and we will start animating from the rest of the states so that's the default state which is one here i will call it three and that would be four and this will be five okay great now i will make this one sorry i need to work with a circle inside of it uh yeah 13 i think is enough maybe it's a bit too much now let's let's make it like that that's okay i mean we can always find unit if we want to in the second one of course i will do the same same as this one and same goes for this one up till now it's quite simple so we created default one two three four okay and it goes actually it will animate between themselves the beautiful thing with uh interactive components is that i can create a component which which will have a stand alone animation meaning i don't have to animate between screens to get the animation of it so i'm going now to prototype the logic is the same as animating between frames and then i can just connect it to the next one okay in the next one i'm gonna choose after delay because i want these frames to animate between themselves okay without having to click on something in order for it to animate or to actually interact between one and another okay smart animate i will choose i think 150 milliseconds between them seems okay and i chose after a delay meaning i don't want the delay i just wanted to go to jump between one to the other without having to click anything so i will do that you know what the first one i'm gonna give it a small delay a very small delay of a hundred milliseconds i think it's good and on the other ones i'm going to uh put it on one you we cannot put zero it doesn't let us put zero so i'm putting one smart animate 150 milliseconds is good and i'm gonna sue i'm gonna do sorry the same with the rest just uh connecting the connecting them between uh one to each other and the last one goes back to the first one again after delay and there we go so in general as it looks we have our variant ready and we will test it to see how it works i'm gonna take a copy of actually it doesn't really matter which one of them but i'm gonna take the first one and i will just align it exactly to center with our button component and let's see how it works i'll give it let's give it a test drive i will connect this button that when i click on it it goes to this frame and this frame actually holds our loader okay so this one i will delete i don't need this flow and uh let's see how it works let's give it a test drive [Music] okay so okay we are looking good works excellent i think it can even you know what you can make it either faster or slower it doesn't really matter i mean you can design it as you want uh you can make these circles uh grow less grow more it's up to you the important thing is that you understand how it works okay i will go back now to my design i wanted also to uh do a small animation with this one i really kind of like a small and cute one so i will make the mouth open like this and do like this so uh we will see it happening now let me see how can i connected it i believe i did it with smart anime animate uh animite that's interesting what's up might anyway so it's kind of like uh yeah let's give it a 300 milliseconds i think it's good and let's restart it and see if we have also the small animation yes we have it which is pretty cute um so we have our loader animating and i wanted to show another example of this of a loader sorry not this one but another loader so let's do another uh example of it let's uh make a circle something like that yeah this yeah that looks like a good size actually um can make it even a bit bigger okay so i'm taking it all the way here and i will create another uh animation right now so another i will actually design another loader so we can take this circle and i will duplicate it one of them i'm going to uh give it only a stroke and the stroke actually yeah i'll give it a gray stroke i will leave it a grey stroke for now i think it's okay meaning i do it like that i think it's okay and without a fill and this second one meaning that's what i have here right now this one okay i mean you see it's this one and i just duplicated another one on it um and you know what i'll do it one i think and this one i will put exactly on top of it i will open this and make it like that yeah okay um and i'm gonna round its corners i think yeah i think it's okay and i will give it actually this color this one okay so we're going to do it like that i will make this a bit brighter i think even something like that yeah this is great okay looking good so uh i'm gonna frame and call it one same thing and i am going to duplicate it and call this one oh it's two and then i will just kind of give it a 90. now what the hell happened here i want to uh yeah this one and i want to oh that's a minus 90 but why did it kind of like throw it outside i didn't get it anyway that's okay i will duplicate this again and i will by the way uh we do have to do kind of like steps in the us in that spinner we can't do it only in uh like it's not after effects i mean we can't uh uh give it a command or something to turn 360 degrees so we have to animate it in in parts okay because the default animation or figma what it does it connects uh it it does the shortest way if i'll put it like that between point a to point b in the animation so we can't give it a full or even half circle i don't think it will really do it a half spin anyway uh so that's okay and we're going to duplicate this one as well i do ctrl d or command d on mac and there we go so now we should have a full spin uh i will go ahead and select all of them and create multiple components meaning that it's gonna turn each one of them to a component uh to a standalone component and not all of them to a one component and now when i have them all selected combine as variants okay so here here we go we actually i'm going to call that as spinner good and now we are going to interact between these variants the same way as we did actually here it's pretty much the same so this one goes to here after delay again i'm gonna give it a hundred milliseconds a beginning a beginning delay um should we okay we will see how it goes maybe yes maybe no and this is going to be let's try 150 as well let's see how it goes if it's going to be too fast we can always adjust it that's no big deal and here i'll give it a 1 and here i will give it a again and after delay no delay actually and the animated uh the last one is going to go back to the first one again after relay no delay and good i'm just going to put this loader actually yeah i'm just gonna take one and just throw it here it doesn't matter we just want to see it working uh so i'll just put it near the one that we already made and let's give it okay nice but i see that we actually don't need this uh delay i mean here it works good but here i think we are going to skip that delay so we see we just see how it works and if we don't need it then we don't so i'm cancelling the delay that was here and let's give it a another try okay so now actually it's working perfect both of them here the small delay works good i see here we don't need a delay uh both of them work fantastic okay good and we have although so this small meaning great animation so that's great okay so now i'm gonna take this one out okay it was just to show how to create a spinner and it's really easy at the end of the day we're going to take actually all these and put them here and from now actually what i want to do is i'm going to continue this form just to duplicate this screen again i'm going to do a bit of work by actually i'm gonna take sorry i'm gonna take this one out because we don't need it anymore and i want to let me think one sec what i want to do yeah okay so i'm gonna take each one of them let me see okay that's good and that is going to be here you will see why i'm doing it in a sec and that is going to be here i'm just arranging my continuing animation wait let me see where is the button the button is on you see so we have this oh sorry let me see how oh the button is on top okay that's good so that's exactly the situation i wanted i see that here we need to make it like this okay good and now what i'm going to do is quite extreme i'm going to boom do something like that but still let me see why it doesn't work so good i know now i know why because this one's actually yeah because uh they had the shadow so they were in a different position a bit from the button i think that this is the reason and good still i see and i'll fix that in a second that's no big deal and yeah okay good so we have that um and what i want to do is kind of create that the forum um shrinks behind the button that's what i had in mind so let's see how it works so what i'm going to do now using smart animate i will connect this frame okay because we can give an after delay only between frames we don't we can't do it like let's say connecting this button to this frame i can't give it in after and after delay and basically there's no need for it so i'm going to connect this frame it's gonna be again after delay we will give that loader let's say like um three seconds i think that's okay three seconds is three thousand milliseconds uh we will give it like three seconds to run and then it will go to this frame smart animate i will give it let's say a yeah 500 i think let's see if it's not too much and i want it actually ease out back let's see how it looks yeah i think it will look okay what is outback does actually is that it starts the animation a bit faster than it ends and in the in at the end it kind of like goes a bit over the end point and comes back you will see it now happening in a sec um let's see again how it works okay so i'm clicking the button nice okay that's good so uh this is what i wanted to achieve so we actually got it quite like in the first shot which is good um by the way i can give it even a custom easing and kind of um let me think for a sec yeah you know what i can do even something nicer let's give it a custom easing okay and what i want to do here is i want actually the custom easing kind of like in in a nutshell like in a very uh quick way i'm not going to really go deep into it right now but what it does is that this is the starting point this is the end point now you see the back if you noticed notice when you know what i'll give it a slower let's give it a 600 a bit slower so i want you to see when it comes to the end notice that that over pull that over movement that happens here let's see it again you see it's kind of like goes over than it should and and comes back so what i want to do now i want to give it um i want actually to uh give it even like a a pull uh or an or a step back when it starts the animation that these will go up a bit and then it will end in the same way so what i'm doing now is i'm taking this starting point okay i'm gonna take it here like that meaning that before it starts it's gonna go the opposite direction and then it will proceed to the animation that i want and now i will give it something like that i guess let's see if it's gonna happen in a normal way i will even increase the timing the more uh kind of like steps in the movement of the animation i do i give it more timing uh that it can actually do it in a normal way and not too fast or not too slow let's see exactly how it moves or how it happens right now so this is nice okay that's pretty good this is exactly what i wanted i can even pull it a bit down more like this and i will give this one like that yes i think it's even you know what let's give it an 800 let's see if it's not too slow i want to try it again so we have our loading and nice okay good now but actually i think it's a bit too slow i'm going to make it 700 milliseconds which is good and after that what i wanted what we can do i mean you can design it of course any way that you want and then what i'm going to do is you can actually open this for a success pop-up okay again we'll connect it with and after delay and for example you can do something like yeah it's i'm not going to design this pop-up really because i don't want to stretch it too much of course there are a million ways you can actually do it um but i am going to give it a uh yeah i'm going to give it this color and even something like that and you can do an illustration kind of like a success message etc etc as i said i'm not going to go really into it right now but this is kind of like just an example of what you can actually do with it and if i'll connect this one um [Music] should we do it again let me think no this time i just want to have it i think that uh this is gonna work quite well okay so that is again in an after delay now you know what yeah i'll give it also i think like a hundred let's see how it works we can always adjust it if we need to yeah it looks good already well let's see no but i think it's too slow actually uh even give it a 400 i think that yeah that will work for yeah that will be good so nice and i think that the after delay actually i mean the delay here needs to be even bigger i saw that it's kind of jumping too fast let's see now how it works nice great so i guess that that's about it guys um ah but yeah i mean i can still play with this one but anyway it doesn't matter so uh i think that that's about it guys uh i hope that you found this tutorial uh interesting and great i would appreciate if you can subscribe to my channel of course more great and interesting tutorials will follow thanks a lot see you in the next tutorial

Channel: Yariv BE

Views: 159

Keywords: figma, figma tutorial, interaction design, interactive components figma, learn interactive components figma, smart animate figma, ui design, ui design tutorial, ux ui design, loader animation, after delay figma, prototyping, ux design, figma animation tutorial, figma components

Id: LG-07F9TqdE

Length: 27min 11sec (1631 seconds)

Published: Sat Oct 02 2021