Hi, everyone. This video, we're gonna look at color styles. Color styles is a way of saving your colors to reuse. We can over here, you see, we can give them cool names and it means that later on if I want to update it, OK, 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, eye 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 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. OK...

? 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. All right. So you understand what a style is, how to make it. OK? So what we're gonna do is we're gonna say you are going to be a style and you do it see this like uh 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 effect styles. There's text styles, OK? It is four little squares. So you click on that, OK? And you hit plus, OK? Say I want to add a new color style to my group. You might have some styles down here. OK? That came as defaults from um from fig A OK? But ignore those for the moment we're gonna do styles for this document. So when it comes to naming this, uh actually what I'm gonna do for this one, you wait there. All right, I've decided this is my primary color and that's my, I'm gonna use this a lot more. OK? So with this one selected, I'm going to go to my four dots and I'm gonna go plus and in terms of the naming, OK? 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 primary. If you are working in a company, you know, working specifically internally in a company, you might only need to call it primary because you know, where you work. Ok. So we got this and then when it comes to naming conventions, there's a couple of different ways. Um, I'm just gonna go 123. OK. For the different primary colors or the different kind of tones for it. Ok. It could be ABC. It doesn't really matter. There are some kind of general kind of, I don't know, industry standards but it doesn't really change anything. It's just something personal. So 123 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 um you know, this first one is like 50% of the original color. You'll see that quite a bit. You'll see 70 you know what percentages are uh the other way to do. It is a bit more. It kind of pulls from CS S which pulls from old linotype kind of fonts. So basically people who use hundreds. So that is uh that would be 100%. This color is 1000. OK? 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. Ok. That's the code version of a 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 call that 300 giving myself some room to go a little bit lighter at 201 100 later on if I need to. OK? So that's really common as well. But let's just do 123. So I'm gonna copy you. Save it UU plus U into OK? Very exciting. I'm gonna speed this up and I will see you in a sec. All right. If you accidentally hit the button, it's not because this one here needs to be called secondary how to edit your style. OK? So once it's made and you need to change it, either the color or the name. OK? You can, you can't right click it here because I just tried uh click it once and down here. You can right click it. OK? And go to edit style. Yours is probably set like that. OK? With some, maybe some other ones in there from some other document figure we gave you. OK? But here you can right click it and say edit styles, OK? And then go into here and this is going to be my second dairy. You can adjust the color here as well. Ok. 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. So I'm going to keep going through this. We'll go back to fast forward mode. Ok? Um We're getting to the grays. It would be very hard now to do 12345. Nothing wrong with it. But I feel like even just looking at these colors, I'm gonna 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 and I'm gonna mix up my naming. OK? So for the grays, I'm going to use that kind of hundreds naming. OK? So I'm gonna start here and I'm going to say you are um great 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 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 gonna say you are a style and this one's gonna be called uh sh gradient and this is going to be a one. Let's do it one. OK? And something slightly different is we, I've made that one just for fun. So we've got our styles. You'll, 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. Here you go. I'm gonna 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 a 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. OK? If you get them and 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.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf

Exercise_Files_-_Figma_Essentials.zip

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

2,000+ classes ranging from fundamentals to advanced techniques.

How to Create & Use Color Styles in Figma

How to Create & Use Color Styles in Figma

Lesson Info

38. How to Create & Use Color Styles in Figma

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma