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 create & use Color Styles 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:00:51
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 35:21
SECTION: 29
What next 14: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, this video we're going to look at Color Styles. Color Styles is a way of saving your colors to reuse, we can, over here you can see, we can give them cool names, and it means that later on if I want to update it, I can go through, update this style, and you can see, all the uses of it have been updated, plus we can share it with other projects, and other team members, so we've all got consistent colors throughout our project, let me jump in now and show you how to make them. 

All right, let's look at creating our first style, styles are great because-- at the moment I'm just using the Eyedropper tool, I'm like Eyedropper tool, 'I' on the keyboard, and I'm picking colors, that's great, but this thing here, you drag this around to every document, it's a bit of a pain, and you can get away with that for quite a long time, but there's going to be a time where you're like, actually, I just need them in a specific spot, my styles, and I want to be able to share these styles, both with myself and other documents, and share them with other people in the team, and when I update the style, all the uses of it, throughout, all my documents change, that's the handy thing. 

So you understand what a style is, how to make it? So what we're going to do is we're going to say, you are going to be a style, and you do it, see this, like four dots here, that's the little bit, everyone has a style. So we can make a Stroke Style, we'll do later in the course, Effects Styles, there's Text Styles, it's this four little squares, so you click on that, and you hit '+'. Say I want to add a new color style to my group, you might have some styles down here that came as defaults from Figma, but ignore those for the moment, we're going to do styles for this document. 

So when it comes to naming, this, actually, what I'm going to do for this one, you wait there. All right, I've decided this is my primary color, and that's my secondary. I'm going to use this a lot more. So with this one selected I'm going to go to my four dots, and I'm going to go '+', and in terms of the naming, this is my primary color, you know, as a freelancer you work on lots of different projects, I'll put the initials of the company, just, you end up having like way too many primaries. 

If you are working in a company, working specifically internally in a company, you might only need to call it primary, because, where you work-- so we've got this, and then when it comes to the naming conventions, there's a couple of different ways. I'm just going to go 1, 2, 3, for the different primary colors, all the different kind of tones for it, could be A, B, C, doesn't really matter, there are some kind of general kind of industry standards, but it doesn't really change anything, it's just something personal, so 1, 2, 3 works really well, Other people use percentages, so they'll use a kind of fixed color, and instead of like mixing new colors, kind of what I did, they'll just knock it back, they'll just say the tone is like, this first one is like 50% of the original color, you'll see that quite a bit, you'll see 10, 30, 70, you know what percentages are. 

The other way to do it is a bit more, it kind of pulls from CSS, which pulls from old Lino Type kind of fonts. So basically people use hundreds, so that is, that would be 100% this color is 1000, a teeny tiny version of this color, like the lowest it can go is 100, it's a bit weird, I know, it's just really common, you'll see it, you'll see it mainly in fonts, have you come across that, especially with web design, the Bold won't be called Bold, it'll be called, like 700, that's the code version for Bold. So we can do that for colors as well, let's say, if we were doing this, I'd call this maybe 100, I call that one, maybe I call that 300, giving myself some room to go a little bit lighter, at 200 and 100 later on, if I need to. 

So that's really common as well, but let's just do 1, 2, 3, so I'm going to copy you, save it, you, you, plus you, and 2, very exciting. I'm going to speed this up, and I will see you in a sec. If you accidentally hit the button, it's not because-- this one here needs to be called secondary, how to edit your style? So once it's made and you need to change it, either the color or the name, you can-- you can't right click it here, because I just tried, click it once, and down here, you can right click it and go to 'Edit', 'Style'. 

Yours is probably set like that, with some, maybe some other ones in there,. from some other document Figma gave you, but here you can right click it and say 'Edit', 'Styles', and then go into here, and this is going to be my 'Secondary'. You can adjust the color here as well, but I'm just adjusting the name, give it a description as well, you might be the first person. Actually, I like, big design systems might give descriptions to colors, to let people know what and where to use them. I'm going to keep going through this, we'll go back to fast forward mode. 

We're getting to the grays, it would be very hard now, to do 1, 2, 3, 4, 5, nothing wrong with it, but I feel like, even just looking at these colors, I'm going to probably need another one in here, because it's too big a gap in here. There's going to be some sort of user interface thing, that I'm going to need to have something in between. So I'm going to leave myself some room to move, I'm going to mix up my naming. So for the grays I'm going to use that kind of 100s naming, so I'm going to start here, and I'm going to say, you are "Gray', and this one's going to be my '100', and what I'll do is, this next one, I won't call it 200, I'll give myself kind of space in between to say, you are-- so this one is 300, just in case later on, I can squeeze, I can say, oh man, I really need a 200, and it's not going to mess up my numbering, I can just put a 200 in here and go on my merry way. 

So let's carry on. I'm back, I forgot gradients, so this one here, you can apply the same sort of way, so you can make it a style, so this one here, I'm going to say, you are a Style, and this one's going to be called 'SH Gradient', and this is going to be A 1, let's do '1', and something slightly different, is we-- I've made that one just for fun, so we've got our styles, it'll appear in our styles. The one thing it won't appear in is, if I go, you, and I say, you, and remember, down here, local colors, it doesn't appear down here, it might do later on, but at the moment you have to go the official way, which is good, there you go. I'm going to lock it into my SH Gradient.

Oh, another bonus thing for the people that hung around, is you can drag these things, if you click off in no man's land, you can say, actually, I want these ones to be up here, does nothing except gets your kind of like Feng Shui all nice. If you get them, you add one later on, you're like, actually I use that all the time, so it's going there, amongst the colors instead of the grays. All right, thanks for hanging around to the end, thanks, brain, for reminding me about gradients before I moved on. All right now, on to the next video.

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