Alright. I hope you're sitting down this video. We're gonna look at color. You ready City boom. It's green and black. It's not very exciting. I know I am going to try and convince you that you don't need a lot of colors. When it comes to your wire frames, you should probably leave it gray. But hey, we're learning about color in this video. Let's jump in and I'll show you what you need to know. Alright, to work with color um select on we're gonna use this big big rectangle here. That's the default color for fig m. All you do is click on it, OK? So now fill, click on it once and you get this little guy if you've never used a color picker before, this little dots where our color is, you can click him and drag them around, ok? So at the moment, you can only pick red, OK? To change it. This little hue slider here, drag it along to the kind of zone that you want it to be. I'm gonna pick some sort of greeny thing, ok? And then move this around, OK? To get the full saturation, no saturation li...

ght dark somewhere in there. Ok. Other things you should know about in here if you want full white, just click drag and drag it like past, you know, like just keep going and it'll be full white and either of these dark ones down the bottom are gonna be the same. Ok? So white, black or that one is black doesn't matter. And I'm gonna pick some sort of like greeny color so you could pick it from the brand. Ok? Or just pick like light blue is probably the most common kind of, you know, wireframe color. It's the default in like X and a few other ones. So we end up seeing this kind of like, hm T blue thing throughout. I'm gonna pick a slightly greener version. You pick anything you like other things to know about color is transparency down the bottom here. You can make things slightly transparent, which makes no sense unless I bring this all the way to the front. Ok. So I'm using my R square, you can see it's kind of covering things with a bit of transparency. I'm gonna go back to actually, I was gonna change that there at 100%. It doesn't matter whether you do it here, you can see it there 100% or you just type it in here and you say I want it to be 50 or same again, you can kind of use your up and down arrows to kind of go through it all. So I want mine to be 100. Perfect. OK. And if you are a bit more of a color nerd, then you might be like me. Ok. Hexadecimal numbers. That's the kind of like web version of a color. You might not like that. You might like the R GB versions. There you go. It's R GB A so you can store it transparency at the end. Red, green, blue, you might be mixing colors from maybe a corporate spec manual or something else. Um Other color ways. CS S hm You probably, if you're a developer, you might be working this way. OK. R GB A colors you can type them in there. Um hue saturation luminance. I don't often use, I use this quite a bit hue saturation brightness. Um Actually do I do it in this one. Probably not in this program very often. I do a lot in things like premiere and illustrator but not my hair and fig. So I'm going to stick to the Hexad number. Other things I want to point out is the eye dropper. So we've got this here. I wanna steal this color. So I select on it. Go to my field color. Click on the little eyedropper and you'll notice. Can you see up here? There's like a zoomed inversion and watch this. I can move it around. Can you see it just zooms in on things? So it's, you know, ours is pretty easy because we can pick this big rectangle. But sometimes you're trying to pick a teeny tiny bit of color from like that, but it's gonna be that weird light gray. OK. So eyedropper, I'm gonna click on this one. Same with this fella you eyedropper. You now to get to the eyedropper very often. I won't be going into the color and pick her to do it. So I'm gonna undo to get my grays back. So I select on it. There is the shortcut for I for eye dropper like I not eye the letter I OK. It's a shortcut. So selected it, hit the eye dropper. Click on that. There's a lot of that going on. However, you won't get that this all the same color for me and be resilient. Don't try and add a bunch of colors. OK? Keep it really just black grays, whites and you know a color just to set that up a tiny bit. OK? When you start adding color palettes to it, you again, start entering different parts. Uh you know to the conversation about, oh, is this the right color? Is it the right brand color? Just keep it generic, keep it gray. Then nobody's gonna complain. The last thing about colors is and down here can you see document colors? You're like, oh great. These are the colors that I've used already. OK. So this though gets mad big and not very useful and it's fine for the moment because you're like, OK, I wanna go back to that gray that we had before. There it is there. It's something that's been used. OK. Or there's that green, is that the green? It's the same green it gives. Yeah. Later on, we're gonna look at this and we're gonna look at team library colors. It's quite later in the document. Plus we're gonna look at something called color styles in the not too distant future where we kind of tidy it all up and get a bit more consistent, but document colors will show everything they've been used in this document. So it gets a bit mad, but that's what they are. All right. That's the basics of colors. Let's jump into the next video. Actually, we're going nowhere. It's driving you mad, it's driving me mad. You can't do that then. Uh So this needs to be bigger. We're gonna do some responsive buttons later on. But for the moment I can't live with, this needs to be bigger and this needs to be more in the center. One of the things I want to show you a little shortcut might be handy is because you want to like make it bigger on both sides. You can hold down the option key on a Mac or key on a PC. And when you're scaling things instead of just like dragging the edges and then trying to move it around. If you hold down the option key on a Mac. Ok. On a PC kind of does it from both sides? You're like, that's better for you. All right. Now we can move on to the next video. Is that even in the middle, Dan? Yeah, a range. Look that is better. Let's do the same thing with this one. I got closer with that one. Some of you like, why does he care so much? And then some of you would be like, oh my goodness, finally fix the button. Will he ever get rid of the full stop? It's not lining up properly, is it anyway, let's get on to the next video now.

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 Use Color In Figma

How To Use Color In Figma

Lesson Info

11. How To Use Color 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