Eyedropper tool in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working on a marketing dashboard in Figma.

📋 Request: Your manager wants you to ensure the dashboard colors match the company's brand colors exactly. They ask you to use the Eyedropper tool to pick colors from the brand logo and apply them to the dashboard elements.

📊 Data: You have a Figma file with the brand logo image and a dashboard design with various shapes and text elements.

🎯 Deliverable: A Figma dashboard design where all colors are matched precisely to the brand colors using the Eyedropper tool.

Sample Data

Element	Current Color	Brand Color Source
Header Background	#CCCCCC (gray)	Brand Logo Red (#D32F2F)
Button Fill	#AAAAAA (gray)	Brand Logo Blue (#1976D2)
Text Color	#000000 (black)	Brand Logo White (#FFFFFF)
Sidebar Background	#EEEEEE (light gray)	Brand Logo Dark Gray (#424242)

1

Step 1: Open the Figma file containing the brand logo and dashboard design.

No formula needed; just open the file.

Expected Result

You see the dashboard design and the brand logo image on the canvas.

2

Step 2: Select the Header Background shape in the dashboard.

Click on the header background layer in the layers panel.

Expected Result

The header background is selected and ready for color editing.

3

Step 3: Use the Eyedropper tool to pick the red color from the brand logo.

In the Fill color picker, click the Eyedropper icon, then click on the red area of the brand logo (#D32F2F).

Expected Result

The header background color changes to #D32F2F, matching the brand red.

4

Step 4: Select the Button Fill shape.

Click on the button shape layer in the layers panel.

Expected Result

The button fill is selected for color editing.

5

Step 5: Use the Eyedropper tool to pick the blue color from the brand logo.

In the Fill color picker, click the Eyedropper icon, then click on the blue area of the brand logo (#1976D2).

Expected Result

The button fill color changes to #1976D2, matching the brand blue.

6

Step 6: Select the Text element.

Click on the text layer in the layers panel.

Expected Result

The text element is selected for color editing.

7

Step 7: Use the Eyedropper tool to pick the white color from the brand logo.

In the Text color picker, click the Eyedropper icon, then click on the white area of the brand logo (#FFFFFF).

Expected Result

The text color changes to #FFFFFF, matching the brand white.

8

Step 8: Select the Sidebar Background shape.

Click on the sidebar background layer in the layers panel.

Expected Result

The sidebar background is selected for color editing.

9

Step 9: Use the Eyedropper tool to pick the dark gray color from the brand logo.

In the Fill color picker, click the Eyedropper icon, then click on the dark gray area of the brand logo (#424242).

Expected Result

The sidebar background color changes to #424242, matching the brand dark gray.

10

Step 10: Review the dashboard to ensure all colors match the brand colors exactly.

Visually inspect all colored elements and confirm they match the brand colors picked.

Expected Result

Dashboard colors are consistent with the brand colors from the logo.

Final Result

Dashboard Colors Matched to Brand Logo

+-----------------------------+
| Header Background: #D32F2F  |
| Button Fill:       #1976D2  |
| Text Color:        #FFFFFF  |
| Sidebar Background:#424242  |
+-----------------------------+

✓Using the Eyedropper tool ensures exact color matching from the brand logo.

✓Consistent colors improve brand recognition and dashboard professionalism.

✓Figma's Eyedropper tool is easy to use for precise color selection.

Bonus Challenge

Create a color style in Figma for each brand color picked and apply these styles to the dashboard elements for easier future updates.

Show Hint

After picking a color with the Eyedropper, click the '+' icon next to 'Color Styles' in the Fill panel to save it as a style.