A rainbow of possibilities – adding color with the eyedropper tool in Figma

Making a great-looking wireframe in Figma is just the first step in your UI journey. Pretty quickly you will want to start injecting some personality into your designs. And the best way to do so is through the use of color! Color plays such an important part in UI design so it is crucial you make the right choice. Luckily, with options like the eyedropper tool at your fingertips, you can quickly add color to your UI design in Figma.

In this post I’ll run through the basics of what the eyedropper tool does and how to use it, plus some places you can go for color palette inspiration.

New to Figma?

Figma is an awesome tool for rapid prototyping of apps, websites and other digital products. If you haven’t used Figma before then check out my course Figma UX UI Design Essentials to get started. You’ll learn everything you need to get started. 

So, once you’ve got the basics of Figma under your belt, it’s time to start thinking about your design in more detail. One of those details is your color palette. 

What is the eyedropper tool for?

The Eyedropper in Figma lets you sample a color, from an image that you have placed in Figma, and apply it to a selected object. You could start with a single image but I prefer to make a mood board first. 

A mood board works as a visual reference to set the tone for your UI Design. Start by collecting a variety of screenshots of app and website designs. Look for color combinations that you find appealing but also keep in mind the key thing is that they must convey the right tone for the brand and audience. 

Your mood board can cover other aspects of design, not only color. You might include examples of fonts you like, image styles, buttons, etc. It’s important never to directly copy someone else’s design, instead these screenshots work as a jumping-off point for you to develop your own ideas. Collate these screenshots in Figma.

Using the Eyedropper Tool in Figma

The eyedropper tool is going to let us grab colors directly from our mood board. It’s really easy to use!

Start by drawing a shape in Figma (or selecting an existing shape).

Over in the Properties Panel click the square swatch under Fill.

In the pop-up window you will see the eyedropper icon below the gradient of color.

Next hover the Eyedropper tool over an image – you’ll see a zoomed in view of the area. 

Simply click, to apply the color to your selected shape.

Shortcut for the Eyedropper Tool

When you are in the flow of design you don’t always want to move your mouse over to the Properties Panel. Instead try this shortcut for the eyedropper tool – it’s a super simple one to remember!

• Select the object you’re going to edit.

• Tap i to choose the eyedropper tool. 

Selecting a color palette

Once you have picked the first color you need to build a color palette by finding a range of colors that work well together. 

It’s easy to repeat the steps above and use the Eyedropper to sample different colors from your mood board.

Color palette inspiration

Maybe you’re finding it hard to get a combination of colors that work well together using this method? Instead head to google – there’s plenty of color palette websites out there that you can use to help.

Here’s a few that are top of my list:

Color Hunt

Adobe Color

Grabient

How to add colors into Figma

With all of the websites suggested above, and with most color palette websites, you can click on an individual color to view its Hex code (look for the # symbol).

Copy the hex number and, back in Figma, select the object. 

Then click the swatch under Fill in the Properties Panel. Paste the hex number in.

Color theory

If you still feel like your color selection process is a bit hit and miss, try doing a deep dive into using color in design and UI. This article by Alex Clem is a great place to start. Informing yourself on some color theory can make selecting the right combination a whole lot easier.

Or, if you want to take it further, I’ve got my own course on color theory. Learn about color harmonies and how they are used in brands, color value and the color systems used in today’s design and technology.

Whether you want to learn a little color theory first, or use your own artistic eye, your UI design will come to life as you start applying color. Using the eyedropper tool in Figma allows you to quickly pull colors from a variety of sources of inspiration and try out different combinations.

What’s Next 

If this has inspired you to learn more about Figma then check out my Figma advanced course – together we’ll move beyond the basics and progress further into the world of UI and UX design.

When you become a BYOL member, you will gain access to my Figma courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom,Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan