Creating a Design System - Checkboxes and Radio Buttons

hey guys in this video i'm going to show you how to go ahead and create a checkbox radio buttons component and we're going to include labels in there as well so the first thing that you need to do anytime you're basically getting started with this is you need to create is you need to figure out if you need to create a base component right so for the base component i'm just going to go ahead and create our checkbox so i'm going to say that we're going to have a checkbox by default that is going to be 20 pixels in size the stroke can be neutral uh 5 neutral 50 maybe and the border radius is gonna be four we're going to have a check box inside of it or a check icon that i that already exists in the library so i'm just going to reduce it in size one thing that i want to do is i want to actually scale it properly so the border radius so the border or for the i can also scales properly so now we have our icon here i'm going to say this is going to be white by default and in this case we're just going to have i'm just going to go ahead and say this is going to be our checkbox off and this one is going to be checkbox on and let's just go ahead and create these components the fill on this obviously is going to be our primary color which is going to be primary 300 i'm going to remove the border and here we have our checkbox component created we obviously want to do the same thing for the radio so i'm just going to say that i'm going to duplicate it i'm going to say everything is going to well first of all i actually need to create a new property i'm going to say this is going to be our type and the type by default is going to be check box let's just go ahead and include it above and the property here is going to be active so whether it's active or not in this case it's off in this case it's on let's just go ahead and duplicate this i'm going to say this is going to be a radio button or maybe just radio yeah maybe radio button or radio button like this and instead of obviously this check we i'm going to remove the check and i just want to include let's say an item like this i obviously want to increase the border radius here and probably reduce this to 8 pixels similarly i'm going to go here i'm going to say paste and replace so here we have the item and i basically want to say that these are going to be white so now we have our check box and radio button base component created i'm basically just going to press underscore here and i'm going to say check box underscore radio because we don't want this exported we're actually going to create a larger component that's going to include a lot of things here so let's just go ahead and do that now i'm basically going to go ahead and drag this checkbox and i'm going to say this is going to be our checkbox label i'm going to rename this uh item here on the left to say check box label i'm going to create an auto layout here the spacing in between these can be eight the font size for this is fine small and since we're using the small font size let's just go ahead and say this is also going to be small so this is going to be our check box slash checkbox slash small variation and in this small variation we also want to go ahead first of all obviously click the plus icon to create a variant and in this variant we want to say that this is going to be let's say this is small this is also small and now we want to go ahead and add multiple properties to it so the first property is going to be well actually the first property is going to be type which is going to be check box by default i'm going to move it above then i'm going to create another property that's going to say whether the checkbox is active obviously so it's going to be off by default or the radio button is off by default and then i'm going to add another property which is going to say label and i'm going to keep the label on by default okay so those are the things that i want to do and in this particular case i'm going to say the checkbox is going to be on so i'm going to go here and i'm going to say the active state is also going to be on as well so here we have our first instance our first size of checkbox created i also want to go ahead and basically duplicate this and say that in these in this both cases the label is going to be off and everything is just going to be the same so i'm going to go ahead and i'm going to say hide these so here we basically have our component created for the small variation for the checkbox now we want to basically duplicate this for the medium variation and the large variation right so i'm basically just going to select all of them i'm going to duplicate them maybe with a spacing of 32 and i'm going to say this is going to be the medium size for the check box and i'm just going to go ahead i'm going to say all of these check boxes inside will actually be scaled to 24 pixel and the label is actually going to be reduced or increased to the base phone size because it's medium and it's going to look like this and the spacing in between all of these is actually going to be 10 so i didn't need to give the spacing or change the spacing here since the checkbox isn't really visible but still i just went ahead and did that now i'm just going to select all of these just maybe i think the spacing can actually be increased so maybe this the spacing in between these elements is going to be 64. and this is just for visual purposes so i can differentiate these components and i'm now i'm now going to go ahead and i'm going to say that all of these items need to be at the bottom so the small variation is that the top the medium on the left is uh at the bottom and then i'm going to go ahead and i'm going to say that all of these now are going to be large and in this large case or in this large size i want to say all of these check boxes need to be scaled to maybe 32 pixels right since we're following the 8 pixel grid after the 24 pixel mark so i'm just going to give some spacing in between these i'm going to say align to the bottom or maybe yeah to the bottom is fine just going to give the spacing well actually i don't need to give it like that i can give it another way as well so now i'm going to say that the font size here is actually going to be increased to the large variations since this is the large variation and the spacing in between these elements is going to be 12. so now that that's done we have our checkbox component created now i'm going to go to the quantizer plug-in and i'm going to say that maybe i can say this that we're going to have three columns and the column gap here here is going to be 800 and the row gap sorry not 880 and the row gap can be maybe 24. now as you can see we have that done it doesn't look completely ideal but we can work with this so now that the checkboxes component is done you basically just want to press enter select all of these and duplicate them so now that i've duplicated them i just want to go ahead and move everything all of my selections at the bottom and i want to say these are going to be radios so now that we have the radios the only thing that we need to do is we need to replace all of these check boxes that are living inside two radio buttons now i can individually go and select all of these and say these these are going to be radio buttons i can do that but one other way of doing the same thing is using the plug-in find and focus and i'm going to say i'm going to limit it to the selection that i have and i'm going to say i'm going to find the check box underscore radio because that's the component or larger component that we're using inside of it so once i find that as you can see by default all of these are automatically selected inside of them and i just want to say all of these are just going to be radio buttons and here we have all of our uh the larger component created i can just go ahead and show it to you so i'm just going to include it here as you can see we have the radio we have the checkbox we have the different sizes i can go ahead and activate it i can remove the label i can again say this is going to be a radio and we basically have all of these controls present within this component where once we actually export this library we would not be exporting this one because we have an underscore behind it or appended or prepended to it only this component will be exported and we don't even need this one right this one is just in case imagine imagine you wanted to have this circle that's living inside all of the radio buttons to be slightly larger maybe something like this right now everything is going to be updated immediately or maybe you wanted it smaller that can also be done from a single location if you did not include the single component as an instance in this larger component you would have to do it manually right go here go here go here and change the border radius stuff along those lines and that's just going to be a lot of time wasted in the future for any changes that you want to make so that's going to be pretty much it for this video do subscribe to hit the bell icon and i'll see you in the next one take care bye

Channel: AM Design

Views: 17,278

Keywords: asaad mahmood, asaadmahmood, checkbox, checkboxes, design system, figma, figma basics, figma design, figma design system, figma tutorial, figma tutorial for beginners, figma ui design, figma web design, radio button, radio buttons, radiobutton, ui design, ui design system, ui design tutorial, ui design tutorial for beginners, user interface design, ux design, ux design tutorial for beginners, web design, yt:cc=on

Id: o0vVdeJ3UF0

Length: 8min 49sec (529 seconds)

Published: Thu Dec 09 2021