A Comprehensive Guide to Using Color in Figma

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!

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.

 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.

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?

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.

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.

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

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

And if we drag it to the bottom left corner, we get the hue with zero 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.

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.

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.

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.   

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!

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