Hi everyone, I'm going to show you how to make Gradients in Figma. We're going to do nice subtle gradients, in my opinion, we're going to build a time machine, go back in time to the 80s, and make this gradient, and then 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. 

To make a gradient, draw a rectangle, I'm going to do it on my 'Mobile Hi-Fi', 'Product Details' page, because I need it for later, and I'm going to drag out a rectangle, any old size, and to change it, to have a gradient from my Fill, click on this part, actually, click on the little square there, and go from solid to either one of these. 

So Linear is going to be that, Radial is a round one, Angular, I don't use any of them except for Linear or Radial. So we're going to use Linear in this case, and let's talk about how to adjust it. So click on either one of these to adjust 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 0, can you see the difference? 

So this one can be see through, I don't want it, I want the transparency all the way up, clicked on it, 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. 

So that's it, you can adjust it by dragging these points, the beginning and end, depending on what kind of gradient, and the direction you want. Same with Radial, 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 Radial one, you can make it circular, look at that, Circle Gradient, and maybe make it nice and big, so that it's kind of circular, kind of more wafty, anyway, that's how to make a gradient. 

To carry on with this course though, I want to make a gradient, based on some of my color palettes that I had before. So if you just came for gradients, that's enough, if you want to carry on with the course, I'm going to show a few little extra bits. Note, as well, you can add a gradient to rectangles and to our actual-- let's come out of that, let's click on Home page, let's say you want a background gradient 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, because 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, and in this case I'm going to want to do, like I'm going to use my interface, kind of color, remember that white or off-white I made? 

So the top here, it's full white, it might go to something like this, and down the bottom, transparency up, I'm going to pick something, that's just a little bit more, darker, is it good? It's not good. When you are dealing with kind of light colored backgrounds, you can change the background of the actual application in Figma. So Figma, you can just have nothing selected, so click off in the background, you see the background here, it won't change anything to do with your mock-up, but it's just like a way of going.

I want this to be darker so I can see the contrast in here nicer, but it does nothing to the kind of 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 going to do now is, I'm going to bring in my color palette, what did I do with it? I did it on the desktop, because I said, we're going to work on desktop, changed my mind, we're going to copy this, and I'm going to bring it over to my--

Actually, going to cut it and bring it over to my 'Mobile Hi-Fi', when I zoom out, I'm going to paste it up here, and I'm going to put it up there. Now the problem with it up here, 8 is too big, all right, nice and small, and it is just sitting in the root directory, ruining my lovely kind of Layers panel. So what I'm going to do, with them all selected, right click any of them and say, 'Frame Selection', and now they're all just tidy, they're in there still, but now they're all nice and tidy. I'm going to call this one "Color Palette", is that color palette? I think there's too many Ls, ah, I don't care enough. 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 there, 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. Let's try one more, I'm okay with it, what I'm probably going to do is probably grab that and go, so it's there, there's hints of it, but it's not there, and I'm going to add this to my color space. So I kind of duplicated it, I want it to be the same size as this, what is it? 52x52, you can manually type these things in, 52x52, zoom in. 

So I'm going to 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 think, like gradients might be, it might be coming out of me, put gradients in everything, for like the last 10 years. 

The other thing you can do is, if you're using something like Grabient, I showed you that, and you might be like, "Oh, I love, wow!" Who uses that?" Anyway, let's find one that has three colors, that are good. The 80s wants to know where its gradient is, here it is, at 90s. 80s 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, and you're going to go, I'm going to use one more gradient, I feel like these need to be separated. 

So I'm going to go, this, I'm going to go Linear, I'm going to drag it back to something normal, as in, just straight up and down, and what I want to do at the top here, is just paste in my Hex code, in there. So there's that first one, I'm going to put the end one in, and then you're going to ask, "How do I put a third one in?", oh good, glad you asked, click this one here, paste it into Hex, and then it kind of just did it for us, but it gets a bit muddy in here. So the designer's gone and picked a nice intermediatory 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, up to you. So that is gradients, that is enough, I will see you in the next video.