Custom Properties & Design Systems

[00:00:00]
>> Kevin Powell: So, in our Figma design, we have two sections colors and typography that are just taking all of the styles and variables that are in the Figma file and making them easy for us to see. You also have in Markdown files the values of all of these if you just wanna copy and paste a little bit faster in creating them.

[00:00:18]
But whenever we have these types of things, it's usually a really good sign that you should just make some custom properties in your own CSS. Just cuz it means these are the colors, the font sizes, and other things that are gonna be reused throughout your entire project. Again, we're thinking big picture, we're setting things up for a little bit of a success.

[00:00:36]
I will say, I call this a design system, anybody who's watching this right now, who does design system work, is going that's not a design system. This is a very simplistic version of one but it's the type of a very simple version. But if you were in a larger design system a lot of the same things we're talking about today will apply, but it just would take a lot more work to set up properly.

[00:00:56]
So we're gonna keep it with a very simple design system setting up through custom properties. So you might in the real world run into much more robust versions than what we're looking at in today's one. The other thing is, a lot of the time if you are working in a company and they do have a much more robust design system, you'll be set up working with what they have.

[00:01:16]
But a lot of the time you'll have a client throwing you a design file they happen to get from a designer somewhere that has nothing, or you'll get a file similar to this one. So it really depends on the environment you're working and everything else. But I wanna look at, when you are thrown into this type of one, how you can work, cuz again, the lessons will apply on larger projects as well.

[00:01:35]
And specifically for the colors in this one, what I wanna look at is purposely did it in ways that I run into a lot when I run into the real world. So if we go and look at the Figma file actually, it's in the top left, if you do go in there you can open the JPEG as well.

[00:01:54]
If you do come in and take a look at things, the naming of them is terrible. So we have a brown, that zoomed out more than I planned on it, we have like, brown-1, brown-2, brown-3, brown-4, brown-5. Then we have a primary color, then we have accent dark, accent light, we have a gray, a white, a red, a burnt orange, a teal.

[00:02:12]
So the naming is a little bit inconsistent along the way, the typography is a lot better. But one thing to notice with the typography that's important is we have the mobile sizes here and the font families that are being used. There is the title one here that only has one font size, and if we come take a look at the desktop version, there's two different ones.

[00:02:32]
And that's cuz in our hero section we have the really big font at the top that has two different font sizes. But on mobile that it's actually one size being used for both, we'll look at how we can tackle that type of thing in a little bit. But we're gonna start with the colors first, just cuz I wanna talk a little bit about how I'm gonna be naming things.

[00:02:50]
And if you are in Figma like we are now, and my UI is super small at the moment, I'm not sure it's smaller than it usually is, maybe I can zoom in, nope, that's interesting. But when you're in there, again, you can control click or in this case I am actually giving you the hex codes and the HSL and everything else that's here.

[00:03:13]
On the side menu you'll also see the color and you can get values from those areas as well. Yeah, but the easiest might be just coming in, grabbing either the hex codes or grabbing the HSL values. Whichever one you wanna work in, and VS code makes it easy to switch between them as well.

[00:03:33]
Really fast if you wanna know more about Figma as well front end masters does have a course on Figma that kind covers it all. So if you're poking around in here, you're not super comfortable, but you do wanna learn more about it, you can check out that course and learn a bit more about how Figma works.

[00:03:48]
But for today, we don't need to get too much other than the specific values that are in here. So, how can we do it? Well, we'll copy this color right here, just to start with, and I'm gonna copy that this is a choice you're actually gonna have to make too, when you start coming in with your custom properties.

[00:04:07]
I asked people what they like to do, and I got varying responses, some with layers. Some people like having a layer for root or to be your custom, even custom props, something like that. If you wanna separate those, you definitely can name it whatever you would like to name it, I have the habit of just including it within my base styles.

[00:04:28]
We're gonna run into some weird syntax highlighting issues in VS code when we do this that you'll see a little bit later. But for now, I'm just gonna throw it in my base styles, just cause it's my own habit. But definitely if you think that deserves its own layer you could put it in there.

[00:04:42]
We're not gonna run into specificity issues with the custom properties, so it's whatever you would like. And how I like to name my colors, when I don't have a color system that exists already. So personal project that you're doing or you have a disaster of a design file now where the names are really inconsistent.

[00:05:00]
My main thing is I start with a clr for color, I also will see after, whoops, that's not what I wanted. I also have a prefix ff for font family, fs for font size, anything like that, just cause it makes it a little bit easier, and we'll see different ways that makes our life easier within VS Code.

[00:05:20]
I put the name, so in this case, we'll stick with brown, we're gonna come in with the different types of names you can also have. Yeah, anyway, we'll come in with the different types of names we can have in a little bit, but when you have a color brown like this.

[00:05:35]
The system we were just looking at in Figma, we had brown-1, 2, 3, 4, 5, but then we have a primary light. We have the primary dark and other things, it's nice to have a consistent naming system and consistent numbering system. I tend to do my colors all based off of 500, with 500 being my quote, unquote, middle ground one, and then I would have a lighter version.

[00:05:59]
Would be a clr-brown-400, could be the slightly lighter one, and then a clr-brown-600, would be a darker one. The reason I use 500 for my middle ground is because that gives me 4,3,2,1 going up, and then a 6,7,8,9 going down, so I end up with an equal amount on both sides.

[00:06:22]
I also don't do 1,2,3,4,5, which could definitely work, I know a lot of people who work that way. But if ever you get a new color added, it's easy to come in here and do a clr-brown-450, and squeeze an extra one in there if you have to. It's not gonna happen often, but you never know, so I like doing it with my numbering like that.

[00:06:44]
The one weird thing that I do though is I look at, if we come back to here, with all these browns that I have, I don't have a light brown. I don't want this to be my middle brown, cuz in my mind, if new colors were added to this site.

[00:07:00]
Or new browns were added, they'd probably be lighter than this one, and this would probably be my darkest one all the way over here. So if I grab this one, I'd actually have that darkest one as my --clr-brown-900. And I would go from there, the other thing is, I do like having all my colors in HSL.

[00:07:24]
It's just my own habit, cuz then it makes it easy for me to adjust things if ever I have to. In VS code, if you hover over the little color blocks that should automatically be coming in, it shows you get a color picker. But if you click on the hex code at the top, it will change it and cycle through the different color modes so you can switch things to the HSL really easily if you want to.

[00:07:41]
For this, it's really a little bit of an approach to going through them, I was nice to you all. And if you come into the lesson page, I did provide the colors I'll be using with the names I'll be using. If you do wanna copy and paste them instead of having to get each one directly from Figma, it's good to know how to get them from Figma.

[00:08:02]
But yeah, just to speed everybody up, I think that's one of those things we're not learning much by copying and pasting 15 values over. So if you do wanna grab them from the course page, you can do that, and just paste them in right there. The one thing you'll notice is I did do a white here, you could also do a I often call these neutral.

[00:08:21]
So neutral 100, and my white is often a neutral 000, but the naming here could change depending on how you wanna set it up.