Transcript from the "Components" Lesson
[00:00:00]
>> Again, we still have that problem that we saw before in this example, up here, which is changing anything about any course card does not affect any of the other course cards, right? What I eventually would like to do is get this to the point where it's like, okay, I'm working on a design actually these should all have white backgrounds, right?
[00:00:25] If I change this one, it only applies to this one. I want this idea of like, I have buttons. [LAUGH] again, if you wanted to imagine you had a UI with hundreds of buttons, hundreds of list items, hundreds of checkboxes. You're like, I'm done with this border radius of eight, we're going 16, right?
[00:00:42] I think that would make your checkboxes look like radio buttons at that point, but regardless, right? Or we're changing something about the space and your padding, you don't wanna have to go all the way through your designs and change everything. The idea is we wanna say, this is a button.
[00:00:58] This is what a button looks like. However, we also don't wanna live in a world where every button has to say the word button, right? There are things that we wanna share and things that we want to override. Now, how do we do this in front end engineering?
[00:01:12] Well, we will usually make, we write a bunch of jQuery just modify the DOM right? Just query selector all and just modify those things right. But, these days for the most part, like many of the popular frameworks have some kinda concept or notion of a component that we can throw onto the page.
[00:01:30] And as we change the component, so does every instance of it in our UI, that we implement with JavaScript, or TypeScript or what have you. The same is true in Figma, and there's a lot of parallels. What is super interesting for us in our very specific discipline is the inheritance model of components works very similar to the inheritance model in JavaScript, right?
[00:01:56] So in JavaScript unlike a lot of other object oriented programming languages, you don't have a class per se. There's a syntax called class but the inheritance model is prototypal inheritance means, you have an object. And then you can have other objects that if they don't have the right property, they look to their prototype object.
[00:02:13] And like, yeah, I inherit from this other object over here, but I don't know what my title color should be, go ask that. Right but if on that child object you say like know your heading color, it's red, but mine is red, but all the other ones will still refer to that apparent components.
[00:02:31] So basically you can take anything in your figma UI and be like I'm gonna use this again right if you do that you can turn it into a component. And then you can just drag in additional copies so I'll show you what it looks like in practice right, theoretically, I did not.
[00:02:47] I don't wanna talk about how many times I changed the color and the fonts and the line heights in this, right? It's not really important. I don't wanna talk about how many times I changed the border radius or the stroke. It's not useful but I didn't have to worry about it cuz I didn't have to go change each and every one of them.
[00:03:02] If I wanted to add a new sticky note I can just drag it in, right? I could override the text, new text, right? And it's got that uniquely, but it takes all the other properties of a sticky note. I can go ahead and let's say let me go to this base one over here.
[00:03:25] We'll explain based on the second sticky notes, you're now gonna have a border radius of eight. You know, let's just make it more ridiculous, 32. Right, you can see that not only do they all change over here, but if I go back to my components every sticky note in my mock up now has rounded corners, which is gonna drive me nuts in the next ten minutes.
[00:03:46] And I will have to change it back probably during a break because I won't be able to take it anymore. But for now you can see that they all kind of inherited that. So how do we do this, right? The nice part is not like you have to go to a special place.
[00:04:01] And make special component classes. Now, you can literally take anything that you like and make it a component and then use it other places. Just because you like that famous Jurassic Park line. They were so busy asking whether or not they could, they didn't ask whether or not they should, right, to know that all buttons are based off of one button somewhere in your UI.
[00:04:27] It's probably not great. Can you right click and go main component? Yeah, sure but there we're gonna see some strategies for how you organize your components and how you set them up that will make you happier as time goes on. But the concept conceptually is any layer can be turned into a component and can be reused certain parts so, that component can be overwritten not all of them.
[00:04:51] And we will have to do is jump through some hoops and do some tricks to do some, like more advanced things, which we'll see. But this is the general like conceptual framework that we're going to kind of dig into for the next little bit, okay. Okay so what might make a good component I mean common UI elements like buttons.
[00:05:08] Checkboxes input fields maybe logo branding assets like theoretically originally when I was putting together this material that like have very nice art. Or whatever that I had that was a component cuz I was still tweaking it and stuff along those lines and I was making a whole bunch of nav bars, I just wanted them all to change.
[00:05:27] That's a possible component as well. If you're developing for iOS, you might pull in a bunch of the standard iOS component. That's right like the standard IOS button stuff along those lines, not just your buttons and things that you're building but the standard like native pieces as well.
[00:05:44] That's true honestly for the browser as well to stuff like post it notes that you plan on using even to like document your UI as well. So that is also a thing that could definitely happen too. We talked a little bit about this prototypal inheritance that's the thing that no designer will ever explain to you.
[00:06:05] But like a daily and maybe that brings some kind of bell if not, you don't need to know that in order to do this. Okay, things you can override you can change the text in any component as we saw with the posted note. You can change a lot of the colors, you can change the shadow in the blurs, you can change the layout grids, you can change nested components which which we'll get into.
[00:06:29] The things you can override is not as important as the list of things that you can't override. There we go, which is the order of things, right? So if I wanted to grab this title and move it, I can't. I can't even though this is an auto layout, I can't move the order of the components I can't really change its position at all right?
[00:06:55] Any constraints, the bounds of text layers, I can't add a new component in here. There's an asterisk, I can cheat. I'll show you how to cheat a little bit. But generally speaking, I am somewhat locked in to the general structure of this component that I can't really change.
[00:07:14] But there are some ways, once you kind of like conceptually wrap your head around it. There are ways to do most of the things that you want, if not all, but most. So we've got that kind of in place. So how do you create a component? I said, you can take almost anything.
[00:07:30] So here's like a card component that we made before, or a version of that. If I can grab this I have a bunch of different options. Cuz obviously that's the symbol for a component, right? I can go hit Create component, as you can guess from the hotkey. I can also hit Option + Cmd + K, and that will turn something into a component.
[00:07:51] So let's start. Let's turn this into a component. In this case I'm gonna hit Option + Cmd + K. All right, it changes subtly you notice that this frame is kind of blue and has a blue word this one's now purple that means it's a component. That's not the important part the important part is, it now lives in your assets, right?
[00:08:11] And your assets is a collection of all your components, either your components, or if you publish a library, which we will talk about the very end of this. It's a collection of all your components. So now, if you wanted to drag in another one of these, you can drag in a whole bunch.
[00:08:26] And I want to say what border races now 32 they all change, right? So you can create a very kind of powerful system around this. But I could theoretically change this one to lots of colors. So that's what we call an override, right? This one has this instance component had something changed versus the main component.
[00:08:56] This one did not. So I could theoretically say, rainbow you'll notice the one that had never had the text changed, gets the update, but the one where I overrode the property does not get the update. And so here, let's go ahead and we'll say, hey, the text color here should be this color.
[00:09:19] They all changed. Let's go change this one to its own new color. All right, so this has now got an override on the color. So if I go ahead here and I changed this again let's change it to Switch back to black. Right, this is override with the text content this one had an override of the text color they inherited the change but not in the places where they overrode it.
[00:09:48] This is the same way like inheritance and JavaScript might work as well. The metaphor applies even if it is a totally different paradigm, right? The whole conceptual framework works. So this gives you a lot of power. It means you can drag in a button, change the text of any given button.
[00:10:05] But if you change like the label in the main component, it's not like every button in your UI. Is automatically going to receive that update. It will simply only the ones that had never had that overwritten. If you make one particular button a different color, it will remain that color, right?
[00:10:20] And you can combine this with styles and stuff along those lines. I will probably say this a few more times today, but I'm gonna say it now and I'll repeat it because it bears repeating. My general rule is stuff that I can put in styles like, the color, fonts, I tend to leave that to the styles and a lot of cases.
[00:10:39] And, I can override a style too, I can detach the style, and stuff like the question we had earlier. Can you store border radii in a style? You can't, but that kind of stuff, the structural pieces I leave the components. And the styles I leave to the styles right I might have a danger button or secondary button that is fundamentally like different from the primary button.
[00:11:06] But like the color red that it is I will store in a style so I can change all of them all at once. And that way I can use the same color like let's say hypothetically I might have links I might have a button I might have a modal title they all use the same style.
[00:11:22] I can change what a danger color means in my application or the brand color separate from going into every component and doing my net. Okay, so let's look at create a component. We'll do this one together and then you'll work on input fields. I can make a button, we saw how easy it is before I can take this button as well.
[00:11:41] And all that we're gonna do is we'll go here and we're gonna say create component. Right I hit the little button now it is a component. You can see it here as well. One of the interesting things that you should note and we'll explore this a little bit more in a bit.
[00:11:57] How you organize your components is incredibly important by default, you'll notice that like, it got this it has components. Because the name of the page we're on is called components not because these are all components, everything is a component in here. However, this one is in a frame called Creating a component.
[00:12:17] So you look that Figma automatically tries to organize it for you, right? So as you're building out a design system on your own page, right, we'll take a look at, how you can do that. You might have a frame for all your buttons. Now they're all organized under one drop down, called, yeah, this case create component but I wanna hide all the course materials.
[00:12:36] I can see just a given piece. We'll see where this is somewhat interesting, as we get more advanced with our components, as we go along. But the way that you name them definitely has an effect. Also, if you're like, I don't I'll put them in frames. Okay ,that's tricky we did with styles before where we had a slash, in the name and that put it in a subdirectory will also work whichever one makes you happier, go for it.
[00:13:01] I'm not the boss of you.