How to Use the Eyedropper Tool in Figma

Speed up your workflow by learning how to use the Eyedropper tool like a pro.
How to Use the Eyedropper Tool in Figma

If you want to quickly pick the color from an image or a shape on the canvas, use the eyedropper tool.

It looks like this:

In Figma, you can press "i" on the keyboard to select the Eyedropper.

Once it's selected, hover over an image or a shape on the canvas and click to sample the color. This will populate the color into the color picker.

If you first select a shape you want to change the color of, clicking to sample the color with the eyedropper tool will shape the color of the selected shape:

Select a shape, press "i", then pick a color.

Pro tip: We can take this further and "scrub" or continuously sample the image with the Eyedropper by clicking and dragging it across the image, trying different colors in context to feel out which one we like:

Neato, huh?

Now let's take a look at a more advanced timesaving use-case.

If we use the Selected Colors panel in Figma in conjunction with the continuous sampling using the Eyedropper tool, we can save a ton of time changing the color across a lot of elements:

Hint: this time saving feature gets wild when you start using Libraries (design systems in Figma.) Imagine changing the brand color of an entire 500-page website in 5 seconds. Figma is mind-blowing.

UI design expertise on tap

Become a better designer in 10 minutes a day. Professional, bite-size design expertise delivered to your inbox.

The UI Lab

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to The UI Lab.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.