Variants

[00:00:00]
>> So that is the kind of basis of components, but now this is where it gets interesting. One of the questions that came up earlier was like, okay, yeah, but when I make prototypes, can I have various states, right? A variant, like, I'm not gonna have spoiler for loci in here, but like a variant is the idea of different states that a button could be in, right?

[00:00:24]
And to be clear, you can take a bunch of different approaches, in a lot of UIs like the one that we had back when I worked at Twilio, when we called paste. There was a primary button which was like a blue color, a secondary button was like a white button with a blue outline.

[00:00:42]
There was a danger button which was a red button with danger primary button, danger, secondary button, there were buttons that look like links, right? But we're semantically buttons in the HTML, right? There are links that look like buttons, right? Actually getting, it's one of those things like getting it like design system, you can probably do in a day, doing a reopen design system takes years, right?

[00:01:09]
I think there was one, so one talk on Figma where a new designer of Bumble tried to just create a component for a chat bubble, and found out there were 300 variations of a chat bubble, right? A chat bubble with a reply, a chat bubble with an image, a chat bubble for each side, so you already doubled the number there, right?

[00:01:29]
Like 300 different variations for all the things, a one with a link in it, so it's got the preview, think about even like I messaged or something like that. Or what have you, there are a lot of variations for these things, right? Even like I said before, buttons and input fields alone could have like 36 variations, there are a bunch of ways to handle this.

[00:01:50]
One, is to have multiple components, right? And another is to have variants, and could you just do any of these things solely with either one of these strategies? You could, we'll make trade-offs, my suggestion is we're gonna exploit both strategies, and my recommendation towards the end is going to be yes, right?

[00:02:17]
There's a time and place for both strategies, and I will give you kind of like I will shepherd you through this process and figure out when to use each. So, my basic thing is, again, and we say that there's a primary button and a secondary button, a danger button, a dangerous secondary button, those could all be variants.

[00:02:35]
I'm going to implore you that they should be their own components, you're like but what if I just change the border radius? I will get there, I will argue that the state of a given component is it hovered? Is it active? Is it focused? Is it disabled? That is one component that could be in these various states, if it is an attribute that you are going to give it an HTML or a class name no.

[00:02:59]
If it's an attribute that you're gonna give it or something in the browser like, is it focused? Anything follows a colon, in the CSS, I would say is a variant, anything that's in a class name is probably actually a separate component, and we'll figure out how to manage it.

[00:03:13]
So you can basically have your cake and eat it too, because who doesn't love cake? Okay, so when you choose variants, you have multiple similar components that share a lot of the same properties. But, number two is kind of a point I just made, you've got some state that you want to be able to toggle between.

[00:03:28]
Enabled, disabled, checked, unchecked, on off for a toggle switch, kind of so on, and so forth so let's go ahead, and let's make a button, right? That theoretically can have some states to it, right? Some variants, if you will, I'm gonna take this button right here, we will make a real button set in a little bit, for now, we'll just grab a button that works, and I will drag it out here.

[00:03:57]
And, I'm actually gonna detach this one real quick, so this is just a button that I made. Here it is, now what I might choose to do is I'll make another one. Yeah, I'll make another one, cool, let's say a button you can hover over it, and you can click on it.

[00:04:20]
So this will be our default button, and this one will be a hover state eventually, and this one will be our active. Again, let's just do something simple here, we'll say, you hover, it gets a shadow behind it like it's lifted up, and maybe when you click on it, it gets a slightly darker color.

[00:04:43]
I made a lot of these, like example ones, without trying to pollute all the styles, so these have hard coded values. We could also theoretically switch all of these and use our new colors that we made earlier in the course, so, we can say that this is going to be a brand button.

[00:05:00]
So be the primary button, we'll say by default, we'll change this to That's a little bright, that's all dark, we'll go with a brighter color in this case, and we'll say that this one is going to be that darker color. Let's actually keep the hover state the same color as the main button, but when they click it, it will go back down and be a little bit darker.

[00:05:35]
Like again, you can sell these however you want, you don't like my colors, change your colors. But we have these three states, so I could do this point is I could select them all, and you'll notice that I have this create component set. Yeah, let's do that, and now they get surrounded in this fancy purple border, and it's button, and I'm getting yelled at here.

[00:06:01]
Some variants of the same property values apply, cuz they all have this thing called property one, and it's set to default. That's not great, so, we'll say that the property one is the state that it's in. All right, sure that one's default, that makes sense, I like that.

[00:06:20]
This one will actually say that it's hover, and this one will say that it's active, as soon as I do that, that warning that we saw before, goes away. So I have this idea of a button, this is a set, if we go over into my assets right here, and we see the under variants of the button I just made, there's just one button in here, right?

[00:06:45]
I can drag it in, and now, I can switch it between default, hover and active, right? There's a few other ways to go about doing this, let's try it again real quick, let's just grab a button. Get out of there, get out, this is not a component of any sort, but that as a component, let's just attach it again.

[00:07:15]
Just gonna show you another way that you can make a button, all right, so for this one let's change it to a dangerous button, so danger primary button. What I could do is, I could create a component out of it, neat, and now I can hit this plus sign, and you see there's property one I can call, this one's gonna be called hover.

[00:07:39]
If I wanna change the name of the property actually have to go to the set state, default, and hover, and now you can either add a new variant or add a new property. So if I wanted to say disabled or enabled that would be a new property, but a new variation of a current property in this case this state, we could say is now hovered or active.

[00:08:00]
That gives me the same effect, now, remember I said you could use a slash to organize onces. Well, there's also a trick that you can do, let's make one more button because yeah, who doesn't like making buttons? Let's go, this one will detach the instance real quick. And we'll make a secondary button in this case, and the strategy for making the various forms of buttons is already flawed cuz if I change the border radius on one of them.

[00:08:27]
I have to do each at least set individually, that's not great, but we'll see how to handle that in a second. So in this case, we'll give it a stroke of same color, and we'll take the fill, and make it light, and we'll take the text I'll make it dark again, nope, gotta grab the text there, I'll say, dark.

[00:08:58]
I might even make it a white background, but I'm not gonna keep this button, so I'm not gonna over rotate on it, cool. All right, this is like the Galaxy mind version of it, you're ready? I will make three versions of it just like I did in the initial example.

[00:09:18]
We'll add the shadow to this one. Maybe we'll actually make these two white in the background, and keep that one as the kind of active. All right, so that's the button hovering over it and clicking on it, okay? If I name these, state equals default, state equals hover, and state equals active, and now I make my set.

[00:09:59]
You can see that already it automatically figured it all out for me, right? So especially if you find yourself like, all right, I'm gonna make a whole bunch of input fields, I'm gonna have focus, I'm gonna have regular, I'm gonna have with an error. I'm gonna have without an error, I'm gonna have required, you could theoretically just change a few words in the naming of each one and automatically create the entire set on the fly.

[00:10:20]
And now you have the ability to drag in and again, we've named this like, second secondary button. Danger button, okay, you might be like, well, what if? What if? What if? Instead of having three sets of components, I have one button and I have a whole bunch of variants, and I'll have like primary, secondary, danger, danger and secondary.

[00:10:49]
And then, they're both set I all have everything, just a series of different toggles, you can do that, and it will work. You're like, there's a catch, isn't there? There is a catch, you can do that in work, but it does mean that there only be one entry in here.

[00:11:06]
You will drag in that button, and you will tweak all the different settings, for every single button that you drag in, you will not be able to drag in the different kinds of buttons, right? This one, you don't see the hover state, or the active state in here, you just see the default state for each one of those, how do I know that that's annoying?

[00:11:27]
Because I did it, and it doesn't go well, right? Versus, let's say I drag in a button, and later you wanna drag in a secondary button, right? But then later on I wanna make this one a secondary one, to, you can go ahead here and say swap instance, and just swap it with a different instance if they're all in the same folder, right?

[00:11:53]
And the same name, they're all in the same frame, these are just kind of in this page overall, that's why that organization is super key. Because if you have them all in a similar name, frame all started with button slash, whatever, they're all like siblings in a family that you can just swap between, and also you'll notice that I can say.

[00:12:19]
The overrides will work, so here I can say, as long as the properties have the same original state. So we'll swap this one over to a primary, and so, this is why I would say that the given states that a button might be in hovered or active those can be variants for reasons that we'll see later.

[00:12:38]
But actually related components should actually just be organized together, could you do it all at variance? You absolutely could, should you? Probably not, unless you have a compelling use case you could do it, but I have learned the hard way that it is not a happy place that it leaves me in.

[00:12:57]
But instead, I end up just having to tweak things all the time, a few other things is you can have a description. The other really cool thing is if you had a full design system, like if I was doing this for my company's design system, you can actually have a link to the docs as well.

[00:13:14]
This, again, is especially if you're both the developer and the designer, or if you're a designer who's thinking about developers, and you're handing this off to developer the idea that you could link. To the react props, or the view props of the component, and have the docks in there as they're kinda navigating through the UI is powerful as well.

[00:13:33]
You can also put words in the description and search here, and I'll show up as well, so if you want to have additional search functionality two, you can kind of build that in place. All right, one other trick, and then I'm gonna give you a little exercise to do, is, if you'd give them a name like you see this one I can just swap between the different states.

[00:13:57]
If the values of the properties are true and false, you get a slightly different UI for it, right? So just a little trick a little fun hack if you will, so let's make a little, I'll make this, and we'll give it So we'll just say, checkbox or whatever, and we'll make a second variation, here we're gonna say, checked is true.

[00:14:37]
Checked is false, in the checkbox we'll put a little rectangle in there for now. Just something simple, I have a better looking one that we can use in a second, but I will start with this, I will create the variance. And we'll name it, checkbox, we'll drag it in, and now, you can see that instead of a drop-down with all the different options if it's true and false, you get a slider.

[00:15:13]
Just, yeah, if it's gonna be a Boolean anyway, you might as well treat yourself to a slider instead of having to like two clicks instead of one click.