Hey friends.
Today we're gonna talk a little bit about component properties.
Now, first of all, what the heckity heck is a component property?
Great question.
So glad you asked.
Component properties are properties of your component, great name, that allow
you to assign names and values within your component that can be customized.
So there's three different component properties.
The one that I use probably the most often is the boolean property.
That's essentially allowing you to turn something on or
off, true or false, yes or no.
Then there's the text property that allows you to be able to change the
text right from within the side panel.
And then there's the swap instance property.
So if you have say, like an icon within your component and you wanna be able
to change it to a pre-selected icon, you can add those within your preferred
icon values and you'll know exactly which ones you can select there.
So that can be super handy, especially in things like buttons and things like that.
So let's take a look at the difference between just using variants, and
variants and component properties.
Because if you're like me when component properties first came out,
you're like, this seems like a lot.
Uh, I don't wanna do this.
Um, I'm just gonna ignore it.
And, I wish that I hadn't ignored it because it really is, it's life
changing people, it's life changing.
Um, but actually it's really, really helpful.
So on the left you have some buttons that are only made with variants, and on
the right you have buttons that are made with variants and component properties.
So you'll see on the right there's less buttons.
And that's because on the left, we had to have a variant for
"without icon" and "with icon".
And same thing for the secondary button here.
On the right, we've been able to use just this one button and
tell this icon here to either be shown or not shown, true or false.
And that might seem like, okay, that's great.
You were able to get rid of a couple buttons here.
That's not a big deal.
It might not seem like a big deal when it's maybe a smaller set, but
once you start to get into, maybe you have a button with no icons and one
on the left and one on the right, and then you want the ability to have one
on the left and the right, and then you have secondary of all of those,
and maybe you even have tertiary.
Here we've gone from 32 variants with just primary and secondary in
all the states to eight variants with using component properties.
So you can see how the bigger your component set gets, the more convenient
it is to use component properties.
And it's not just the boolean property.
Remember I said there's two other properties.
And how can that be helpful?
So if I have these two buttons here, this one's made with just variants, and this
one's made with variants and component properties, if I were to tell you,
okay, change the icon to one that's been pre-selected for approval by your team,
and then change the text on the button.
If I go into the one that's just been done with variants, I don't
know which one's been pre-selected.
I'd probably have to go find a list somewhere and then go into
my icon and then try and find, uh, that icon by going back.
Blah dee blah dee, blah.
Um, so.
It's not really possible to find a pre-selected one.
If I wanna change the text, I can double click in there.
That's not too bad.
But on this one, if I wanna find one that's pre-selected, changing my icon,
right here, I've got a component property set up, and when I click on that, I have
my preferred value set up right here.
So my team's already set those up for me, so I know that these are the ones
that I'm okay to use on my button.
So we'll switch it to the cancel icon, and then if I wanna change
a text, I can do that right here.
And the text especially can be super helpful when you have a lot
of texts that you wanna change.
So you don't have to keep kind of doing that either command
click or double clicking in to change all the texts right here.
It's really handy to have everything in one place.
So another thing you might be saying now is, okay, Lauren, fine,
you've convinced me, but I literally just made all of my variants.
I don't wanna remake all of these with component properties.
Don't worry, it's not too hard.
There's an easy way to kind of convert things over to component properties.
So let's go back over here.
And we wanna make our icons, instead of having the no icon button, we wanna
make this into a component property.
So what I'm gonna do is I'm gonna double click on this icon, and you'll
see this icon show up right here.
An icon on the icon.
And this is telling me now to select all matching layers.
And when I click that, it selects all my icons here and now you can see
it on the right side of my screen.
Either this instance swap property or create boolean property has
shown up and we're gonna do boolean property first, and we're gonna
click that and I'm gonna do changes to show icon and keep that as true.
That's great.
Now we have a show Icon property, and now you'll see this one
that we had as true or false.
We can just get rid of that and then we can even just get rid of these icons
right here, because we've already made this icon now set to be true or false.
And when I pull this out now, the show icon is still there, just as
we had it toggle-able before, but we've been able to delete all these
extra components that we don't need.
And while we're in here now, we can also go back to here, select
all, and add in that instance swap property that we wanted.
So let's call this icon again and we're gonna add in our preferred values.
We'll just put a couple of these on here and create property.
And now again, we'll see this over here.
This is allowing me to change this.
And another thing that you can do is if you feel like these are not in the right
order that you want, maybe you want this one to be above or however you want it to
be, you can swap those around and put them in the order that you want them to be.
And then the final thing we'll do, just cuz we're here, is update the
text on here to be a property as well.
So I'm gonna again, select all, and I can either do, I don't wanna do the layer
cuz I always want there to be text there.
So instead of a boolean property, I'm gonna come down
to here and do a text property.
And this one I'm just gonna call label and the value is label.
If I were to change this in here, so maybe I want this to the
default actually to be Welcome.
Now it's gonna create the property.
It also changed all of that for me.
So it's a great way to change all that text if you want it to be that way.
And now when I'm in here.
I can easily go in and change this to "hello".
And my text has changed, so now I can swap it to a different icon.
I can actually turn the icon off
and everything that I made before, as far as the primary and
secondary, that all still stays.
I don't have to change any of that.
So, it's really a lot easier than it might seem from the beginning to just kind of
add in those component properties even when you've already made the variants.
Hopefully that helps, and you can get to component property-ing.
Yay!
Bye.