How to create & use Color Styles in Figma

Hi everyone, this video we're going to look at Color Styles. Color Styles is a way of saving your colors to reuse, we can, over here you can see, we can give them cool names, and it means that later on if I want to update it, I can go through, update this style, and you can see, all the uses of it have been updated, plus we can share it with other projects, and other team members, so we've all got consistent colors throughout our project, let me jump in now and show you how to make them. 

All right, let's look at creating our first style, styles are great because-- at the moment I'm just using the Eyedropper tool, I'm like Eyedropper tool, 'I' on the keyboard, and I'm picking colors, that's great, but this thing here, you drag this around to every document, it's a bit of a pain, and you can get away with that for quite a long time, but there's going to be a time where you're like, actually, I just need them in a specific spot, my styles, and I want to be able to share these styles, both with myself and other documents, and share them with other people in the team, and when I update the style, all the uses of it, throughout, all my documents change, that's the handy thing. 

So you understand what a style is, how to make it? So what we're going to do is we're going to say, you are going to be a style, and you do it, see this, like four dots here, that's the little bit, everyone has a style. So we can make a Stroke Style, we'll do later in the course, Effects Styles, there's Text Styles, it's this four little squares, so you click on that, and you hit '+'. Say I want to add a new color style to my group, you might have some styles down here that came as defaults from Figma, but ignore those for the moment, we're going to do styles for this document. 

So when it comes to naming, this, actually, what I'm going to do for this one, you wait there. All right, I've decided this is my primary color, and that's my secondary. I'm going to use this a lot more. So with this one selected I'm going to go to my four dots, and I'm going to go '+', and in terms of the naming, this is my primary color, you know, as a freelancer you work on lots of different projects, I'll put the initials of the company, just, you end up having like way too many primaries. 

If you are working in a company, working specifically internally in a company, you might only need to call it primary, because, where you work-- so we've got this, and then when it comes to the naming conventions, there's a couple of different ways. I'm just going to go 1, 2, 3, for the different primary colors, all the different kind of tones for it, could be A, B, C, doesn't really matter, there are some kind of general kind of industry standards, but it doesn't really change anything, it's just something personal, so 1, 2, 3 works really well, Other people use percentages, so they'll use a kind of fixed color, and instead of like mixing new colors, kind of what I did, they'll just knock it back, they'll just say the tone is like, this first one is like 50% of the original color, you'll see that quite a bit, you'll see 10, 30, 70, you know what percentages are. 

The other way to do it is a bit more, it kind of pulls from CSS, which pulls from old Lino Type kind of fonts. So basically people use hundreds, so that is, that would be 100% this color is 1000, a teeny tiny version of this color, like the lowest it can go is 100, it's a bit weird, I know, it's just really common, you'll see it, you'll see it mainly in fonts, have you come across that, especially with web design, the Bold won't be called Bold, it'll be called, like 700, that's the code version for Bold. So we can do that for colors as well, let's say, if we were doing this, I'd call this maybe 100, I call that one, maybe I call that 300, giving myself some room to go a little bit lighter, at 200 and 100 later on, if I need to. 

So that's really common as well, but let's just do 1, 2, 3, so I'm going to copy you, save it, you, you, plus you, and 2, very exciting. I'm going to speed this up, and I will see you in a sec. If you accidentally hit the button, it's not because-- this one here needs to be called secondary, how to edit your style? So once it's made and you need to change it, either the color or the name, you can-- you can't right click it here, because I just tried, click it once, and down here, you can right click it and go to 'Edit', 'Style'. 

Yours is probably set like that, with some, maybe some other ones in there,. from some other document Figma gave you, but here you can right click it and say 'Edit', 'Styles', and then go into here, and this is going to be my 'Secondary'. You can adjust the color here as well, but I'm just adjusting the name, give it a description as well, you might be the first person. Actually, I like, big design systems might give descriptions to colors, to let people know what and where to use them. I'm going to keep going through this, we'll go back to fast forward mode. 

We're getting to the grays, it would be very hard now, to do 1, 2, 3, 4, 5, nothing wrong with it, but I feel like, even just looking at these colors, I'm going to probably need another one in here, because it's too big a gap in here. There's going to be some sort of user interface thing, that I'm going to need to have something in between. So I'm going to leave myself some room to move, I'm going to mix up my naming. So for the grays I'm going to use that kind of 100s naming, so I'm going to start here, and I'm going to say, you are "Gray', and this one's going to be my '100', and what I'll do is, this next one, I won't call it 200, I'll give myself kind of space in between to say, you are-- so this one is 300, just in case later on, I can squeeze, I can say, oh man, I really need a 200, and it's not going to mess up my numbering, I can just put a 200 in here and go on my merry way. 

So let's carry on. I'm back, I forgot gradients, so this one here, you can apply the same sort of way, so you can make it a style, so this one here, I'm going to say, you are a Style, and this one's going to be called 'SH Gradient', and this is going to be A 1, let's do '1', and something slightly different, is we-- I've made that one just for fun, so we've got our styles, it'll appear in our styles. The one thing it won't appear in is, if I go, you, and I say, you, and remember, down here, local colors, it doesn't appear down here, it might do later on, but at the moment you have to go the official way, which is good, there you go. I'm going to lock it into my SH Gradient.

Oh, another bonus thing for the people that hung around, is you can drag these things, if you click off in no man's land, you can say, actually, I want these ones to be up here, does nothing except gets your kind of like Feng Shui all nice. If you get them, you add one later on, you're like, actually I use that all the time, so it's going there, amongst the colors instead of the grays. All right, thanks for hanging around to the end, thanks, brain, for reminding me about gradients before I moved on. All right now, on to the next video.