Variants Solution

[00:00:00]
>> So I've got some pretty little radio buttons and some checkboxes. Again, we can use the naming trick here, as well. What I would probably do is I would keep these as separate components. We'll kinda look at how to do that momentarily. So I might even make a frame, and we'll see a little bit more of the component sets shortly.

[00:00:17]
We'll have a section dedicated to that. But let's do a sneak peek because it's come up. As I do this, I will say that in the chat, we're talking a little bit about there's a lot of Reports that also, if you get really carried away with too many variants, Figma's performance slows down a lot.

[00:00:38]
That checks out, it seems complicated. We mostly, for our purposes, have it as shared components. So I haven't felt that pain personally. For me, the ergonomics of having just so many toggle switches that I had changed every one got unbearable fast enough, that I didn't want to continue like that.

[00:00:59]
And I ended up losing part of a day just undoing it before I made it too far down that road. But reports from the field say that also that could be the case, as well. So I might call this one checkboxes. We'll make another frame. These probably got bigger at some point.

[00:01:20]
And we'll call this one Radio Buttons, right? And what we'll see is this will add organization and a hierarchy to our components, as well. We'll also see some other problems that we'll have to solve shortly. But let's start with a happy talk about how to just make a bunch of variants in this case.

[00:01:42]
And we'll talk about all the problems that we're introducing momentarily. So I add these in. Again, I'm going to call this one One fun fact is, if a frame is kinda just on the page by itself, you get this little label on it, and you can just click it and change it.

[00:02:02]
If a frame is already nested inside another frame, the name of the frame is invisible. And you're like, that's annoying. It makes sense, because otherwise, how would you see anything in a new UI, right? I'm into it, but, yeah. So here we'll say Checked=True, Checked=False. And we'll do the same for these two, as well.

[00:02:27]
These are just an auto layout one with a label on it. We'll go ahead and we'll say, also hit Cmd+R, just click on hit Cmd+R, and I can do Checked=True, no, False. That was a trick to see who's paying attention. And I'll hit Cmd+R, and I'll say Checked=True.

[00:02:51]
That's what happens when you talk and design at the same time. And I could do the same for the radio buttons, I'm gonna spare you. We'll go ahead and we'll create a component set. This one's now called Component 1, just Cmd+R. We'll hit Checkbox. It's under Checkboxes, so you might just call it without label.

[00:03:11]
This is a you decision, whatever in your heart feels right. I can't do it. Checkbox Without Label. I don't know if I'm gonna move it. No, I can't. And here we'll go Create component set. We'll call this one Checkbox With Label. One thing that I a lot of times do, if I'm making these frames just for holding components is, I don't have the time to sit here and try to arrange these in a way that is pleasing.

[00:03:48]
Auto layout, and just let it organize itself. And I can drag additional versions in there, and I never have to think about it again. Now, so we've got these checkboxes, let's go over to my assets here under Checkboxes. That makes sense. That's a good place. So I can go ahead, and because these have the same name, I should be able to hit Checked.

[00:04:11]
But if I wanna get rid of the label later, it stays Checked. It's cuz those variants had the same name. So basically, we're on our way to both having cake, as well as eating cake. Cuz what's the point of having cake if you're not gonna eat it, right?

[00:04:28]
So as long as the variants are named the same way, they will persist as you swap. If I'm not mistaken, we can even, Let's find out. Pretty sure, yeah, the label will also kind of persist and be remembered, as well. So you can basically have, like yeah, could I have a whole bunch of different things?

[00:04:54]
I could tweak here With Label, Without Label. Could I make that a second toggle? Sure, but this isn't bad either. And now I get both versions that I could drag in, right? For me, this is the best of multiple worlds. Now, one of the problems that we're gonna have is, all right, this button.

[00:05:11]
Again, rounded corners are very 2021. It is 2022, we're going with the more Microsoft squared off corners, right? So let's go ahead, we're gonna get rid of that radius. Only that button changed. Okay, I'm gonna need to solve for this problem. So let's go ahead, and we need a better strategy for this.

[00:05:42]
We had this idea of swapping out the components. What we kinda need to do now is have a way. What I really wanna do, cuz this, again, this isn't even a complete set of different buttons that we could have, right? I've been in enough design systems to know that there are more than however many buttons are in there.

[00:06:03]
24 plus another, there's 36 there, but there's more buttons than that. And so you could see that having a way to have those changes persist over even all of my different components would be great. And to be clear, there's a certain complexity cost here, right? One would argue that if you had all your buttons in the same frame, and you got to the point where it's I need to change the border radius.

[00:06:39]
If you keep all the main components separate in its own file, you could just select them all and change the border radius, right? But in a long enough timeline, not having this setup, because there's a whole other set of features that we're gonna see where it's not having some place where you can make one change and have it affect all the different varietals.

[00:07:00]
Not variants, varietals, of a given component will bite you at some point or another. So being like, I don't need this, you might not, but you might. So let's talk about how to, maybe, think about this in a different way.