Figma Tutorial: Create an interactive toggle switch

Key Takeaways

right so the first thing we need to do is create a rectangle so i've selected r on my keyboard you can also select the rectangle tool from up here in the top left i'm going to create a rectangle that is 380 by 200 and we're going to set a corner radius on that of a hundred if you want to set a specific radius in figma you need to select the independent corners you need to tap this icon over here and that's going to let you set the different corner radius itself we're going to set the background color of this state to a dark red because this is going to be our off state something like that is looking great now i'm going to select oh my keyboard which gives me the ellipse tool you can select it up here as well if you wish and i'm going to set this ellipse to 180 by y80 and i'm going to position that 10 pixels from the edge there we go all the way around and then giving this a fill of f f f f f white perfect now selecting the text tool by pressing t on my keyboard i am going to type the word off caps lock on i've got this set to bottom bold 72 and i'm going to give the fill a i'm going to give it a color of white and i'm gonna position that in the center of this void that's here you can use the ellipse as a guide you could duplicate that ellipse you can move it over here and then you could select the off text and the ellipse and make sure it's perfectly centered and then delete that loops and you know that is in the middle now we are going to use a plugin called stark to check the contrast of this it's very important to be checking accessibility contrast when you're designing for web because you want as m you want the components to be that you are designing to be accessible to everyone you can see here that this dark red is passing all of the it's getting full marks across the board so that's excellent stark is a great accessibility plug-in the next thing we're going to do is we are going to create the on version so i'm just going to duplicate all of this and move it over here to the right i'm going to change the background color to a very dark green something like that i'm now going to move this ellipse over to the other side check that it's 10 away from everything and i'm actually going to duplicate the off text and budget over here to the left and change it to on surprise surprise again i'm going to duplicate this ellipse and just use it as a guide for that on text so i've got the ellipse i just duplicated there it's not quite there we go center line there and i select in the on text and i'm just making sure that that is centered and now i can delete that guide okay so now i now know that this on text is center aligned to this void that sits here what i want to do now is actually duplicate that and move it over here to the first version that i created and i want to make sure that it's centered within the actual whole lozenge shape now i know this might look a bit odd now but you'll understand why in a moment so i'm setting that on layer that i've just duplicated to zero percent opacity and i'm going to grab this off layer that is over here you can't see at the moment because there's an ellipse behind if i delete that so you can see it there and i'm going to center align this off within the space here i'm going to set that to zero percent now with this uh using my cursor to select just the layers that's it over here i'm going to right click this and i'm going to create component i'm now going to do the same thing again for the s on state this over here and create component now what we can do with figma is we can select both of these components and we can use this variant option combine as variance over here and these are now figma is now recognizing that these are variants of the same components this is great really so what we'll do is we'll just open this up we'll call this component one i'm double clicking it to rename it i'm going to call it off and then pressing tab which is taking me to rename the component underneath the variant underneath i'm going to change this to on and i'm just going to change the component name to toggle now what we'll do is we will head over to the prototyping tool up here in the top right and we'll hook these up so i will drag this little cursor here when i select the the point there over to the on state and i want it to set to change to on i want the animation to be smart on the main i want it to be ease in and out and i'm going to leave the timing as is now if you don't see this change to that's because you don't have figma you aren't enrolled on the beta interactive the interactive beta for figma so what you might need to do is go to show prototype settings and you'll see there interactive components beta if you don't have this enabled if you can't enable this just hit the learn more and you can go and sign up and they over over a few days they'll basically um register you and allow you to do what i'm doing here only takes a few days i did mine at the end of last week and i've got it now so with that connected to that and i'm going to do the same thing again i'm going to drag this back over here and figma has remembered all the settings that i have done for the first link so that is superb thank you figma now we've got this component here and they're all linked up we've got the two different states i want to see what this looks like so if i head up here and press the preview button it's not going to work because figma needs a frame so i'm going over here to this frame tool here and i'm just going to draw a small little frame that's perfect and now i'll do is i'll go over to assets where my component is and i'll drag this component to the center perfect and now what i'll do is i can head back up here and i can preview just let it load up this is something that's a bit different between xd and um and sketch and figma it has this sort of like uh loading state you know if i hit this now we're gonna see some interesting stuff happening there so that doesn't look quite right so we've got the text moving but the circle itself isn't moving so let's close that down let's troubleshoot what's going on there so if we head over here head back to design so what we've got going on here is we've got an on and off state and i think i know what the problem is so this i imagine is similar to if you've ever used principle and actually i think it's similar in xd you need to make sure that they're called the same if you want things to smart animate between them you need to make sure that the layers are called the same and i don't know if you could just see that then but the word appears to be going on top of the toggle which is not what i really want so let's just test that again now and hopefully that's gonna work okay perfect feels a little slow actually doesn't it and you can see that you can just see that the word is appearing on top so what we want is we want the actual toggle to move over the top of the word so i'm going to head back over here i'm going to select the ellipse and i'm going to move it on top of the words in the layers over here and now i'm just going to head back over to prototype i'm just going to make that feel a little more snappy so selecting this behavior here and you can see the interaction is already listed there click on and now i want to do is i'm going to change this to 150 so it's going to be double time 150 and i'm going to do the same back the other way so it's still 300 150 and now if we head back here and we you can see okay so now the words are disappearing behind and it's feeling a lot more snappy and that is how you can create a toggle interactive toggle component in figma you may be a complete figure expert and if you are you probably haven't got to this point uh but if you aren't i hope this has been a useful interaction uh a useful interaction sorry that's my phone or something going off i hope this has been a useful tutorial to kind of get you to grips with some of the basics of figma if you've enjoyed this video you found it useful hit the like button hit subscribe if you are or not already subscribed for more ui design tutorials if you didn't find this useful please hit dislike that is very useful for me too and i'll see you in the next video see ya bye