How to Create Interactive Toggle Switch in Figma

check this out on off on off on off on off [Music] all right welcome back to the channel my name is galba zila and i'm a product designer and today my friends i have a quick tutorial for you we're gonna learn how to create an interactive toggle in figma okay so the first thing i'm gonna do i'm gonna click r on my keyboard and create a rectangle around like 6 36 pixels and then i'm going to click o on my keyboard and create an oval let's make it white and let's duplicate it put it next to each other so we can know exactly how wide our toggle should be let's make some changes to the to the colors of the oval i'm going to use the linear color from white to kind of a grayish color i'm gonna add the border to it and i'm gonna do it also linear from white to kind of grayish the reason i'm doing this is because i want to make this button have some kind of a 3d look now let's take our rectangle and give it an inner shadow let's do it like a negative on the white k let's make the blur on two very very subtle inner shadow and we're gonna draw give a drop shadow to our ellipse shape i think that looks good okay so the next step is to select both our layers the ellipse and the rectangle together and i'm gonna click on my keyboard option command k and that will create a component from those two layers let's name this component toggle and now i'm going to select the toggle component that i've created and i'm going to add a variant to it so to the second variant we're going to call off and to the first variant we're going to name it on so the next step i'm going to do i'm going to select our own toggle and i'm going to give the rectangle some kind of a blue color so we can tell the difference between the two of them and i'm going to move the ellipse of the off button to the right side now let's select our own switch and we'll duplicate it by holding option and drag and you can see that we have an on and off toggle now because we gave those two variants and on and off names figma does a really great job by recognizing that this component is actually an on or off switch and we can tell by looking right next to our property one that this has changed from a name to an on off switch now this works best only when we have two components on and off or let's say checked unchecked once we add one more variant to this component it will not work this way now i can actually tell it's the opposite way around so i'm gonna switch between of the two variants that looks good so i'm gonna click f on my keyboard and i'm gonna drag a frame underneath our component and now the next step is to prototype it so i'm gonna go to my prototype tab and i'm gonna select the on switch and i'm gonna drag an error to the off switch and i'm gonna tell it that on click change the variant and you can see we have that little token and i'm gonna choose smart animate and for the animation i'm gonna choose ease in and out back that creates some kind of bouncy animation in between them that i really like and let's do the opposite way around we're going to select our off toggle and we're going to drag an arrow to the on toggle and what i really like about figma that it recognizes the the preview interaction that we've created and it saves it so you don't have to make changes unless you want to smart animate easy and back and let's select our frame and let's preview it by clicking on the play button and you see it works perfectly our button moves from on to off very very nicely and very very smoothly okay guys i hope you enjoyed this quick tutorial let me know in the comments what do you guys think follow me on instagram and check out my latest design using figma in the links down below and as always i'll see you in the next video bye [Music] [Music] you

Channel: Gal Barzilay

Views: 20,273

Keywords: Figma, UI, UX, Interactive Design

Id: EcP_eK58MEw

Length: 5min 29sec (329 seconds)

Published: Tue Jan 18 2022