Variants

Hey friends, today we are talking about variants, which is my very favorite feature, unless anyone else asks you. I do not have favorites. They're all my favorites. It's variants. Variants are my favorite. Okay, so let's get into What are variants? First of all, you're gonna need to understand components in order to get into variants. If you don't quite get components yet, that's okay. I'm gonna link you back to a video below that explains components a little bit, so you can get a little bit mor

e familiar with that. So go ahead and watch that and then come on back. Hi, you're back. Great. Okay, let's get into it. What are variants? Variants are essentially variations of a component. So if you have, say, a button, for example, and you have a primary and secondary and tertiary button. And then you also have a default, hover, focused, disabled state. And then you also have a small and a large. Those are all variations of that component, and when we set them up as variants, it's gonna be a

lot easier for us to use this component. So, Let's get into it. Let's compare just components versus variants. I have two different, kind of, sets over here. I have our components, our individual components on our left, and then I have our variants on our right. If we look at them, they look fairly similar. The differences that I really see right off the bat are that on my left with just my components, I can see each individual name for each individual component. Versus, on my right I can see j

ust button, just the component set name, and then I can't see each individual name. Other than that, I have all of the same buttons created. They're all kind of organized the same way. They look pretty similar. So now let's get into comparing each individual one. So on my left, again, I've taken a button from this set of components over here. So one's done individually as components. And on my right, I've taken a button from my variants. Now, if you were to ask me on my left to switch this to a

different option, make it a tertiary button that's large and disabled. First of all, I'd kind of have to know that those are my options in order to like search for it very quickly. Otherwise, I'm gonna have to be popping back and back, and then I can go into my buttons and I know I want it to be tertiary and disabled and large, let's make it. Cool. That was doable, but it was a little tricky to have to search back and forth between things. But in the one that I've created as variants, you can se

e right away in the right hand panel. So let's just compare really quickly. Left only has this one dropdown versus Right has same dropdown up here, but I can easily see now the variants are exposed and I can super quickly change it to, oh, I want it to be tertiary. I think we went disabled, and large. I can way more easily see what my options are. So it's gonna be a lot more discoverable for people who are using your design system when components with multiple variations are created as variants.

So let's create one. Let's start out with our little button here. And I'm actually gonna start out by creating just those multiple components in case you're somebody that has already set up your design system this way And you're like, shoot. Now I have to redo everything? You don't. There's a really easy way to transfer from just components to variants. And actually how you do this might be one of the ways you wanna set it up anyway if you're doing it from scratch. So let's go ahead and do that

. I have my button right here, and I wanna go over the slash naming style, cuz that still is gonna be relevant here when you're creating variants from scratch. And what I mean by that is you'll see when we went up here, that our components are named with this slash naming, so button slash primary slash default slash large. And basically that is everything before the first slash is what your component set is, what you want the set of components to be. These are my buttons. Then everything after t

hat are different properties of the button, so primary button and then secondary button. Those are all after the first slash, then after the second slash default, you'll see after the second slash here it's hover. Those are my states. Then after the third slash, we have large and we have small. So all of the properties that are the same go after those same amount of slashes, if that makes sense. So, let's go back to our button and we'll name it that way. So we're gonna call it button, cuz that's

what we want our components set to be. Button slash primary slash default slash small. And now I'm gonna go ahead and duplicate this and create all my different buttons and I'm gonna speed it up a little bit just to save us some time. But I'll come back when we're ready for naming cuz that's gonna be important too. Off we go. Look at me, I'm making my buttons so fast, and I don't like awkward silence so I'm singing. Okay, we're back. Great. So I haven't changed any of the naming on this, I just

duplicated things as I was going. So you'll notice that everything is the same name as the button that I started with and I haven't made anything a component yet. All still just frames. So I wanted to show you one way to quickly rename, and that is I am going to select everything. Let's start with this, second column right here. These are all my hovered states right now, they're all default within the name. I'm going to do Command R, find everything that says default, and I'm gonna replace that

with hover. And now rename. Great. My naming is all set there. I'm gonna find and replace essentially with renaming. So again, with this row, this I have as small, and I can do this with multiple at a time. These are all labeled as small right now, but I'm gonna rename small and I'm gonna change that to be large. So now these all say my large buttons, so I'm gonna do that with each kind of row and column just to make sure that I have everything the same. Let me speed it up again, be back in a s

econd. Okay, great. We're back. Now to create these into variants. First I'm gonna create them as just individual components to show you what you would do going forward. So we're gonna actually duplicate these so I can show you both different ways. I'm gonna take this set and I'm gonna select all of these, and I'm going to create multiple components. So you'll see now basically this is where we were at. Here, we're in the same spot now. You'll also see that as these are still all selected, so ev

en if I unselect and then select them again, as they're selected, I have this option to my right that says combine as variants. When I do that, now they're variants. Now we essentially went from this state, to this state, just with a click of a button. Let me pause here and show you if you didn't wanna do that one additional step as creating components, then combine as variants, if you're just totally starting from scratch, you don't already have them as components, super similar. You're gonna s

elect all of them and then you'll just go to this dropdown in the components up here. And instead of creating multiple components, what I'm gonna do is create component set. And that essentially is a set of variants. So we now have the same exact thing, both very similar ways of getting there. Since they're the same, I'm just gonna delete one of them and we'll go back to here. And you'll notice that the properties now are essentially where the slashes were. So let me just grab one of our compone

nts from the components that we had over here that weren't in a variant, and I'm just gonna grab an instance of that to show us that when this was created with the slashes, I'm gonna grab this out of our naming just so we can see it a little bit larger. It was created as button slash primary slash default slash small, which is how we created our naming here. You'll now notice that within the properties we have button was our main component name, button right here is how that got that name. Prima

ry and secondary. Primary was after the first slash so that became our first property. Default disabled, those were after our second slash, those were our states. Those all went after our second slash and then small and large, those ones all went after the third slash So these properties are gonna be defined as where they come after the slash naming. And the first one is always gonna be what your main component is called. To change these cuz we're gonna want these to be a little bit more descrip

tive for ourselves. We're just gonna double click into here and we're gonna call this type cuz it's a button type, and we're gonna call this state, and we're gonna call this size. And now when I click on one of these and I hold down option to drag out an instance, I have my type, my state, and my size. And I can super easily change these just right here. So one final thing about naming, just so you have all the context here. If I were to go into one of these buttons and I double click on it, and

again, I'm gonna just gonna take it out so we can see it a little bit easier. You can see that the way that Figma has now changed this naming from the slash naming structure within the side panel is to be type equals primary, state equals default, size equals small, so you can absolutely set up your naming that way when you're renaming your components, before you create this component set to make your variants. You could even just start naming your button that exact way. And then the only diffe

rence would be that how we had to change all of these names here from property one to type that would already be in there. So totally up to you how you wanna do that naming structure. If you wanna keep it the slash naming, just cuz you're a little bit more familiar with it, if you wanna type in exactly what it's gonna be. Basically the X equals Y, A equals B type of thing. Total your call. Both of them will essentially get you to the same state. Last and final thing, I promise this is very long,

but I promise we're almost done. Last thing is, you'll notice here, I don't have anything with like a boolean operation. So maybe for example, you wanted the ability to turn an icon on and off. You can definitely do that as a variant. You could say icon equals on. Icon equals off. But I would actually suggest doing it with a component property cuz once variants came out, we realized lots of things are happening with variants. We're getting a little bloated here. We need another way to fix these

. Especially with the boolean properties. That's where I would suggest looking into component properties. It's going to drastically decrease the amount of variants that you even have to make and just make it a lot easier for you and still be able to show boolean properties like on or off and a lot more things. So I'll also link that video below, so you can check out component properties, cuz that's gonna be another game changer for you. Super fun. All right, hopefully this helps and see you soon

.