Create a TOGGLE BUTTON (Option Switcher) With a HOVER Functionality (Figma Tutorial)

hello thanks for joining me and today i'm going to show you how to create an option selector component like this in figma from from scratch so uh let's get into it so this process is going to have two stages so if i were to illustrate these stages we will be creating an option component and then we will take this option that we created and stack it next to each other and wrap it inside an auto layout so we will have two components one is going to be a singular option and the other one is going to be the full functional component right so let's get to the first part i'm going to go to over to the text tool and type an option and then wrap this inside an auto layout increase the margins on the sides so the reason why i'm often using auto layout is when you actually change the contents of auto layout it you see what's happening it updates the dimensions of of the group that it's inside in of the auto layout itself and that's very practical because you then don't have to you know adjust the size each time you make a change especially with buttons and other ui elements this is very useful that's why you see in a lot of these uh even other youtube tutorials a lot of work done through auto layout so this this is going to be an option i'm going to you know set this over to 16 maybe eight on the on the vertical ones and i'm going to call this option we will set a corner and a color that's going to be transparent white right so we want to define three states for this component we want to define a state where the option is not selected define the option where the state when the option is being hovered over and then we want to define the third state which is when it's actually selected i'm going to go over to here and create a component and add a property the property is going to be called state and this one is default as default that works we also want the second one that's um hover so that this is actually the state of the the option component when it's being hovered over and then third option that's going to be when it's actually active we will define most of the interactions when we will do the second part of this which is actually wrapping it inside the node layout but what's going to be useful for us is defining when it's being hovered over and we can do that right here so i'm going to go over to prototype and select this little circle and then connect that to this one it's not going to be on click it's going to be while hovering right so what happens now if we use this component and we actually if we actually went to you know the preview if we hover it over this component on our canvas on our frame it will change to this one so nothing would happen for now because it's completely identical well first of all i'm going to define the final the actual active state let's say the button is going to be green um maybe a softer type of green and so this option is going to you know this hover state is going to have this color but in partial transparency or in slightly you know lighter colors um so i'm going to copy and paste it here and maybe set this over to [Music] 100 and make it lighter so you know it's kind of similar it's not the same and we'll also change the font color on all of these so it's going to be very dark green like so so we do have um the option component now we are actually going to stack them inside and out layout i'm going to copy this alt and drag option and drag this is enough for now i'm going to select all of them and press shift a which is going to create a new frame a new auto layout i'm going to rename this one option switcher we do have the option and then we have the option switcher and inside the option switcher there are options right so that's the structure of this component we will add a fill add rounded corners and add some margins we will test this first actually turn this into a component and if we paste this component onto a blank frame and then preview this nice so you can see that something's happening if we hover over these options um it reacts because inside this component there are actually three of those instances of the second component that is reacting to the hover action of our mouse but nothing happens when we click click those right so it only reacts to hover and the reason is we didn't define anything um you know any click interactions so far we just have to hover ones that are nested inside this one this kind of of option switcher is going to have three states a four sorry four states the fir the first state is going to be with nothing selected second state is going to have the first option highlighted or selected the third one is going to have the second one highlighted and so on so we need to create a first property called selection and so that's the second one third one and fourth one this selection is going to be zero this one is going to be one two and three yeah so here it's going to be active here it's going to be active and here it's going to be active and we can also change the name so one so there's still no behavior defined yet but i would just like to take a moment to appreciate how nice it is when you actually build stuff this way so let's say that we don't like how the active state of this button looks so um we can just go over here and then inside this option component we can you know select this one and then change the color here which is going to update all of these and the reason it's updating all of these is um this component contains this component right so that's i think that's very smart i think that's really makes it really easy to design stuff like this so let's say that we don't like you know the white the dark green font on the active state and we're going to change that to white um maybe we also want to update this color maybe we want to add a shadow that will you know make the active state of this component shine a little bit i think this looks good and now we will actually define the behavior of this component so we will go switch over to the prototype section and now we need to think about um what's the behavior of such component right so if there's nothing selected and we click the first one we actually want to go over to this state right makes sense because when we click the first one we want the first one to be selected same with the second one and the third one right and we also need to define in each of these instances sorry any each of these variants we also need to define what happens when you click an option that's not currently active because when you are in this you know this uh state of the component and you click option one so when option one is already selected and you want to select option one nothing should happen right that makes sense because there is no need to um what you want to do is already you know has already happened so there's not going to be any change that's why we focus only on these remaining two again option two over here option three over here option one goes back option three goes here option one goes here and then option two goes here i hope i got everything correct um you maybe even want to you know define that when you actually click an option that is selected i've seen that a couple of times it reverts back to the version where nothing is selected but uh that's nothing that i want to do in this case so let's go with this so let's test this out alright so that's it thank you for watching i hope you learned something new if you did please leave a like and subscribe for more content like this and i will see in the next one

Channel: Mavi Design

Views: 9,647

Keywords: figma, tutorial, figma tutorial, figma product design, ux ui, ux, ui, figma ux, figma ux ui, product design, user interface design, figma button, option switcher, toggle switch, switch button figma, figma switcher, figma option switcher, option selector UI design, how to design option selector, figma toggle switch, figma button switch with options, button switch ui design, button switch, figma design, figma tutorial for beginners

Id: q0zx_wcgOdk

Length: 10min 1sec (601 seconds)

Published: Mon May 16 2022