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

Color Inspiration & the eyedropper 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

1
1
2
4
7

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

Transcript

Hi everyone, in this video I'm going to show you the places I go to for color inspiration. A bunch of different ones, and I will show you then how to kind of get them into Figma, using both the Eyedropper tool, copy and pasting codes, plus we'll install a plugin that will make me look bad, you'll see why in a bit. I eventually worked out how to use it, all right, let's get started. 

To get inspiration for color, you can just type it into Google, "color inspiration websites," there are loads of them, I'll just show you the ones that I use, is colorhunt.co. It's nice, the colors are great, they are, there's four of them that work well together. Same with color.adobe.com, if you go to here, they're both free, and I like this one, where you can go to 'Explore', and type in things in here, it's quite nice. 

You can say, remember, Sarah is Eco-conscious, I realize it's a bit-- it doesn't have to be green to make it Eco-friendly, but you might be using kind of words from the company's kind of values, it might be that it is about brightness and equality, or travel, or I'm trying to think of things that would have a good color, unique color, color palette to them. it might be corporate, you might put in corporate, because that's the feeling that you have, that this thing needs, and like a lot of these, find one, you like, oh, it's hard from this lot, I'm in this zone.

What you can do is, click on them, and you can see, if I don't hover over, see that hexadecimal number, that hash number, that's what you can copy and paste into Figma. Same with here, you can see the codes, if I click them, let's click on that code there, it's copied, it's the same thing from here, you can copy them and then in Figma you just go, all right, Sarah's Eco-friendly, so she's going to like green. Let's go to our desktop version, I'm going to draw a rectangle, and I'm going to fill it with, that's it there. You can paste it in with the hash, and I figure, more sorted out, there you go, is that green? You can copy and paste some colors in from these, kind of more official color inspiration places, there's loads of them. 

Now another one for gradients, I use Grabient quite a lot, there are lots of these around as well, in terms of gradient color, size, sort of gradients, in probably the next video, but you can just start to see really nice kind of gradient colors, and down here you can see the hexadecimal numbers. You can copy, paste these in for your gradients. So color inspiration is not something we're short of. 

Now these things in isolation are fine, often, what you end up doing, or what I end up doing, is going to things, remember, our inspiration Mood Board earlier on, I'm going to be using screenshots from Dribbble, and even, it's just colors, it might not be the right content, but the colors are good. What you can do in Figma, is, I'm going to go to my 'Mobile LoFi', this is up here, remember my dodgy Mood Board, do the same thing, rectangle, grab this, and we're going to grab the Eyedropper tool, and just grab anything out of here. 

You can see, I might be using this, I'm going to draw another rectangle, you, Eyedropper, something lighter, is there a lighter version of it? Yep, and just do something like this, pull the colors from that group. You can see hints of where I got my colors for my final one, you've kind of seen the final one already, that I mocked up, kind of getting ready. I kind of pulled some of this colors out, and then designed my own. You kind of start with other people's, and then you start using it, you're like, actually, too bright, not bright enough, not enough contrast, out of the scope of this class. 

Accessibility, in terms of color, in terms of contrast, is quite important. It depends on where you're going, and how much it's enforced. You should, as a UX designer, really be concerned with accessibility, you know, people, not everyone is, some people are colorblind, some people a little bit colorblind, a lot of men my age are color blind a bit, and the visually impaired need a really kind of high contrast ratio, so Adobe Color is kind of helpful for that. 

You might have a read of this, kind of outside of here, but here's an example, this one and this one, has a contrast radio of 3.331, put in your two colors, and you can see, 17 point or below with that color, or the regular text on that green background, fails the accessibility kind of test here. The contrast between these two, with this 18 point, and it's bold, those colors work, again, it's probably, just we're, yeah, we're creeping into doing too much in this course. So accessibility is outside of the scope of here, but just know that it's part, that it should be part of your process, and add that to the list of things to learn as a UX designer. 

One last thing is, there's bound to be a plugin for it, so I'm going to go to 'Browser Community', or we can go over here, 'Community', I can say 'Plugins', I'm going to say "color", I'm using the American spelling here, I look at the ones that have the most downloads, that seems to have lots of downloads. I've never used this one so let's figure it out together, so it's installed, which is great, back to this one here, I'm going to go 'Plugins', 'Color Palettes', and I imagine, there we go, color palettes, and it's just, I guess, built in, rather than going out to those websites, so you, you, looks like, oh, it looks amazing. 

I think I've just liked it, I don't know how to use this, nice choice, pretty good choice, looks amazing. What has happened? I have no idea, I have to read the documentation. Did it appear down here? It did not, I've added it, there we go, worked that out eventually. Those are just regular old rectangles that are grouped, we can start picking colors from. So all plugins work slightly different, thank you, color palettes, you made me look like, I don't know what I'm doing, there you go, you get the idea. 

Colors are everywhere, you should be pulling colors from, your discovery kind of sessions with the clients, you know what they're looking to do, they might already have corporate colors, and you're kind of stuck using those, but sometimes we get all the freedom, and we can go look for color inspiration, and use that Eyedropper tool to steal colors from images. 

All right, that's it, color inspiration, Eyedropper tool, learned and done.

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