Skip to main content

How to Make Gradients in Figma

Lesson 37 from: Figma UI UX Design Essentials

Daniel Walter Scott

How to Make Gradients in Figma

Lesson 37 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

37. How to Make Gradients in Figma

<b>In this lesson we will show you how to create gradients in Figma. We will create some basic ones and more advanced gradients.</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 Make Gradients in Figma

Hi, everyone. I'm gonna show you how to make gradients in fig A. We're gonna do nice subtle gradients. In my opinion, we're gonna build a time machine. Go back in time to the eighties and make this gradient and then uh we'll make round ones that are really, really bad. I'll also show you how to change the background color. You're like oh the background's dark. How do you do that? All right. Let's jump in gradient time. OK to make a gradient, draw a rectangle. I'm gonna do it on my mobile. Hi fi product details. Page cos I need it for later. OK? And I'm gonna drag out a rectangle any odd size and to change it to have a gradient from a fill. Click on this part. OK. Actually click on the little uh square there and go from solid to either one of these. OK. So linear is gonna be that radio is a round one angular uh I don't use any of them except for linear or radio. So we're going to use linear in this case and let's talk about how to adjust it. OK. So click on either one of these. OK. To a...

djust the beginning or the end and drag this around, drag the hue slider, find something you like click on this side. This one by default is a color but the transparency is down at zero. OK. Can you see the difference? OK. So this one can be see through. I don't want it. I want the transparency all the way up, clicked on it and I can drag it around and pick the world's worst gradient. Is it the world's worst? Actually, I've done worse better anyway. Um So that's it. You can adjust it by dragging these points. OK. The beginning and end depending on what kind of gradient in the direction you want. OK. Uh Same with radio grab this. You can have your beginning and end point and see that dot There. It doesn't make a lot of difference when you are doing the linear one, but radio one, you can make it circular, look at that C gradient and maybe make it nice and big so that it's kind of circular kind of more lofty anyway, that's how to make ingredient to carry on with this course though. I want to make ingredient based on. Yeah, some of my uh color palettes that I had before. So if you just came for ingredients, that's enough. If you want to carry on with the course, I'm gonna show a few little extra bits. Um uh note as well. You can add ingredient to rectangles into our actual um let's come out of that. Let's click on home page. Let's say you want a background ingredient in your frame. You don't have to draw a rectangle and put it at the back. You can actually just, I will do it to this one. Cos it's already got something in it, which is if I click the background details, even though it's kind of above rectangle watch this, I can change the fill to linear and it's still behind it. OK? And in this case, I'm gonna want to do like I'm gonna use my interface um you know, kind of color. Remember that white or off white I made OK? So the top here it's full white, it might go to something like this and down the bottom transparency up. I'm gonna pick something that's just a little bit more Taka. Is it good? It's not good? OK. And when you are dealing with kind of light colored backgrounds, you can change the background of the actual application in fig A. So fig A you can just have nothing selected. So click off in the background, you can see the background here. It won't change anything to do with your mock up. OK? But it's just like a way of going OK? I want this to be, you know, darker so I can see the contrast and here nicer but it does nothing to the kind of uh presentation you won't see the background. Well, yeah. There's nothing on this page. Where's my other page there? It is there. So that background color is just for your own viewing pleasure. What I'm gonna do now is I'm gonna bring in my color palette. What did I do with it? I did it on the desktop because I said we're gonna work on desktop. Changed my mind. We're gonna copy this and I'm gonna bring it over to my actually gonna cut it and bring it over to my mobile wi uh Hi Fi, I'm gonna zoom out. I'm gonna paste it up here and I'm gonna put it up there. Now, the problem with it up here a it's too big. It's nice and small and it is just sitting in the root directory. OK. Ruining my lovely kind of layers panel. So what I'm gonna do with them all selected, right, click any of them and say frame that selection and now they're all just tidy. They're in there still. But now they're all I said tidy. I'm gonna call this one color palette. Is that color palette? I think there's too many L's. Ah, I don't care enough. And so yes, there is my color palette and I'm going to pick a gradient probably based on some of this. I have no idea how this is going to go. Let's have a go at it. So let's go in here. It'll show you how I can go this color. I want to get from Uh Yeah. And then this color I want to get from the eyedropper tool from there. It's horrible. Is it horrible? Yeah, it gets muddy in the middle there, right? Ok. Let's try one more. I'm ok with it. What I'm probably gonna do is probably grab that and go you ink. So it's there, there's hints of it but it's not there. And I'm gonna add this to my, uh color space. So I kind of duplicated it. I want it to be the same size as this. What is it? 52 by 52. You can manually type these things in 52 by zoom in. So I'm gonna use that my gradient. I might create a couple more gradients that I'll use for buttons and stuff. But I don't know, I feel like gradients might be, it might be coming out of me put gradients in everything like the last 10 years. Um The other thing you can do is if you're using something like gradient, OK. I showed you that and you might be like, oh I love, wow. Who uses that anyway? Uh Let's find one that has three colors that are good. OK. Uh The eighties wants to know where its gradient is here. It is uh nineties eighties that crossover maybe so you can copy and paste these and I want to show you how you add more than one color. Let's say that you do love that. OK? And you're gonna go, I use one more gradient. I feel like these need be separated. So I'm gonna go this, I'm gonna go linear. I'm going to drag it back to something normal as in just straight up and down. OK? And what I want to do at the top here is just paste in my hex code. OK? And there, so there's that first one. OK. I'm gonna put the end one in and then you're gonna ask, how do I put a third one in? Oh Good, glad you asked. OK. Look at this one here. Paste it into hicks and then kind of just did it for us, but it gets a bit muddy in here. So the designer has gone and picked uh a nice intermediary color. So all you need to do is just click once you can have as many of these points as you like, I'm going to have three. There it is. But you can add more OK up to you. So that is gradients. That is enough. I will see you in the next video.

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