Master Figma Variants | The Complete Guide (2023)

in today's episode i'm gonna talk about an amazing feature of figma called variant and i'm gonna show you how you can create different versions of your ui elements in a smart way and if you watch this video all the way through you're also gonna learn how to make your components interactive so if you're ready let's get into it all right here we are i created a new design file and i'm gonna go ahead and create a button but before we create our button i'm going to mention that we have actually two different types of variants we have one dimensional variance and two dimensional variants we are going to start with one dimensional variance examples and then as you get used to variants we will talk about the more advanced and two-dimensional variants as well okay so in order to create a button you may tend to create a rectangle then add a label to it and style it that's fine however there is a better way to do that and that's by creating a frame so first i'm gonna go ahead and hit t on my keyboard to select the text tool and i'm gonna create a text layer right here let me zoom in and i'm gonna write button okay let me go to the text section on the right side and here i'm gonna adjust the weight to probably medium and the size to 17 points and here i can set the height to 100 percent for now and i'm going to change the airline to align middle all right great now that our label is ready i'm gonna add auto layout to it to make it responsive to do that i'm gonna hit shift and a on my keyboard and as soon as i do that it will put this label into a frame as you can see here it says frame one and here we have this frame one in the layers list as well well in the auto layout section on the right side i'm gonna change the alignment to middle left and also here we can adjust the horizontal padding vertical padding and also spacing between items well first let me go ahead and add a feel to this frame i'm gonna add a feel here and let me adjust the color to something like purple maybe something like this should work nice and then i'm gonna change the text layers color here i'm gonna set it to white to have a better contrast and finally i'm gonna select my frame and i'm gonna increase the corner radius amount here to make it a little bit rounded probably something like four pixels let me rename this frame to button perfect now let's go ahead and adjust the padding here i'm going to set the vertical padding to 16 pixels and the horizontal padding to 32 pixels all right great our button is ready and it's completely responsive i can go ahead and adjust the label however i'm going to keep it as is for now now imagine you want to create different states of this button and you want to keep everything organized to do that in order to be able to reuse this button first we need to convert it to a component to do so we need to select it and we can click on this component icon here just like that and now as you can see the frame this boundary turned purple here you can see in the layers list we have this four diamond icon as well indicating that this is a component now and you can easily go to assets and find your local components and we can reuse instances of this component but how can we create variants well there are many ways to create variants first you can create different components name them and then turn them all into a component set or you can just select your first component here and just click on this button add variant right in the toolbar let me go ahead and do that as soon as i clicked on that button you can see that this component set has been created here we have this dashed boundary indicating that this is a component set here in the layers list you can see that the name of our component set is button all right and inside we have two variants we have default this is our base variant and also we have variant two it has been duplicated for us because we clicked on that button here variant now we can go ahead and adjust the styling of this second variant but before we do that i'm going to explain to you how variants work well a component set if you just select it has different properties and if you just take a look at the right inspector right here you can see this properties section and here we have property one okay if you want you can go ahead and rename it and we are going to do that to keep everything organized but the way variants work is that you create different properties and then you set different values for those properties so let's suppose you want to create different states of this button right default hover pressed disabled etc so the name of our property is going to be state right so now that my component set is selected i'm going to head over to these properties here and we already have this property one figma already created it for us i'm going to double click on it and i'm going to rename it to state so the name of property is state and if i just click on this icon here edit property you can see that the name of this property is state and we have two values inside default here the first one and variant two so a property can have multiple values for example default hover pressed disabled etc so now as you may guess we need to go ahead and select our second variant and here instead of variant two i'm gonna rename it to pressed just like that and i'm gonna go ahead and adjust its color i'm gonna add an overlay layer to it the opacity is set to 20 that's fine and now we have two different variants but what if you want to add more well you can just select this component set and click on this plus button here or you can select one of these variants and hit command d or control d on your keyboard to duplicate it that's up to you now we have state three you see i'm gonna select it and i'm gonna adjust its value to hover and then let me go ahead and change the feel here i'm going to change the color of this overlay layer to white and this is going to be our hover state i'm going to create one more i'm going gonna hit ctrl d to duplicate and here this time i'm gonna create a disabled variant i'm gonna select it let me go ahead and change its value to disabled and then i'm gonna go ahead and change its color to probably light gray something like this should work now if i select this component set and if i click on this icon you can see that this property state has four different values default pressed hover and disabled but how can you utilize these variants that's so simple just like using a component you can simply go to assets from here you are gonna create an instance of your component just like that here we have our button and on the right side you can see that we have this state property and here we have this drop menu we can change it to pressed we can change it to hover or disabled can you see how easy it is to create variance in figma that's awesome all right that was an example of one-dimensional variance but how can you create multi-dimensional variants or two dimensional variants i'm going to go ahead and move this component set to the left side and i'm gonna make it a little bit larger now let's imagine you want to create a new version of these buttons however this time you might need to add an icon to it so what i'm gonna do is this i'm gonna select them all okay of course you can do it one by one but i prefer to select them all and then i'm gonna duplicate them hit ctrl d or command d and just move them right here okay now we need an icon you can use whatever icon you want i'm gonna go ahead and run the content real plugin here let me do it quickly and using this plugin i'm gonna add a few icons here to my project let me go to icon field all right i think this icon looks good i'm gonna drag and drop it right here i'm gonna drag and drop another icon for our next example let me just look for a good icon let's look for the home icon this one it looks very good alright great now let's imagine you want to add an icon to this button since we made this button using auto layout we can easily select this frame and we can just drag it and drop it into our button right but i'm gonna go ahead and duplicate it first because i'm gonna need these icons for our next example and then i'm gonna drag it and drop it here and as soon as i do that you can see that my button's height has been adjusted as well that's not what i want i just want this button to grow horizontally to fix this issue we need to select this button and from here i'm going to change the vertical resizing option to fixed height this way when i add more components or more elements to this button it only grows horizontally not vertically and that's exactly what i need now if i just drag and drop it into this button as you can see the height stays the same and let's do the same thing for these buttons i'm going to select them all change this option to fixed height now let's select this icon change its color to white and also i'm going to select this button and set this spacing between items to eight pixels okay i can select all these buttons and set this value to eight now i'm gonna select this icon copy it hit ctrl c or command c select this button hold down the shift key and select these two then hit ctrl v or command v however we need to adjust their position while they are selected i'm gonna hit the left arrow key on my keyboard to put them on the other side of my label and as you can see my buttons are ready however we are not done we need to create another property for this component set because we created the state property now we need to create another property for icons how can we do that as i mentioned before in order to create a property you need to first select your component set and then here i'm gonna click on this plus button and here it says create new property variant i'm gonna click on this variant option and this window pops up i'm going to name it with icon and then for the value instead of naming it default or whatever else i'm going to name it true and then create this property okay i'm going to explain to you in a second what it means now that we created this property this new property we need to go ahead and select our variance these buttons and we need to set the correct value for this new property so these four buttons don't have any icon so i'm gonna hold down the shift key and select them all and set this vid icon value to false for these buttons they are already set to true but here we have another issue as you can see as soon as i select this button for the state property the value is set to state 8. we need to set it to default this one we need to set it to pressed this one we need to set it to hover and finally this one to disabled now let me show you how those true false values work those are called boolean values and the way they work is like this if i select this instance of this button now you can see that i have two properties i have the state i can set it to default now i have this with icon property and here instead of a drop menu i have this toggle button the reason i've got this toggle button is because i named the value true and false okay so figma automatically understands that you might need a toggle for these true and false values those boolean values and that's so helpful because here i can simply toggle it on and off just like that and it works for all these states you see so that's how you can create multi-dimensional variants in figma now let me show you another example let's suppose you want to create a radio button okay in fact let's do it together i'm gonna go ahead and create a frame if i hit a on my keyboard i can select the frame tool and i'm gonna hold down the shift key left click and drag to create a frame i'm gonna set the frame size to 16 by 16 pixels just like that let me zoom in and then i'm going to make it completely rounded so i'm going to increase the corner radius value and let me rename it to radio button all right now i'm going to add a stroke to it and let me change its color to our purple so this is going to be the unchecked variant all right i'm going to duplicate it select it hit ctrl d or command d to duplicate and now i need to create the checked version so i might need an ellipse i'm going to hold alt and shift to create an ellipse proportionately and let me just align it right in the center just like that i'm gonna make it a little bit larger and then i'm gonna change its color to our purple as well so i'm gonna show you the other way of creating a component set now let me go ahead and select this radio button and i'm gonna rename it here so here we have radio button then slash a forward slash unchecked for the other one i'm gonna write radio button forward slash checked using this naming convention you can easily create different components and then turn them into a component set and figma will automatically create properties for you let me show you how it works i'm going to select this one turn it into a component this one as well turn it into a component so now we have two different components here now if i select them both here you will see this option it says combine as variance if i click on it look what happens there it is now we have a component set with two variants inside the name of our component set would be whatever we wrote before the slash as you remember we wrote radio button forward slash checked and then radio button forward slash unchecked so radio button is going to be the name of our component set and whatever we wrote after the forward slash is gonna be the value of our property we didn't create any property but figma did automatically if i select this component set you can see we have property one and we have two values checked and unchecked so here i can simply rename it to state and now i can simply create an instance of this radio button and here we have two different states checked and unchecked that's amazing isn't it but you may ask can we use that toggle button here as well yes if we change the values of our property to true and false you can get the exact same toggle button here as well let me prove that to you if i select this one and i set the state value to false and then i select this one and set the state value to true now i can select this instance and there it is we get this toggle button all right now that you understand how variants work i'm going to talk about when you should not use variants well i can see that many designers make this mistake of creating hundreds of variants with different icons well let's suppose you create this button with this icon okay and then you decide to have different variants of this button with 5 10 20 different icons in that case it's not a good idea to use variance because instead of solving a problem you are creating a new problem this way it's going to be so so hard to organize everything instead what you can do is utilizing a component property because we have variant properties and also we have component properties we talked about variant properties we created a few here as you remember now let's talk about component properties well let's suppose you want to use these two icons okay it could be as many icons as you want but in this example two is sufficient i'm gonna select this one let me go ahead and rename it to icon forward slash check mark and this one i'm gonna rename it to icon forward slash home now i'm gonna select them both and i'm gonna change their color to white as well and then i'm gonna turn them into a component so i'm gonna select this one turn it into a component this one as well so if i go to assets now i have this icon as well this icon category so now i'm gonna use these components inside my button i'm going to go ahead and remove these check marks here from my buttons just like that let me select one of them probably this one duplicate it to create an instance and just drag it and drop it inside our button now i'm going to double click on this icon and i'm going to head over to this section if i just click on this button here this window pops up and it says create component property i'm going to name it icon and here for the value you can see we already have this drop menu okay it has check mark and home if i click this create property button then here you will see this purple tag it says icon now while this icon is selected i'm gonna hit ctrl c or command c then i'm gonna select all these buttons hold down the shift key to select them simultaneously hit ctrl v or command v and then hit the left arrow key on your keyboard to change the position of these check marks let me show you what's the difference now if i select this instance of our button that we already created here on the right side we have another property this one is a component property and if i want to change the icon of this button i can simply adjust it here to home you see i didn't create four other variants inside my component set with this new icon that doesn't make any sense so keep this example in mind whenever you want to create a huge design system that's going to be so helpful so you created these different states of this button and now you want to animate them so the way we usually do that is by duplicating our screen and adjusting our button and connect those screens together but that's not the case anymore because we have this awesome feature of figma called interactive components let me show you how it works here inside our component set i'm gonna select my base button okay this one and then i'm gonna go to the prototype tab and from here i'm gonna create a connection between these two buttons just like that and here inside this interaction details page i'm gonna set the trigger to unclick because this is our pressed variant and as you can see you have access to the properties you just created here as well that's awesome isn't it then let's go to animate and i'm gonna set it to smart animate and here i'm gonna set it to easing and out back 300 milliseconds is fine now i'm going to create another interaction i'm going to connect this bass button to our hover button and this time i'm gonna set the trigger to while hovering because this is our hover state and the animation is gonna be smart animate and we are good to go now let me select this button here and i'm going to change its state to default the icon is going to be check mark and now let's go ahead and see how it works but before we do that in order to be able to preview this component first we need to put it inside another frame i'm gonna hit a on my keyboard create a frame and just put it inside just like this all right now i'm gonna select this button and i'm gonna remove its icon because we didn't prototype these variants yet so i'm gonna test this button let's select this frame now and hit the play button right here and now let's see what happens if i hover over this button you see we have this interactive button now alright guys i hope you enjoyed this video if you found it useful please consider subscribing and give it a thumbs up if you want to learn more about figma make sure to check out this video on the screen have a wonderful day and see you next time

Channel: DesignWithArash

Views: 36,220

Keywords: ui/ux design, ux design, user experience design, ui/ux design india, how to become a ui/ux designer, become a ui/ux designer, web design, figma, figma tutorial, figma design, figma tutorial for beginners, ux, ui, design, ui design, uxui design, uxui, learn ux, ux course, design course, designcourse, beginner ux, junior ux, junior designer, junior ux designer, entry level ux, how to learn ux, learning ux, user experience, user interface, figma variants, figma components

Id: sU-xp2V7-_A

Length: 22min 0sec (1320 seconds)

Published: Mon Sep 12 2022