Swapping Components Solution

[00:00:00]
>> So this is, again, a variation on a theme that we'll kinda take to its conclusion where we've got four components. These are all SVGs. Good luck for anyone who tried. [LAUGH] But we can kinda take this base component. I know that everyone was gonna cheat at some point [LAUGH].

[00:00:17]
So we can have this base component. And this is, again, the one that we never plan on using. So we'll call it .notification, or .base, and we can put it in a notification frame at some point, or in a base frame, whatever you wanna do. We can even call it .base/.notification.

[00:00:35]
And I'll probably go with that button that I think I named in the similar fashion, assuming that I named it in that fashion. Okey-dokies, so we've got that, and now we're gonna turn it into an instance, Or into a main component, and we can drag in our four varietals, variable one, two, three, and four.

[00:01:04]
And at this point, it's an exercise in colorization, right? And so I can theoretically at this point switch this to, let's call this one the success notification. We'll give the lighter color to that, darker color, nope. That was too easy. It was too close. There, you can choose different shades if you want.

[00:01:37]
It's fine with me. We will make the danger one. Maybe we need a lighter version there. Yeah, and then we'll do the darker color as well. This will be our info, And the darker color here. Information, where are you? I like this one. And we'll go ahead over here.

[00:02:19]
This is the warning, the light color. And we'll give it that one. All right, so now what I will probably do is put these all in a frame now. We'll call this notifications, and each of these basically can become a component. Right, the other way to do it if you wanna do it by hand that many times is you can actually just select them all, even if you can select them like that.

[00:03:00]
You can even arrange them. And you can also go, hold on, A lot of times, you can select. It'll give you the option to create multiple components, but it's not giving it to me right now. Or did I already do it, that's why. Yeah, two of them are already base 1, so let's grab the two that are not.

[00:03:24]
I'll show you. And I can create multiple components at the same time. And as you can see, these all need to be renamed. We'll call it this one is warning. There was one interesting thing that we need to talk about with using the strategy of base components, and you can kinda see it in the sidebar.

[00:03:54]
So take a look at that for a second, and I will kinda explain in a second. Danger, that's warning. Which one was this? That's success. It's what happens when you talk and type at the same time. So one of the things that you'll see is that these are effectively framed around the base version, right?

[00:04:18]
And so you will occasionally need to do a little bit of tweaking. I don't love this. It's not my favorite part about Figma. This one tends to work. There will be times where the sizing doesn't work, cuz it's a component nested inside of another component. And so in those cases, you have to just make sure that your constraints, and you're filling out the area as you should.

[00:04:41]
I especially notice that when I was working on the input fields, I would have the base version, and then all the other ones, they wouldn't stretch out. But if I went in there kinda into the components that I made, just told them to fill the container. I just had to manually tweak it.

[00:04:52]
I think it's one of things I suspect will get fixed in a future version. I don't think that it's intentional, or there's a particular reason why. But if you find that your kinda child components don't stretch the way that they should, just realize that they are. I heard you like components, so I put components in your components.

[00:05:10]
And just make sure that they're filling out the container. You might have to tweak it a little bit. These seem to be totally fine, but I've done this enough times, and I'm not always completely sure about when it happens in this case, cool. I don't want that one size changed though, so go back in there.

[00:05:28]
All right, so now, again, I have them all. There they are. And I can drag them in. I can swap between them, as we've seen. Like I said before, there are other examples that you can play around with. One of the questions is that can the base component have variants as well?

[00:05:50]
Absolutely, and there's a lot of reasons why you might choose to do that as well. So you could theoretically have at least the shadow and the darker color. You're probably gonna still have to do some work on each one of the little instances beyond that. But it will theoretically work as well.

[00:06:06]
And we'll see one case where that might be helpful in a little bit. Okay, in the same way that I made the primary and the secondary buttons, once you've got the first one, you can kind of make the different states call on them, and you can kinda build out this set.

[00:06:31]
It's just more of changing some colors, as we've seen a bunch of times.