Figma Interactive Components Tutorial

hey everyone will from will pratt design here today we're going to be looking at the interactive components that figma launched yesterday we're going to be looking specifically at the toggle and how we can animate that and reuse it for our designs by adding it to our design system so we're going to be looking at doing this toggle here this is a little overview of how it's made if we just shift e which is a new keyboard shortcut to go into prototype and we can see how this is built and let's go have a look at what that looks like so here we go here's our toggle so on a tap we've got that little animation there and then a little bounce into the other one so how do we make this let's have a look so if we move over here what we need to do is we need to make a rectangle which is 36 by 20. there we go and then we need another rectangle which is 16 by 16. and then we need to make this round so give it a radius of eight so eight plus eight equals 16 which is the height and width and therefore we get a perfect circle and let's change the color of that to white we also need to give this a round edge so we have got 20 as the height so that means we need a radius of 10. there we go so if i just plonk that inside there there we go we've got our toggle component here so now we need to make all the different variations of this component so if we do a copy and paste move this over to the right side so that we have that on and let's give that a color let's go purple this time that might be quite cool okay so we now go out on and off states so we need to create all the other states for our animations now so if we look back over here there's a slightly simpler one i've done below or there is this more complicated one that i actually think looks quite a bit better so what we got here we've got a kind of stretched out circle and then a really stretched out circle that's moved over to the right and then we've got a one that's kind of been squashed so this is following the kind of stretch and squash technique that you can use in animation um obviously in animation software you'd have more controls but we're kind of just forcing it here in figma so we're going to do a slight stretch bigger stretch for the movement and then when it hits the other side we've got a squash that actually extended outside the boundary of our toggle background um and then it kind of bounces back in to our toggle with a color change and then the same going the other way so let's build those so we're gonna need another one up here another one over here another one over here and then same here another one over here and another one over here so on our mouse enter or mouse down we're gonna have to have a little squash there and i'm just gonna click into the shape and bring these down a bit so when we click down the circle stretches a bit and it's ready to be shot over to the other side so we can do the same over this side now just escape that click the escape key to escape move this over to this side and now we want this to be nice and stretched clicking again and let's really squash it up so so we've got a lot of movement in this piece which is why it's so stretched now i'm just going to have a quick look back over here so as we can see we've actually extended it just outside the boundary so i just move that there we go and this one this one we actually want to squash so we're going to do it like that and i'm going to click in and i'm just going to click these two um radiuses and make them a bit bigger let's make those do i want that no actually i'm going to just leave it like that so it's just stretched up a bit so as it's hit this wall it's been squashed and we also want this to slightly extend outside the battery there okay and then that's going to go into this one so we need to repeat this but in reverse now so how did how long did we make that we made that 19 pixels so if i make that 19 pixels we're just going to move it over slightly there we go and then we need to squash it this way a little bit oops make sure you're only selecting one corner at a time so yeah that looks pretty good i'm not sure it's even okay click escape key to get out and then we're going to do the same this side i'm just going to move this over and how big did we make this one we made that 26 so let's make that 26. there we go and now we really want to squash this one in one more there we go escape out of that and then the same over this side move it right to the edge and we have that at a height of 22. let's do that and we want to center that there we go okay so now we've got all our parts ready we need to go and name them so i'm going to call this toggle off so if you watch my previous video on creating components if we use this forward slash so each component will have toggle as the first part of the component name and then a slash for its state or variant so on this one we'll have toggle off what i can't remember how i named these over here so we had yes so we're going to name them via the mouse command so toggle off mouse down so we're going to call i've done i made a mistake here so i just need to undo all of that first we need to go through and group everything so let's group all of that together just doing a command g okay now we can name them so this one is toggle off this one is toggle off mouse down so mouse down is going to be the um prototyping command that we're going to be entering shortly this one will be toggle mouse up and this one will be toggle you need to put off in that one so off is the state so these are all off and these are all on and this this one will be toggle off delay so two of them actually have delays but here we go toggle down toggle on mouse up and last one toggle on delay there we go okay so now we can create components so if we hop up here click the little down arrow and create multiple components so we've got those nice multiple components now and let's create variants so these are all now one these are all now one in here so i've got these two here as well so that's why multiple are showing but these are now one component so i think it's this one yeah so let's just add a little frame to that so it will show up nicely and let's center that in the frame so here we go we need to start with off that's our component now so that's this over here in a frame and now we need to add our animations so let's have a quick look at how we did that over here so if i do shift e to bring up my prototyping we can have a look at this animation here so on mouse down we're going to change the property to i've called it mouse enter but it's actually mouse down and we're going to smart animate it that's really important smart animate and then we're going to do over 220 milliseconds which is quite quick so let's go ahead and do that so there we go just grabbing on this little circle here and pulling up while in prototype mode we'll now create a transition so it's not on on click we want on mouse down so when you mouse click down and we want to smart animate that we want to do 220 milliseconds and we want an ease in and out here so it's got a nice ease in and out at the beginning and end of the transition or animation so we need to do another one here let's go have a look how we did that so if we click here i can see i've done a mouse up this time so that's when you let go of the click on the mouse and we're going to smart animate it again and we're going to do another ease in and out but this time we're going to do it much quicker at 140 milliseconds so let's do that so mouse up and we can see it's changing from that state to that state and we've got a smart animator and i think i said 140 milliseconds okay so now we've got the next transition which we're doing after a delay so one millisecond i'm going to change that variant and then i'm doing a bit of a bounce here so let's have a look at that okay so right down the bottom we've got this after delay we want this to be immediate so the slow the smallest number we can do is one millisecond which is pretty much instant smart animate again and what did we say here here we said center in a second so we're halfing the time of this transition onto this one and here we go so if we scroll down on our curves selector here we can do custom and then we've got this nice little ui here where we can pull handles and make our own custom code so i'm going to keep that ease in really nice as it is and we're going to just affect the ease out by pulling this handle up a bit and extending it outside the boundary so that it kind of over exaggerates the animation here cool so then we need another one here which i believe is another delay so another delay one millisecond we're going back to an ease in and out so we've got a nice smooth transition from this state to this state and we're going to do that really quickly again so 70 milliseconds after delay one millisecond and we want an ease in and out there we go so now we just need to recreate that again all of these but go into this direction so we can click back and we want to make sure they're the same so we've got a mouse down here so we've got the mouse down and and we're doing a smart animate into 20 seconds okay 220 he's in a nap that's correct cool and then we do another one back this way and that was on mouse up smart animate just make sure the times are the same so it's 140. this was a delay so after delay of one millisecond and then we halved that again to 70 and i believe this is the one with a custom curve so let's grab that custom curve just pull that handle back up again so it's nice and extended out and then last one delay of one millisecond and i believe it was 140 no it is 70. okay so there we go that's now everything set up ready to go so we can now check that out over here so let's select that frame and go into preview mode here we go so on the click you can see it's doing that extend and then it's jumping okay so there's something not quite right with this animation as you can see it kind of jumps there it's almost like a stop animation and then it jumps over here and we've also got this background jumping around a bit which doesn't look great so let's go and have a look how to fix that so if we jump back into our figma file or what i've called the micro interactions playground and in this playground file i can see i can clearly see there's an issue but let's figure out how to fix it so if we click on the background if we go to fix the background jumping around first let's have a look at that so here we've got zero zero correct again zero zero correct this one's also zero zero but i can see this isn't centered so if i center that and then click on it okay that looks correct now so we've got a zero zero there and this is now centered as well and so i think these will be fine yeah all fine and then we click onto this one okay we've got an issue here so zero zero sorry zero and one so let's change that back to zero so that's now correct and then let's move that one check that's still zero zero okay so let's have a look back in here okay we can now see the background is no longer jumping around so that's good we fixed that issue so what about this kind of stop motion how do we fix this well this is quite simple and it's one of the things you have to be careful with when working with figma prototypes especially with smart anime so if we look over this side at each part of each one of these components and we can see they all share similar names rectangle and then number but the rectangle number is different on every one which means figma thinks these are different components because they've got different names so what we need to do is name rename all of these exactly the same so they're essentially the exact same part so if we rename this as handle copy and paste that and go through each one of the handles and just rename we just do that really quickly and last one and let's have a look at that now cool so you can see it's now really smooth animation but we still got some flickering going on in the background so we need to do the same for that one so let's call this bg as background so just copy and paste that onto each one of these there we go so that should now fix everything yes perfect well now we've got this really nice bouncing animation it's got a cool little squash and squeeze effect and it's got a nice micro interaction when you click down and when you lift up the mouse it bounces over to the other side so this is just a much nicer toggle than just a basic on off and it's this kind of thing that adds a lot of quality to designs and makes things appear much better and higher quality so let me know what you think in the comments below if you'd like to see any other animations or any other tutorials let me know um make sure you like and subscribe thanks for watching with me today um i'm will from wilbrat design and i'll see you in the next video

Channel: Will Brett Design

Views: 3,080

Keywords: Figma Interactive Components, figma, figma design, figma tutorial, figma tutorials, interactive components, interactive component, toggle, how to animate a toggle, figma animation, micro interactions, figma micro interactions, figma components, will brett design, user interface, digtial product design, squash and stretch, animation, ui animation, figma how to, figma interactive components tutorial, figma interactive components animation, Figma interactive components prototype

Id: lVmH5n0PDR8

Length: 17min 48sec (1068 seconds)

Published: Wed Oct 27 2021