hey everyone welcome back in this module we're going to focus on a feature called variance within figma and as they relate to components variance allow us to store similar types or states of components into one single component within this module I'll show you how to create them as well as some tips for keeping them a little bit more organized in figma so with that let's jump into a file we're here in a file and I have a few different buttons on the canvas at the top there's a default button or a button that's in a default State down below I have a button that I'm thinking this one could be a hover State and then below that I have a third button option which this one should represent the Press State it's a little darker than the one at the top now what I would love to do is to essentially combine each of these here as a single component with different states for either myself or the designer to choose from but how would I do this we'll use a feature called variants to achieve this but I'd like to show you how we used to do it before variants to give you an idea of why this feature is so honestly awesome and important what we used to have to do was well if I knew I wanted this top one to be the default button I would double click its name and type in button SL default and you may remember that slaming convention being so important in tools like figma below that I would simply turn this component here into another component just by right clicking and choosing create component and tapping command R and then we can rename this one to button Slover and then we'll do the same thing down below I'll select this one we'll choose create component command R to rename and for this one I'll type in pressed and so as we look at this I have three different swell States but also three different components which might not be what I want this is the only way that we were able to achieve this in figma and what it resulted in was kind of a messy assets panel which I'll show you in a moment and also just a messy experience for designers who are using these components we can access all of the components that we create or the libraries that we enable by clicking on the assets panel over here on the left hand side and when you tap this you'll see all of the files or all of the libraries that you have enabled or again have access to now when I click in here I see something kind of interesting which is I see essentially three different components but they're meant to be the same component just representing different states and what can be tough about this view inigma is if you ever have components that are differing in both their state and their size well unless you have a really good naming convention it can be really hard to tell in the assets panel which one presents which in this case now on the canvas I have a kind of a large button and also a smaller button but in the asset panel they look identical which can be really hard for designers to find so a little while ago figma created a feature to help us with this and of course that feature is called variance and how it works is I will select each of these three main components on the canvas now this is important they have to be main or original components we're unable to select a main component in an instance as this feature won't work they have to be either main components or frames that are meant to be turned into a variant set so I have three main components selected here and to double check or how we know this is each of these main components has that four Diamond icon next to it and so that tells us yeah this is a new main component now with those selected I can go to the right hand side and we'll see an option or a button that says combine as variance now when I click this something interesting happens which is we have what's now called a component set in Sigma this component set is represented by a dotted purple line around all of the variants that we had previously selected now I'm going to delete these smaller buttons we'll come back to those here in a moment with this button though you'll see we have one single component set as I mentioned a moment ago and the interesting thing is now if I tap into the asset panel and click into this local library here I only see one button which is exactly what we want we want one single component that has different states within it and figma even provides us with this little three up here at the top that shows us that we have three variants to choose from now if I click on this at the moment it gives us a nice preview but there's a problem with this which is at the bottom here figma shows us this property section and on the left we have a property called property 1 which is not that descriptive on the right though we do have a few different states you might recall these states are actually created from that previous slaming convention where we set button SL default or button SL hover for example what figma did was automatically turn that slash naming convention into well the component name and the different states or different variants that were included for now though I'll close out of this and let's focus on what this means within the figma interface whenever I'm working on building a component set one thing I love to do is to grab an instance of any of the components inside just to get a better idea of how this feels to use if you'd ever like to do the same you can select one and if you hold the option key you can drag an instance out just next to the component set we have a new menu to choose from or a way to interact with our component up here at the top we have our instance or our component name in this case button down below we have a property and to the right of that we have an options menu here I could switch this button to be either the default button the hover or the Pressed button for this example I'll just change it to the hover button for now and we can see how that adjusts to match what was in the component set now one thing I'm seeing here is property one as we saw is not that descriptive unless I really understand these different states inside I don't necessarily know what property one does or what that actually is referring to and so we can of course adjust this and the way to do so is if we go back and click on our component set here on the right we'll have all of our edit options now it may not be obvious at first but there's two ways in which we can edit a component variant or the properties associated with them the first is that we can click on this configure icon here and it's shown when you hover over the property row if we select this inside we see our name as well as all of the property values now the name is what we want to change here and because all of our values represent different states I think I'll change property one for the name to say State instead now if I close out of this and I click back on my instance I now see a property value of state with the options set to be hover also there's one thing to note which is you can always reorder these values let's say for example you want and press to appear before hover well just by grabbing the handle on the left hand side and moving it up a row we can now change the order in which all of these values appear so if I close out of this and go back to my instance I should see that reflected here and I do component variance can get so complex and as you can imagine you could have a bunch of different variants per component and so again I always like just selecting the instance seeing how my decisions play out in real time and going back to the set and adjusting as I need now if you remember earlier we had that smaller set of buttons looked the same but were just a little bit smaller in size and I think it'd be great to recreate that here so that the end user of this component could choose between a larger button or a smaller button and then all of the different states inside and this is actually pretty easy to create so what I'll do is I'll shift click on the first one the second one and the third one so I can select each of the current variants then I'll tap command D or to just duplicate them Sigma will put those new copies down below and now we can begin to edit them now in this case I know that I want those three to be a little bit smaller maybe half the size and so for this example I'll go back into the scale tool that we saw earlier and we'll choose to scale these here by 50% on the right hand side I'll type in 05 and tap return and now we see these smaller buttons down below now here's a tip this is probably the best way I think to organize or to help you organize these component sets and that's you'll notice the spacing here is pretty large and it'd be great to just clean these up a little bit but it doesn't take long for you to notice that as you move these around well the component set itself doesn't necessarily resize with the content within and if you're like me that's setting off an alarm Bell where wherever we want something to resize based on the content within that's the perfect case to use Auto layout and so what we can do is by clicking on the entire component set before we go any further why don't we add Auto layout if I go to the right and go into our layout section we'll choose use Auto layout and now all of these buttons kind of Stack Up a little bit more neatly and the set resizes based on the total content inside now it still looks a little large and I think setting the Gap value here to something smaller would help us manage this a little more easily so I'll go to the right and why don't I type in 24 or so we can also adjust the padding so that we can have an even 24 all the way around and now we have our nice component set something that may help is to adjust the order or the direction of these and so as an example if I'd like I can drag this down and I can choose to have this be a horizontal layout or a vertical layout and I can adjust the alignment maybe I'd like everything to appear on the left or perhaps Center is okay for this example Auto layout helps so much in figma and it can help as you build out these large component variants an additional option is we could always use the auto layout wrap feature which means as I change my component set size well they're all wrapping Down Below based on the amount of space that they're able to take up but I think for this option setting a vertical direction will be okay so I'll go back and I'll choose vertical layout and then we'll of course set hug contents and we're back to where we started now this is where I think selecting your instance and seeing how this feels to use can be extremely helpful because you'll notice if I have this instance selected on the right hand side I still see my state property but when I click into it I see something that might throw me off a little which is at the top I see our previous three states but down below I see State four state five and state six that's not really what we want because we didn't want to add different states instead we just wanted to add a different property that set the size of the button that we're using Sigma had added all of these different states here automatically just so the end user of the component would still have something to choose from otherwise we'd have an air and we wouldn't be able to select all of the variants inside of that set now this is pretty easy to fix and it's a common practice as we build out these component variants I'm doing this for most of my day and so I'll click on our component set and then on the right hand side side we'll click the plus next to our properties row this will allow us to create an additional property here and we'll talk much more about properties in the next module for now though I'll go ahead and select to create a new variance now this just simply means we're adding another option to allow the end user of this component to be able to choose from so they can select the one that they're looking for now our first option here is to set the name for the property I think a helpful descriptor here would be size now this second option here lets ass set the default value what's interesting though is we want to create essentially two values right we want to have one for large buttons and another one to select small buttons but figma is only giving us one option to add so the recommendation here I think is to type in the one that you have the most of now in this case we have three large and three small so we can go with whatever feels best and in this case I'll just type in large and we'll create the property now we need to create that second property and the best way to do so is to select the ones inside that you want to set to be the other property in this case small with those selected we can now navigate to the right hand side and you'll see our brand new property over here called size but if we click the drop down we only see that single property so far which is large as you may have guessed though we can add another one right here and so we'll click add new now in this case I'll type in small we'll tap return and let's go back to our instance to see what happened now on the right hand side I see that new size property that we just created and a value of either large or small but look at this when I said small something happens to our state up here I'll choose small and our state has been bumped or changed to State six which again isn't helpful for this if I look on the canvas this looks like it's probably meant to be the Press State and what's Happening Here is because we added those new States and figma had automatically added State four state 5 and state six well even though we created the other variant option to support this small or large choice on the right we still see State four state 5 and state six and so we need to remove those because they're no longer necessary what I'll do is I'll click the component set Here and Now on the right hand side we'll click back into that configure icon or the edit property icon the reason for this is because when we originally added those variants if you remember figma had automatically added those State four state five and state six values we no longer need those because we have the other property to help us choose the right component that we're after so there's two ways that we could approach this the first is at the top here we could go back back into our configure or our edit property menu and down below as we hover over these different variants you'll be able to see right on the canvas which ones they're referring to if I look at this I see State four and that should probably be the Press State it's the last one in here and it also looks to be the darkest so I could either type in pressed here and tap return and that's now removed so I could type pressed in here tap return and now State four is removed as this one and this one are now using that pressed value I could also do the same thing for five so this one here looks to be the hover State and so I'll change this back to hover and we'll tap return now to change State six I'll show you the alternative way for editing these I'll close out of this and we'll just click right on it here on the canvas I think this one this top one here is the one that was set to State six and that looks to be the case if I'd like to change this I can always just click right into here and type in what I'm after and figma will autocomplete the value that already exists in this case default we'll tap return all right with that we'll go back and we'll select our instance and we should see this working if I zoom in here we have the option to change our state from default pressed or hover we see that reflected on the canvas and I can also change the size we can go from small to large and we can adjust the state as we change so congrats we just created our very first component variant together as you can see it does take a little bit of time and also thinking and planning in terms of what you want this component to look like and what you want to be able to do for the designer who's using it but it's pretty cool I think to be able to set up or create a component that others can use and you can customize and name properly however makes sense to you I also hope using the practice of bringing an instance outside seeing the properties in real time and then going back to your set to edit them can be helpful I know it's a practice that has really helped me understand how component variants work how my changes affect them and just to get a good feel for is this easy to use there's one more naming method that I i' like to show you here and to do so I've created three different frames to represent our different Button as you can see these are highlighted in blue and they're not yet created as a component now a shortcut to create a component set here just like we were doing a moment ago is with these three frames selected I can go to the right hand side and in the drop- down menu we'll see an option to create a component set when I select this we'll now have a component frame on the canvas with all of our variants within now right away you might see that figma is throwing an air over here on the right and essentially what this air means is that we have a property and a value but we don't have enough to support all of the items inside this might be a little hard to see at first but I think again one thing that can help is selecting an instance dragging it outside and then clicking in the drop down here and right away we see the problem there's only one option to choose from but we have three different variants inside and this is a common thing that can happen here in figma so let's go ahead and rename and organize these so we have all of the options to choose from now unlike before where I created a property that was called State and a few different values to represent those States I want to try something different I actually want to try naming the property as the state and then setting a value as either true or false is it that or is it not here's what I mean we know this one here represents our hover state or ideally would represent our hover state so what I can do is on the right hand side I'll go ahead and edit this property here we want this property to represent that actual hovered State and so I'll click into this and I'll type type in is hovered and we'll go ahead and tap enter now for its value over here it's not necessarily helpful to see is hovered equals default and instead what I think would be useful is to change default here to true because this is the one that of course is hovered now that means this one here and this one here is hovered is not true it's the opposite it's false and so if I click into this field and type in false we'll now see if I click on the instance on the canvas this brand new toggle which we can use to control our instance and that's because we've only created one property but we have a few to choose from so I'll click on the one down here that represents or should represent the Pressed State now on the right hand side I don't necessarily want to edit this because we always want that is hovered property to exist what I think I'll do is if I click on the component set here I'll go back up to the top and to the right of the properties row I'll choose to add another variance now in this case I'll call this one is pressed and down below we'll set its default value now one thing that can help me here is I know I have two variants inside where is pressed is false or it's just not true right only the bottom one here is the Press State and so if you ever find yourself here at this moment take a look or consider what ones do you have more of and in this case we have more of the false options and so I'll go ahead and set that value to false now when I create the property the only thing left to do is to select the Press option and of course just change that one from false to true now if I click back on our instance we see we no longer have an error and instead we have two different switches to allow us to control the different states if I set is hovered to true we're now looking at the hovered state but if I set is pressed here to true well we're no longer looking at the hovered state and instead R viewing the Pressed State now you might be wondering well how do we look at the default State this top one over here because now especially if I turn this off this one's on and if I turn this off well now we're looking at the Press state so you can kind of go through these toggles and see what works and again what feels best and just to give you a preview here Al turn is hovered on turn is pressed on let's say I want to get back to the default I'll turn this one off and it switches back to the previous one so I'll turn this one off turn it on turn it on turn it off turn it off and we're back all of this can take a minute or two to get used to it's a lot it took a lot of effort here to create a button that has a few different states included but once you get the hang of it I promise this process goes really quickly and it's an awesome feeling to be able to create a usable component for someone else on your team if you were a person creating components and again as a reminder we created these switches over here just by using a combination of either false or true as those property values we could also use on or off or yes or no and we would still get that switch or that toggle to choose from all right we're about wrapped up in this one and in the next module we'll talk about these Boolean instant Swap and text properties all within this options menu these menu items will help us create components that are even more robust with more options inside oh and I should mention one more thing which is if we were to go into Dev mode here and look at this instance you'll actually see figma on the right hand side surfaces those different props that we created such as is hovered or is pressed in this case because we're not working with either the hovered or the Press State well figma showing both of those as false and if I were a developer and wanted to view this component in let's say the Press or the hovered State I can always choose the option in here to open this in the playground and adjust those different property values in this case here's our press State and over here here's our hover State we can get a quick image or a quick preview of what this looks like without affecting the design all right that's all for this module it was a big one but variants are a lot of fun in figma and getting the naming and the conventions right for how you want to organize and store these can be a really useful practice if you have any questions at all on variants or organization or naming feel free to reach out or if you're already using variant and feel like you've got a good setup feel free to share it'd be really helpful to learn from you and what you're doing all right with that I'm excited to see you again in the next one