Shared Styles

[00:00:00]
>> So let's jump to this idea of shared styles. I've used some of these as I was kind of just putting together the workshop, cuz doing it myself and manually having to change all the colors seemed terrible. You can kinda see some of them that I've used as I'm going through this.

[00:00:17]
I have this idea, that's not just the hex value, but I have theoretically a set of colors that I had predetermined that I could just pick from, right? Wherever you work, there's probably a primary brand color, right? Twilio's was red, SendGrid's was blue, so on and so forth, or is for both those cases.

[00:00:43]
And so you have these colors in these palettes, so you're not just kind of guessing at the hex code or copy and pasting it, right? This idea that we would wanna have some shared styles in this case. You can create shared styles for really any of the following colors, right?

[00:01:01]
So we wanna use our brand blue, our primary button color blue probably, so on and so forth. Text, and you'll notice that we treat a textile and a color separately, right? This means that you can have different font weights and typography. But you can also have text be different colors, they're kinda two separate things.

[00:01:22]
You can take a given piece of text, you can set what font, what size, what weight, and the color has two independent styles. That might feel a little tedious but generally speaking, it's better. You can also take those cool shadows that you perfectly honed in, as we joked about in the previous section, and save that.

[00:01:42]
So you can just like, okay, cool, use the shadow that I used for everything. As we go through, layout grids, which we haven't discussed yet, you can also save those, right? Cuz theoretically, there's probably, for whatever app you're working on, one 12-column grid that you're using all over the place.

[00:02:00]
You probably don't have that many different grids that you're using throughout your application. You might have more than one, but probably not bespoke ones all over the place, right? And so you can kind of take any of these things and save them into kind of effectively variables or saved values and apply them to different objects as you kinda go along.

[00:02:21]
And that's useful because then, as soon as we kind of take this from being a hard coded color and associate it with like, okay, primary button blue, right, or warning red or what have you. And then you're like, we're changing the brand, right? We're no longer a blue company, we're purple now.

[00:02:42]
You're hopefully in your CSS or your SASS or whatever you had to CSS variable or something along those lines and you just change the value and you're good. Ideally, for your designs, you would love the same thing. I wanna change all the buttons, everything that references the brand color won't change at all, right?

[00:03:01]
And we can definitely do that. So let's talk about how to do it manually. And then one of my favorite quotes is Larry Wall who is the creator of Perl, everyone's favorite programming language, right? But his his quote is that the three most important virtues of a programmer are laziness, impatience, and hubris, right?

[00:03:26]
And like I said before, something is tedious, you should probably not do it like that. So we're gonna set one style, cuz a lot of times, yeah, I just need to set one thing, I need to store this value, I need to use it. But could you, this is even a very limited color palette, right?

[00:03:40]
I didn't even do the normal 50, 100, all the way to 900, I even stopped at 500 here, and only did 5 of every color. Could you make these colors one by one? Of course you could, do you want to? No, [LAUGH] you don't want to. So we'll look at how to automate that in a second.

[00:04:03]
One of the questions that I really love in the chat, is would it be awkward if we name something primary blue and then is now purple? Yes, right? The one thing I learned from people who work on design systems for a living, and designers, is that typically not just your primary color, but you tend to not name the colors that are kind of meaningful in your application by the color, right?

[00:04:33]
So for instance, if your primary buttons were all blue, and now they're purple, call it primary button blue, that's gonna be awkward forever, right? A lot of times you just call it primary, we give them meanings and if we ever change the colors for those meanings, and I mostly took this from console error versus console warning, right, as the inspiration.

[00:04:59]
But yeah, normally you name it after their meaning. And then you can change the color, depending on what you need to do in that case, brand especially, right? Generally speaking, there are some connotations to the colors, green means go, red means stop most of the time. But brand colors might change, acquisitions happen, executives change their mind, stuff happens, right?

[00:05:26]
So we tend to not name them after the colors. This is not an official design advice, this is my personal opinion that you're gonna get, even though you didn't ask for it. I mean, technically there's a question I can vaguely use that. What I tend to do is, for like my actual UI, I'll have these warning, dangerous, success, information, brand, right?

[00:05:48]
But then in my general library, sometimes orange means a warning or a danger or whatever. Sometimes I want something to be orange. If I wanted to given name to be orange for a given reason, I don't wanna have to be like, cool, it's actually gonna be warning 200 when it doesn't mean a warning, right?

[00:06:07]
So for my just general color palette that I have saved in my team library that we'll look at later, I tend to name them after colors. And then as I'm putting down the basis of the design that I'm working on, I will then attribute those colors to their meanings and use the meaning in the actual UI, right?

[00:06:22]
But we're gonna do it with the actual names that are not signifying any color. So again, if we change the brand eventually to purple or whatever, hot pink, you can just change that and it's still the brand color, none of your CSS code changes, right? And none of your design tokens change either as well.

[00:06:43]
Because, yeah, if you use that name as a variable in your code, now you have the problem in both places. But nobody wants that. All right, so let's just talk about how to make a shared style. And then we'll talk about how to do it at scale. So let's say hypothetically, I had a bunch of these models, right?

[00:07:04]
In fact, let's go ahead, I'm gonna grab this, I'm gonna make, actually let's get it in place, let's do this first and then I'll make a bunch of copies. Okay, if I select this frame here, you see I got basically two shades of cornflower blue. There's the Crayola box, I had it as a kid, it all come back to me now.

[00:07:27]
That was the button that lets me select everything that is that color. But what's this other one? These four little dots, that obviously means style. I can click that. And you probably, if you're just using Figma for the first time, I think it just gives you fuchsia and another color in there.

[00:07:47]
I will show you how to change this and update this later. But you can theoretically pick from a color that you have in your palette. The chasis, iris is the other ones, fuchsia and iris come by default. So you can go in here and you can pick one of these colors or you can take the current color, hit the plus button, and you can give it a name.

[00:08:08]
So I can name it, let's call it cornflower blue, even though we said we weren't doing that, we're gonna delete the style in a second. Cornflower Blue, Create Style, and now you can see instead of the hex code, it is Cornflower Blue. And ladies, I don't, what's the other clip?

[00:08:26]
The hardest things in computer science are naming things, cache invalidation off by one errors, the two hardest things. Darker Blue. All right, so I've got those two, and we got that white but we're not gonna deal with it. So I can grab this and now they all reference these two styles that I just made.

[00:08:49]
We'll go ahead and make another one here. Zoom out just slightly. Move that sticky over. And now, let's say I was using these colors all throughout my design, across all these pages, so on and so forth. I can actually go ahead and either, if I go the Inspect tab when I have nothing selected or the Design tab but I have nothing selected, I can see here are all my styles.

[00:09:11]
So I can say, okay, this blue, I'm gonna hit these two little sliders here, and guess what we're going to be? It's kinda fuchsiaish, purpleish, you can see that changed across all of them, right? And we can do the same for the darker blue. Let's pick something obnoxious, let's do a lime green, Right?

[00:09:41]
And they can change across everything. Yeah.
>> Does Figma give you color contrast by default?
>> Figma does not, there are plugins that you can install that will kind of let you select a given, I use Stacks, I think it's not free. But there's a bunch of free ones as well where you kinda give a selection and it will give you the double A and triple A ratings for everything as well and you kind of adjust that and figure it all out.

[00:10:04]
Okay, so that's how we make one style, and I can do that for individual things one by one, right? That sounds tedious, right? I say it sounds tedious because before I learn this technique, that's what I did for a while, and I don't ever wanna do it again.

[00:10:24]
So let me save you that and we'll kinda talk about how to handle this.