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

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 Make Gradients in Figma

How to Make Gradients in Figma

Lesson Info

37. How to Make Gradients 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