Color styles with Figma

- [Rik] For the moment our logo mark is in black and white. Which generally is a good span for visibility. So I want to make sure this is clear before I start to add colors to it. So how do we add some colors to this? Well, I have some colors here. And what I could just quickly do is just say this is green. This is pink, and then just fill them in. So the quick way to do it is just pick things, and then I can just actually go and select things like this. All that is pink, or that is green.

Now the only kind of thing that we might want to think about is let's say Aria comes back and says, "We want to change the colors," and the issue with that is that we have to go through everything and change all of the colors. Now look closely you can see down here there's document colors, so I can pick the green from here. Can pick the pink from here, and you can see that it just aligns them. But if I change this pink, let's say I just change this pink very quickly to a red. This one doesn't update.

So what I want to do is link these two things together. Now this is built as part of Figma, and it's basically called, well what's it called, it's called a co-style. So here what I can do is create a new style. So I've selected this blue color in here. And what I'm gonna do is in the fill option, I'm gonna select this four box thing here. I'm gonna add a new style, and unsurprisingly this is gonna be called blue. Now I want to call this one line blue-mid, 'cause this is the middle version of the blue.

You might want to be more descriptive and call it a royal blue for instance. So for now I'm just gonna create a quick style here. And do the same thing for all of these colors. So here I'm just gonna do this one as green-mid. I'm gonna do this one as salmon-mid, maybe we'll call it. Salmon-mid, and this one is obviously white. I'm still gonna add it. So this is white, technically white light, or white-mid. And this one here's a kind of like black. So we'll call it a black color, and we'll create our styles.

So why do that? Well again if I want to change some of these colors a little bit later they'll sync together. It's a really useful tool as part of Figma. So what I can do in my A, is I can actually go to my fill for this polygon, and instead of this being just a random color, I can actually click here, and pick a color style. So this one is a salmon-mid, I can actually change this one to maybe the green one. And watch what happens if I change green.

Maybe the green is too dark. What I can do in here is actually break this apart, and actually un-sync them. But if I sync this up, I can double click on here. Maybe I can't. Edit style, if I change the style, watch what happens. The green is inter-linked, which is really useful. Because if I change one of the greens anywhere, it updates everywhere as well. Now I don't want to do this, I'm gonna keep it as it was. But because I've got this in place now I can start syncing things up.

It's a really useful tool, actually, something that I use quite a lot. So again, in my selection colors here, I want to pick out the one inside here. So it's together. These are gonna be this rectangle color. Isn't gonna be a color, it's gonna be a style. It's gonna be pink. So here you can see this little bit of a line in here, so maybe what I want to do is just mask this other part of here.

Maybe I want to align it properly, just tweak it along. There we go. And in here I can just start adding these colors. So which color is this? This is the kind of background color. Maybe I want to make this one blue for instance. I can click blue there. And I'm just gonna go through and add all these colors in. So this one is which one? Again I can just play around with this, then it's up on corner.

This one is maybe we'll try that as blue as well. Maybe this one in here we'll change this color, the top right, maybe that one's a green in the color styles as well. And then the last one is the round corner. This one is gonna be pink. So we'll add the pink to this. Again, I just need to slide it in here. And add the pink. Where has it gone? There we go, oop, wrong one.

Selected the wrong thing there. There we go, cool. So we have this kind of choice to do things now. And if I wanna kind of change any of this stuff around all I would need to do is go back to my colors. Maybe mid-green is completely wrong, maybe I don't want salmon anymore, and I can actually right click on here. Right click here, edit style, and I can change this to orange. And then it changes everywhere else as well. So this is a really useful tool.

It's called a style in Figma, and it's something I would definitely use quite a lot. 'Cause if you're changing a lot of these things around it's really useful.