Skip to main content

How To Use Color In Figma

Lesson 11 from: Figma UI UX Design Essentials

Daniel Walter Scott

How To Use Color In Figma

Lesson 11 from: Figma UI UX Design Essentials

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

11. How To Use Color In Figma

<b>In this lesson we will show you how to work with color in Figma. You will also be introduced to the eyedropper tool for selecting colors.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

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

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

How To Use Color In Figma

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

Ratings and Reviews

Mahyar Hassid
 

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

Student Work

RELATED ARTICLES

RELATED ARTICLES