Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

How to make gradients in Figma

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

Downloads & Exercise files

Download Exercise Files

Transcript

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. 

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024