Components Properties

[00:00:00]
>> So we've got the kind of the fundamentals of components, but it kind of gets a little bit interesting when we kind of start to build them up a little bit more. So, one of the things you can do with components is this idea of a component property.

[00:00:15]
Again, this is where our lives get easy. It's almost as a Figma was built by engineers. And so some of the terms I introduce into Figma are terms that engineers use, which, as a bunch of engineers learning how to use Figma, makes our lives easier, right? So if I said component property and you thought in your head, is that like a prop in React, we're done, yeah, yes, exactly.

[00:00:41]
Now, the nuances of how to use them is a little bit more than that, but the concept is mostly the same. So before we had that session card that we made responsive to great effect, and it had these little badges or pills. You see them in auto completes, you see them all over the place.

[00:01:03]
After the button, it's the second most common thing after styling input fields that you kinda see. And so let's say we wanted the option to we wanna use some component properties in there. So let's go ahead and actually we'll start with actually just the text cuz then I can do that auto layout trick.

[00:01:21]
And we'll say that we have badge. We'll say Shift+A. Again, some of the stuff we've seen before, I could say apply variable cozy padding. That's the gap, I don't want that. At some point we'd need more variables. If I copy and paste, there's an import export variables feature which is super great.

[00:01:47]
You can take the spacing stuff they made before and pull in all the spacing. Also, if you have an existing set of components that use variables, and you copy and paste them between Figma files, guess what you get for free? Any variables that those components referenced. So if you find you need to port variables over, you can have something like a set of layers that reference a bunch of variables like a spacing chart and copy paste that or you can import and export the variables with a plug in.

[00:02:13]
You can take that tool that I made, get a full set of all the values that you might need. But all that is a little bit too tedious and not the main point at this point. So we'll use our roundedness though, and cozy padding is probably a little bit aggressive for a badge, but let's go with it.

[00:02:32]
Great, it does need a fill, so let's go ahead and use one of our variables for that. Let's go with primary 100. So looks kind of like a badge. Now, let's say that I wanted to give it a toggle for whether or not we should show a hashtag.

[00:02:53]
That session card, maybe it's hashtag JavaScript, hashtag Figma, hashtag whatever. So let's try that out for a second. There's a hash tag icon in most component libraries as well. Let's just make this for instead. Cool. So what I wanna do now is I wanna say, hey, let's make this is a component.

[00:03:22]
And Command Option K makes it a component. You can see that now that I have components on more than one page, it's using the page names to create a hierarchy for them. I can create a badge. Now this badge is fine. It works. I could probably stand to use a drop shadow, cuz you I like those, and maybe a little border, I don't know.

[00:03:48]
But it works for our purposes. But I want to do things. Right now, the fact that they can change the hashtag to anything is probably problematic. And to be clear, in Figma, you can guide people in the right direction, if you wanna stop people, it's not even worth trying.

[00:04:03]
But we can guide people. And so if we go here, check this out, there's a new pane here. It's called properties. I can add a bunch of properties. Let's start with boolean. Boolean is a true or false value. Text is a String, so let's say Boolean which is Is hashtag one word or two?

[00:04:33]
What's the consensus in the room? We're going with one. And we'll say it but its value is false. And that can go on this layer. And you can see I got this little subtle icon that I probably would have never noticed before. It says apply Boolean property, which is a hashtag, and that was set to false by default, right?

[00:04:53]
So now if I go to any of these components, I have a toggle where I can toggle whether or not it should have the Boolean or not. Right, and so those are all and they're independent. They're basically props passed into each and every one of these. The other thing we can do is, as we said, I can change this to whatever I want, right?

[00:05:12]
And for a button or a badge, that's fine, let them double-click, let them change to string, no big deal. But let's say we had a whole big component with maybe a lot of default text, and maybe one or two areas that you might want to customize. You can do that as well.

[00:05:26]
So you can go ahead like we did before and go to properties and hit the plus sign, but we're not gonna do that for a hot minute because I'm gonna show you you can also work the other way. Which is I can go ahead to this here, and because this is a component, it says the text is badge, but I can also click this and say the name is, let's call it label.

[00:05:49]
Right, and so now this is mapped to that component property of label, which happens to currently be set to badge. But here, I can go to this one, and now you've got the hashtag. Right, and so if you only wanna target very specific strings, right, you can do that here as well.

[00:06:10]
And there's some crazy stuff that you can do with this that you're not thinking about that we're getting to, cuz you're like, yeah, I could have just double-clicked on the string. But in a big long thing, it's very nice, but there would be some wild stuff we'll see a little bit later.