how to use color in figma

A Comprehensive Guide to Using Color in Figma

Daniel Scott

@dan

Hi, everyone!

In this post, we’ll cover the basics of Color in Figma. I’ll guide you through a quick and easy step-by-step guide on how to apply a solid color to wireframes with the Fill tool. We’ll learn how to pick and refine any color from the Color box or how to use the Eyedropper Tool for color sampling from elements within a project or a color palette that establishes a brand’s identity.

This post is based on one of the classes from my Figma Essentials Course, an incredible first step into the world of User Interface (UI) and User Experience (UX) design. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on After Effects, Photoshop, Illustrator, Lightroom, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey

Are you ready to bring color to your wireframes in Figma? Let’s start from the top!

 The importance of Color in UX and UI

Color is key to any successful visual design. By picking the right colors for your UI prototype you will add layers of meaning that will transform your end-user’s experience.

  • Harmonized colors bring beauty and functionality to the surface, defining your designs as fun and relaxing or focused and trustworthy.

  • Color influences emotions and behaviors.

  • Colors can define a brand’s identity and make it recognizable anywhere.

  • They are also essential for accessibility, helping your design become usable for everyone, even people with visual impairments.

  • Colors help lead your users across your design’s flow, pointing out relevant details or influencing actions and decisions.

  • Plan your colors, use them to enhance your user’s experience, making it easy, useful, and enjoyable. Satisfaction guaranteed!

Using the Fill tool in Figma

I’ll be showing you how to manage color in wireframe elements. Color isn’t as important to wireframes as it is to prototyping, but adding color to your design, even in its early stages, can help it come alive. 

We’ll be working on a standard app’s homepage wireframe and learn how to highlight the product image’s placeholder and call-to-action buttons.

homepage wireframe in figma

Wireframes are a quick and easy way to test user flow and experience - focused on functionality.

 1.   Select the object you want to colorize.

We activate the Move tool, picking it from the top toolbar or using the shortcut key “V” on our keyboards, and click once on the “product shot” frame inside our wireframe. The selected object is highlighted with a blue stroke.

activating move tool from the top toolbar in figma

Activate the Move or Selection tool from the top toolbar.

2.   Open the Fill tool’s dialog box from the Properties right sidebar.

This step is also relatively easy, we simply click the color square on the Fill properties panel.

We will be using Custom mode but remember you can also access stored or shared colors from the Libraries option.

For this post’s purpose, we will be working with solid color fills, but we can fill an object with gradients, images, and video clips. There’s more! We can also apply different blending effects from the Fill tool. Awesome, huh?

accessing the Fill options dialog box in figma

Open the Fill options panel by clicking on the active’s color swatch.

3.   Pick a color from the Fill tool’s Color Box

We’ll use the Fill tool’s Color Box to select the colors we’ll apply to our design and learn how all the available settings can help us fine tune our design.

Let’s begin with the color picker, that little dot inside the color box. All we need to do is click and drag it along the box, keeping in mind that the color picker deals with hue, brightness, and saturation.

color picker tool setting up red color in figma

Use the color picker to choose the right color for your object.

In this example, if the color picker stands on the top left corner of the color box, we pick the brightest tint of the active hue.

adjusting brightness to maximum light in figma

A hue’s highest tint is a full white color.

Dragging the color picker to the bottom right corner gives us the darkest shade of the active hue.

adjusting brightness to minimum light in figma

A hue’s highest shade is a full black color.

If we place the color picker on the top right corner of the color box, we have the hue at maximum saturation.

adjusting saturation to maximum level with the color picker tool in figma

Move the color picker to the top right corner for maximum color saturation.

And if we drag it to the bottom left corner, we get the hue with zero saturation.

adjusting saturation to minimum level with the color picker tool in figma

Move the color picker to the bottom left corner for zero color saturation.

To match the exact color fill for our object, we simply adjust the color picker inside the box until we find the correct saturation and brightness levels.

 

Time out #1

Wireframing is way more than drawing a rough sketch of a digital product. Wireframes are the solid foundations for any professional UX and UI project. Check out this article to better understand how wireframes can make you a better designer.

 

4.   Define hue and transparency

To change from red to other hues we adjust the Hue Slider, placed below the color box. We click on the dot and drag it to the left or right until we find the color we are looking for. Then we can fine tune it with the color picker, as we now know.

picking a new hue with the hue slider in figma

You can select a new hue with the help of the Hue Slider.

We can also adjust the color’s opacity level with the opacity slider. It’s relatively easy to understand: if we drag the dot all the way to the right, we get 100% opacity and if we do it all the way to the left, we give our color full transparency, or 0% opacity.

We can also adjust opacity by typing a specific number on the opacity value field below the opacity slider or over at the Fill panel next to the active color.

adjusting transparency with the opacity slider in figma

You can adjust opacity levels with the help of the Opacity Slider.

5.      Apply color models to select a fill color.

If we’re working with brand guidelines or need to apply a very specific color to our design, we will need to use one of the color models – there are five to choose from:

  • Hexadecimal numbers (or Hex Codes) – Figma’s default color model. Hex Codes are alphanumeric color representations, frequently used in web and digital design.

  • RGB (Red, Green, Blue) – The most common color model when designing for screens, sets hues by adjusting the primary colors red, green, and blue values between 0 and 255.

  • CSS – This is awesome if you are a designer and a developer. This color model is based on CSS language’s color names, supported by all browsers.

  • HSL (Hue, Saturation, Luminance) – This color model is similar to HSB and is based on how the human eye perceives color. We pick colors by adjusting their Hue, Saturation and Luminance values.

  • HSB (Hue, Saturation, Brightness) – HSB is also based on human color perception.

color models drop down menu highlighted in figma

Choose the color model that best fits your project's guidelines and development process.

Pro tip: There is a difference between Luminance and Brightness.

Luminance is an objective and standardized measure. It refers to the amount of light emitted or reflected from a surface. It’s ideal for consistency across different screens because Luminance adds brightness to a color without changing its hue.

Brightness is not a standardized measure. In RGB, brightness may change the amount of green and blue in a specific color, affecting its overall appearance.  

 

6.      Pick colors with the Eyedropper Tool

We can find the Eyedropper tool next to the Hue and Opacity sliders on the Color Fill dialog box or we can hit the shortcut key “I” on our keyboards.

This is an intuitive tool, easy to use, with simple point and click action.

Making sure our object is selected, we activate the Eyedropper tool and pick a color from any other object in our project by simply clicking on it. In this example, I’ll “steal” the green color from the “product shot” placeholder to fill the buttons below.   

activating the eyedropper tool in figma

The Eyedropper tools allows you to quickly select and apply a new color for your objects.

Remember not to use a lot of colors on your wireframes. It’s still too early to be talking about color matching or brand identity. Wireframing is excellent for the functional side of your design, so keep it visually simple and focus on the user flow.

  

Timeout #2

We’ve seen that colors have a leading role in visual design and have a deeper significance beyond simple aesthetic decisions. Learn more about how color affects user behavior and emotions in this interesting article.

  

7.  Check the Document colors to speed up workflow

It may not be the most agile feature when we’re working on a high-fidelity prototype, but Document Colors can help us with wireframing. It’s basically a history of the colors we’ve already used on this project.

As we can see below, we can find in the Color Fill dialog box five swatches showing the colors we’ve picked so far. With an object selected, if we hover over one of these swatches, our mouse cursor will turn into the eyedropper tool icon. A single click on the color swatch and it’s done!

using document colors option to pick a new color in figma

When the mouse cursor turns into the eyedropper you can click to apply a new color to your object.

And there you have it!

Now we know how to master the art of color picking and refining with all the different Fill Tool features and color models, we are ready to design incredible wireframes and, later on, create beautiful and functional prototypes that will amaze your clients, developers, and end-users. Fire up your laptop and start adding brilliant UX and UI designs to your portfolio!

What 's Next?

When you become a BYOL member, you will gain access to my Figma Essentials and Advanced courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Get started here.  

See you in class! – Dan

Ready for more? Become a BYOL member!

Explore 30+ Essentials and Advanced courses in Figma, Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. Enjoy personalized support, earn certificates, connect with other creators and tackle exciting community challenges.

START YOUR LEARNING JOURNEY
icon all courses benefit

Unlimited access to ALL content

Instant access to all of our courses and exclusive content while you're a member.

icon support benefit

Priority advice and support

Ask us anything! Our amazing Teaching Assistants are here to support you

icon certificate benefit svg

Certificates of achievement!

Celebrate and share the milestones in your learning journey