Create a SINGLE CHOICE (RADIO) Interactive Component in Figma (Tutorial)

hi everyone and welcome to another figma tutorial in this video we're going to take a look at creating a radio button selector in figma radio buttons as opposed to check boxes are usually single Choice meaning when we create a component like this with a radio button there is usually only one option to select you can't check multiple options just you need to choose a single one as usual if you'd like to save time and support the channel make sure to check the link in the description that will take you to my store where you can download this component and use it in your own projects and now let's get started with this single Choice component now let me start with using the ellipse tool by pressing o on my keyboard and clicking once then over here under design I will change the size of this ellipse to be around 16. I'm going to zoom in that I can see this better and this ellipse is gonna have a stroke probably two pixels and it's gonna have no fail I will select this ellipse and rename that to radio buffer I will then wait this ellipse still selected go over here to create a component from this this component is now called radio button I will add a variant and then I will add another one so we have a radio button component with three variants with three states I'm gonna go over here to properties under design panel with this component selected and I will rename this property to state so we now have three states I will also make sure I'm naming these correctly so this state is going to be default this state is going to be hover and this state is going to be called selected now we actually need to differentiate these three so they all look identical for now but we're gonna change that under the the full state I'm going to select the radio button and make it slightly transparent so under stroke I will adjust the opacity of the stroke to be around 30 or something like that then under hover I will also change this to be let's say 60 70 something like that and then under select it I will have to again select the ellipse tool click here and this will create an ellipse within the selected state within the selected variant I will change the size I will change the color of this to Black and I think I'll probably just again match these two colors of the stroke to be also 70 percent Pig and yeah now we can clearly see how these are different so the idea here is when you hover over an unselected radio button you will go here right it will change will change its state to hover so to do that we're going to select the first default variant go to prototype and then connect this variant to the second one and we're going to say while hovering change to State hover smart animate is in and out and this is going to be very quick it's going to take like 70 milliseconds all right the rest of the interaction will be defined elsewhere in other components and we will just create this right away I'm going to use the text tool press t on my keyboard and then click once and I'm gonna type option radio button option right we're gonna go for this I will change the size of the text to 15. you just need to make sure that this radio button looks proportional to the text so I'm going to go to assets and use an instance of this radio button component and when we place these two next to each other yeah I think this I think this seems proportional right and maybe we want to go for 16 on the font size uh yeah I think this seems about right I will select these two press shift a to add Auto layout and I will rename this Frame to radio button option radio button option right I will then select the text that that to fill container under horizontal resizing right so container and this will make sure that when we do we resize this Frame this is going to happen also you can see the text is currently centered so I will select the text and make sure it's aligned to the left so now we get this and we are now ready to turn this into a component as well I think we should just change the spacing to 8 and then with this selected click here to create a component from this we have a radio button option and a radio button components I think I'll create another variant from this and this variant is going to be hover again I will go over here and rename this property to State both of these components will have hover States I will just select the radio button within the second variant of the radio button option component and change that state to hover so there will be essentially two ways to get to a hover state of this radio button either you will hover over this option or over the radio button directly hopefully there won't be any kind of conflict between these two but if there will just remove the interaction from here right and we actually need to Define this interaction so again prototype select this first option this first variant connect that to the second variant and this is going to be while hovering as well change to State hover smart animate easy and out 70 milliseconds good now we actually need to do one more thing and that will be adding the third state of this as well and again I will also name this state selected and radio button is going to reflect this let's go for selected over here as well and now we are ready to go to another step I will go to assets and use an instance of the radio button option component right here right so I have I have this over here and then I will duplicate this four times right so we have five options in total I will then select all these options press shift a to add an auto layout and then I will press enter and set the horizontal resizing to fill container that way we get this kind of behavior which is intentional right we want to text to adjust the width when we resize this whole thing I will also rename this Frame 1 to radio selection component or just single Choice component right single Choice components and now we are ready to turn this into a component as well so we have a third component now this will get a little bit complicated because we have to Define all the conditions and states of this so pay attention this is very important I will select these three variants right here under radio button option and then under content I will create a text property and this will be called option text I will create this property and then I will create another variant of the single Choice component I will also create all the layouts on the whole component and then stack that next each other this is easier to navigate then I will select the whole component and under properties I will edit this property to be called selected option right so this will Define which option we currently have selected then again I will go over here to properties with this whole component selected and I will click click this plus icon next to properties and all the way down here I'll click expose properties from nested instances and I'm going to check all of these and this will create nested instances properties for us to be able to edit that when we use an instance of this component I'm going to close this and then I will create four more variants one two three and four selected option with the first one will be none right then the first the second one will be selected option will be one then two then three and four and finally five now I'm gonna do something that might seem a bit logical I'm going to select all of these five up options press enter and then remove my current selection which will remove all the options from our variants and just an empty variant will stay in their place right you can see we just have empty variants with the correct numbering the reason we are doing this is because now when we go to prototype and actually start prototyping individual you know options I will connect the first option to change to property one right then I will do the same to the second one and then third one we have to pay attention so that we select the correct variant because they are invisible so it's a bit challenging and again the fourth the fourth is right here and then fifth will be right here so we have connected these to their respective variants and now when we select the first variant press enter Then copy and then select all of these five remaining variants and we paste those you can see that these interactions will be pasted across all of these variants and we will save a ton of time setting this up because otherwise we would have to go through each individual variant and for each individual radio button option we would have to connect those to their respective dates right so this now means that we will have to go through only have to go through each of those and go to state selected on their respective variants so I'm going to go just all the way from first to the fifth until we get something like this right and now I'm gonna go over to assets and then search for single Choice component which is right here I'm going to click and drag that and drop it somewhere around here so we have an instance of our new component you can see that it's a bit responsive I don't think that's going to be necessary but here you can see that when I select this instance we get all these options right so I'm just going to use the component properties here and type in option one for the first option option two for the second and so on so you can see how easy it is to change these so option three option four and option five ocean okay right so we get we get this now let me actually create a frame so F on my keyboard and create a frame that's one thousand one thousand by 600 and this is going to be our test frame test frame I will then move this component instance over here I'm going to center it and let's launch the Prototype and see what we've created the one we launched the Prototype you get a bunch of options you can hover over these you can see that it changes States you can see how it kind of lights up or the circle becomes more prominent when I hover over these options then when I click for example option three I'm able to select this one or change that to option one option four two and so on I can just click through each individual option you can see that we can now for example easily change the text so let's say I made up my mind and under option four I want to say fourth option right and it's gonna be updated here and across all the state's fault hover as well as selected so it's very easy to change and since we chose this component based approach when I go over here to the radio button component can change the selected state for example from black to Blue let's do that right it's going to be blue like this you can see that this will be updated everywhere everywhere across all of our instances components and so on and when I now click the selection becomes blue right for example something similar can be done about this it will option let's say that under the default State we would like to make this copy gray so let's go for like gray like this you can now see let me make this more prominent you can see that again it's going to update everywhere and then in our prototype as well when I hover over these options they're gonna light up the circle as well as the text and this is it this is how we create a single Choice radio button selector component type of thing in figma if this video helped you I would appreciate you leaving a like and if you'd like to download the source file for this maybe use it in your own project and want to support the channel make sure to check the link in the description that will take you to my store thank you for tuning in and watching all the way to the very end and I will see you in the next one

Channel: Mavi Design

Views: 18,621

Keywords:

Id: 2zmIco5Lm0g

Length: 13min 50sec (830 seconds)

Published: Wed Nov 23 2022