Swap Instance Property

[00:00:00]
>> What I'm gonna do is I am going to create a whole bunch of components out of these icons. And that is very easy to do. If you look, there's a bunch of icons. I can go ahead and select all of these frames. And you'll look I have a little carrot here now.

[00:00:19]
What does that do? I can create one component of all of these icons. I can create multiple components, that's the one we want. Or I can create components set, which there is a time and a place for. This is not the time. I'm going to do it in this page in a second, so it is the place, it's just not the time.

[00:00:37]
So we'll create multiple components and look, they all get these, fine little diamonds. If I go in to this page, you can see here are all of my components and I got the button from earlier, right? That I nested in some insane way. So I'm going to go to the main component and we're gonna update this button so that it supports having an icon.

[00:01:08]
Right? And the ability to like swap out set icons. So let's actually change this button a little bit. Let's make it, let's start by default having a secondary button here. So will give this one a stroke. Of a little bit of a darker color. We'll change the fill to the lighter color, and we'll change the label to that same darker color, right?

[00:01:37]
Okay, cool, we got a button and we would love the idea of having an icon in here too, right? So we can do is, this is auto layout. So most of it's there. What I can do, is I can drag in this icon. And that's a little big.

[00:01:57]
Right? And so now could I change the stroke on the, as I said before, selecting all of the same property is great when you need to change the stroke in a bunch of icons asked me how I know. Right? But we'll ignore that for a moment. And we've got this button and so the trouble with this button is that, they're all gonna have this bug on them and maybe I want other icons in the back, maybe I want a cool skull that I made.

[00:02:23]
I didn't make it. I stole it from the side, which is open source. And I want to be able to swap them out right? And so what I can do is I can actually go ahead and see this. I have that bug in there. I can say create an instant swap property, right?

[00:02:44]
We'll call it icon. Maybe by default it's bug, you can choose a different one if you want. Plus sign skull. Cool. And then you can do this idea. So you can swap any component out, any nested component out with another component, right? But what you can do, since that's a lot of power, Figma doesn't give you a great, you can get away with a lot of stuff here, but what you can do, you can't stop people from doing certain components.

[00:03:11]
We can say, here's the preferred list that I will show you. So, you can go in here and it's like, hey, actually you can swap it out with either any icon or depending on what your designers want. Only a certain subset of icons are right for the button, a certain subset icons or for the nav, a certain subset icons are here.

[00:03:30]
You can basically select those icons, so we can say check. We're not gonna have a hashtag been a link button. That seems good, info. I don't know success. Great. So we have this in place. So now I've got my button here. And if I go I can drag another button in.

[00:03:49]
And you can see that now this button has the option of swapping it out with the different icons. Right? The other thing I could do is I think we saw before I'll show you from the other angle which is even if we look at this layer, the skull that goes up to component.

[00:04:12]
Let's see, we want this layer, we can also say show icon. Sets up the false by default. And so now I have a button where I can say, show me the icon, and if we show the icon, what icon you want. We get the idea to have more fluid and reusable components cause now we have a button, we can toggle whether or not we want to show an icon, we can switch it out between a preferred list of icons, could they do some dark stuff like go outside preferred, go into component properties and find the badge and shove it in there, they could.

[00:04:53]
Right, but that's just like just yell at people. We a lot of times look for technological solutions when yelling at people is an option. And so yeah, it's not totally foolproof, but at least getting guided in the right way is super helpful as well, and so we can create a set of components, right?

[00:05:14]
The other thing, if we look at this system, you'll notice that there's this idea of variance as well. Because one of the things we know is not only, especially buttons, buttons are. If we think about the number of buttons in a design system, it gets out of, this isn't even all of them.

[00:05:32]
If I look at the design system we have, we have way more buttons than this. Right, you've got your primary, your destructive, and your secondary buttons. Great, like those are just, and I made those different components, and then you can swap between them depending on the organization. So, one thing I'll show you is you grab a button, I'll grab the primary button.

[00:05:55]
And you'll notice that when I'm dragging this primary button, it will actually let me swap it out with a different one, right? And basically, I could actually swap it out with any component the same way I could do it with that icon before, but it will use the organization be like, yeah, this is on the button page.

[00:06:13]
So, why do you want to swap this button out with a more different button, right? You can do that. The ghost button is one that doesn't look like a button. I don't make the rules, I just took what we did in our app and reapplied it. You swap it out to primary, I can swap it out to a destructive button as well, and I can switch it between those different buttons.

[00:06:37]
So that's one variation on a button, right? It's all the different kinds of and you know there's more button. There's like rounded button in some places. There's links that are technically look like buttons but they're really a link H anchor text hrefs. It's a mess. Lots and lots of buttons.

[00:06:52]
There's buttons inside of input fields as buttons all over the place. But not only are there all sorts of buttons, but those buttons can be in different states. That button could be hovered over. That button could be currently pressed on an active, that button could be disabled. That's probably other states the button could be in.

[00:07:09]
So if we wanted to, let's say, create all those various things. So I would say I would make a different component that is very similar for your destructive, your primary, your secondary buttons and style them the way that you want. They used to be a bunch of hacks, like using one base component that you don't use as the prototype for all your buttons.

[00:07:31]
So if you change the border radius on one of the buttons, it would affect all of them. Now we have variables, so I would just store those values in a variable unless it's something you truly can't. But, you can create multiple buttons, but then the idea of a variant I would only be like, no, this is a different state of the same button.

[00:07:50]
So cause otherwise you end up with a variant list that is like really gnarly and complicated. If it is both the difference between the primary, secondary, destructive button and then also the hover and act of state, right? It's unwieldy. I've tried it. It's not great. And it also there's a lot of limitations.

[00:08:08]
You make a different component for each one you use the ability to swap out components and instant swap to switch between the different components your variants are for, like the different states, hover, active, disabled. Even disabled I might switch to a different button cause I've done it both ways and I always regret using disabled as a variant.

[00:08:28]
Cool. So, I can either start out with the different styles of buttons like I have here. And I can design them all just by duplicating and changing the parts I want. If I already have the component I can hit this button right here, which is add variant. Right now I have two buttons, right?

[00:08:48]
It's called property one and variant one. So for instance, we could rename this state and variant two, we're gonna call hover and variant one default is great. So then what we can do is we can go ahead and change something about this one. So let's say that when they hover over it, we're gonna change the fill to be slightly darker, right?

[00:09:18]
So this is one button but if I drag one of these in now. You can see that I've got the property like the show icon, stuff that we had before. And then I also have default and hover, right? And again, that's one button in the various states that it can be in.

[00:09:40]
And so that's typically where you use the variance. It's really it's a fine art of like, do you want to be able to like where the component property so for instance, an input field is required. I wanna show a little red dot next to it. Maybe I'll make that a component property of showing and hiding the red dot but like, theoretically, I wouldn't try to say a variant of a text input is that number input.

[00:10:04]
I would make those separate. Distinct things that you would implement in code differently should be distinct components, but the hover state or the active focus state of an input field or button are variants thereof. And then what's kind of cool about this is then you can then make them interactive and that's useful for prototyping.

[00:10:25]
So like theoretically no one's gonna put a button in a hover state in their design, right? And then you so like then why would we even do this? Where it becomes kind of powerful is if you switch this over to the prototype tab. You can go to interactions.

[00:10:41]
And you can say, let's see while hovering. Change it to the hover state. So now if this component is using any prototypes, right? And someone hovers over a button component, do you know what's gonna happen? It's gonna switch to the variant that is the hover state, right? So you get the idea we can start to simulate and get a feel for all these things.

[00:11:06]
We'll look at prototyping at the very end, but it kinda gives you some of the initial pieces. One kind of, we won't do it now, but I'll give it as an exercise for you later. Like at home, at homework, if you will. Is like you can do that like having a checkbox of unchecked and checked, right you can create interaction as unclick.

[00:11:26]
Switch it from the unchecked state to the checked state, right? All of those kinds of various things that you might seek to do like you can't build a full UI and figure it out but again, like it's super useful. For the product manager and designer to then go to customers validated design before you ask for API's that you don't actually need from the back end team.

[00:11:48]
And before you spend all that work building just to redo it, you can create a pretty like, we'll see one at the very end. You can create a pretty compelling prototype using figma prototypes, but we can create some of these basic status variables. But I will say that for the most part, you'll notice that I still have one button in here.

[00:12:06]
Right? And so if I decided no, I don't believe you, Steve. I wanna make the secondary button and the destructive button and all those things variants. Cool. Get ready drag we'll see one button here, drag it in and have to click to change the state every time and good luck wiring up all those interactive activities, like interactive pieces of the component.

[00:12:27]
It's going to be very hard for you and it's probably not worth it. So while it might feel bad to have a bunch of components that look the same, like Figma is kind of like ergonomics. Definitely set you up for because I look having a bunch of different buttons even like I didn't want to hit, I got real bored.

[00:12:46]
Even hitting that toggle to show or not show an icon, right? It became a lot easier at a certain point to just dragging a button that has an icon and then instance swap it out for one that doesn't. It's a little hard to make large scale changes to all the buttons.

[00:12:58]
Yes. But if you're using enough variables and stuff like that, or you're really fancy with your select all and renaming and stuff like that, you can make it work. And that's typically what we ended up doing even though we started down the path of trying to overload variance with everything possible.

[00:13:13]
So my advice to you is use them for the simplest possible thing, the more components you have and you can search. Naming is very important here, but then it's easier. Just drag in. Like, could I have made this a bunch of different variants? I could have. Did I.

[00:13:26]
At one point in my life, I did. Did I regret it? I did. Right. So just having a bunch and then kind of doing the changes that you need to do. Before variables, you can make argument that it was easier to just change those states. I think after variables, just having those things defined in variables and tweaking those is a lot easier.