Variables Introduction

[00:00:00]
>> But like I said, for the rest of this time we're gonna talk about variables which are kind of a newer still in beta, so it's not fully feature complete. They've been out for a year though, and like they haven't changed. So when I say they're in beta, they're not like, and everything we talk about could change at any moment.

[00:00:14]
No, it's like they're in beta cause they're not done yet. They could change, but generally speaking they haven't. In the year that they've been around. So I feel other than them adding new capabilities, so I feel pretty confident talking about them, cool. And with that's called a segue.

[00:00:31]
So let's talk about variables. So variables again, this is one of the things we're explaining this to engineers becomes shockingly easy, right? I don't think I really need to opine too much about what a variable is. It's a value that can reference, yeah, it's a named value that you can reference some arbitrary value and use in multiple places.

[00:00:53]
If you change it once, it changes everywhere awesome. And there are a few kinds of variables, which I could read you this nice documentation that I wrote for you or I could just show you. So let's do that. So we have local styles, and we also have this local variables and that opens a nice table for us, right?

[00:01:19]
Years probably just be called collection, but I have been creating deleting collections in this file hundreds of times working on this workshop. So mine's now called collection one. I don't know why. I don't make the rules around here. And I have no variables, but I have a button called create variable.

[00:01:40]
And I can create see, I could have read you or shown you like the document I wrote which shows the four kinds of variables but here's the four kinds of variables. Color, number, string, Boolean. I don't think any of those need a lot of explaining. Those should be constants.

[00:01:55]
We all kind of like know from our life before. How we use them. That needs some explaining. But let's start with color. Since we saw that before, I can create a variable. I can call it, let's call this one white. That makes sense. The other thing I can do is I can right click on it, and I can hit Edit variable.

[00:02:15]
In here I can change the name I could change the just by double clicking on it too I can change the value here I can change the opacity and then I can determine where this color is allowed to be used, right? So in this case, it's like wherever colors are found, right?

[00:02:37]
But if I want to say, hey, this is only for text, right I can scope it just the text. Can't do that with styles. Or I can say it's just for borders. You can see that as we're building out a design system, we could have a variable called primary border, which is different than our primary background.

[00:02:59]
And you don't want somebody to use because we all get lazy, right? If want that to be the same purple as a background, or whatever, like you can actually kind of force good behavior. So that when you go do all those things are fine in terms of that one ticket that you're working on.

[00:03:13]
It comes when it's time to refactor the code base that all of your like past crimes come back. So we can scope it down to whatever it ought to be. We can also do this for numbers as well. And we'll just do like a quick one, which is like cozy padding.

[00:03:28]
I will show you better naming conventions in a second. But like as I'm just putting random values in here, I don't have a better idea. Also, I was used to 8 and 16 a lot, right? So let's say like eight is cozy 16 is normal and 32 is like comfortable I don't know.

[00:03:46]
So we'll say, eight in this case. And just to show you the scoping there as well, I can scope it to just something we can use for quarter corner radiuses, just for width and height, just for padding, right? And so where this is important is that engineering and design should be collaborating here, right?

[00:04:09]
Because ideally you have some kind of like system in the way you've structured your CSS or something along those lines. And to be able to have a common nomenclature makes everyone's job easier and again, you can then only assign these certain values if you want. The other really cool thing and where this becomes powerful and only if you use dev mode, which is this color syntax.

[00:04:32]
And me I care about web, which is that's a waste of my time, right? But I could say in this case, it was eight, I could say, depending on what I'm doing, I could say that this is like. That's a it would be 0.5 RAM, right? Or, I could say.

[00:05:08]
Right and have it mapped to a CSS variable, right and so now when I generate code, I have the CSS variable which yes I then like have defined eight, right? But then design decides you know what, no more cozy eight. Cozy is now 10. I just go change the CSS variable, move on with my life.

[00:05:29]
So there are lots of ways. I think for the padding and stuff like that, I actually made a tool, Because making variables one by one is really obnoxious. So for all those spacing ones, you can kind of like this will just generate one based on a 16. RAM value but this will create an entire JSON file, all of the variables and there's a plug in that you can import them, right?

[00:06:05]
Because like, I don't want to deal with this anymore. You can it's just JSON, you can figure out all the ways to generate whatever. So you do the opposite thing, which is like, hey, we have a bunch of these values in our code, write some script, generate the JSON.

[00:06:17]
If you download this file, you can see the structure of it. Took me a morning to stare at it, but you can do theoretically generate from your code base CSS variables the design team can use. And then we'll look at from Figma how to generate CSS the same way we did with that CSS gen plugin before.

[00:06:33]
We'll see how to do this here as well. But yeah, this will go ahead and you can get rid of any values you don't want, add some new ones, so on and so. Fourth. So we can do that also, as we saw with the colors, right? So let's pull back up that one based on UI colors, right?

[00:06:54]
And so we saw there was a way to create variables as well. So let's go ahead and we'll say that this is our primary or brand or what have you generate me and then color guide and create the variables. This went ahead and created this right in a place I don't want it.

[00:07:19]
If I go into local variables. I made a collection called colors where I've got primary like this is really named primary /50, right? Because like the slash works in variables the same way just the styles as a way to organize. The cool thing though is if you wanted to, you could like grab a bunch.

[00:07:41]
You can create a new one group and that does the slash nomenclature automatically. So if I call this one light, you get a little more hierarchy. I think you only get one or two as well, but you can theoretically create sections. But one of the things that's super interesting that you can do, let's move that up, from that 50 back up here, okay?

[00:08:06]
So I've got that color palette. And again, this is one generate, you can do this for all the colors that you need. And create all those color palettes and create them as variables. The web UI is super cool too, by the way you can put it again you don't have to use this Tailwind.

[00:08:24]
I know about it because I use tailwind but like colors or colors or hex codes do whatever you want with them. So you can like take any color you want and it will do the whole palette actually even show you it in action. And then like you can edit it and like change the color stops and all sorts of fun stuff like that and save them.

[00:08:42]
It's super cool. And there's other tools for just coming up with a whole color thing, but I'm not a designer. That's a different course for a different day.