Color styles in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI dashboard designer at a retail company.

📋 Request: Your manager wants you to create a consistent color theme for all sales dashboards to improve readability and brand alignment.

📊 Data: You have access to the company brand colors and a sample sales dashboard with various charts and tables.

🎯 Deliverable: Create and apply color styles in Figma for primary, secondary, success, warning, and error colors. Then update the dashboard components to use these color styles.

Sample Data

Component	Current Color	Usage
Bar Chart Bars	#FF5733	Sales by Region
Line Chart Line	#33C1FF	Monthly Sales Trend
Success Message Background	#28A745	Order Confirmation
Warning Icon	#FFC107	Stock Low Alert
Error Text	#DC3545	Failed Transactions
Button Primary	#007BFF	Submit Actions

1

Step 1: Create a new color style in Figma named 'Primary Color' with the hex code #007BFF.

In Figma, select any shape, open the Fill color panel, enter #007BFF, then click the four dots icon to create a new style named 'Primary Color'.

Expected Result

A new color style 'Primary Color' with hex #007BFF is saved and available in the styles panel.

2

Step 2: Create a new color style named 'Secondary Color' with hex #33C1FF.

Repeat the process: select a shape, set fill to #33C1FF, create style named 'Secondary Color'.

Expected Result

Color style 'Secondary Color' with hex #33C1FF is saved.

3

Step 3: Create a 'Success Color' style with hex #28A745.

Set fill color to #28A745 and create style named 'Success Color'.

Expected Result

Color style 'Success Color' is saved.

4

Step 4: Create a 'Warning Color' style with hex #FFC107.

Set fill color to #FFC107 and create style named 'Warning Color'.

Expected Result

Color style 'Warning Color' is saved.

5

Step 5: Create an 'Error Color' style with hex #DC3545.

Set fill color to #DC3545 and create style named 'Error Color'.

Expected Result

Color style 'Error Color' is saved.

6

Step 6: Apply the 'Primary Color' style to all primary buttons in the dashboard.

Select each primary button, open Fill panel, click the styles icon, and choose 'Primary Color'.

Expected Result

All primary buttons use the 'Primary Color' style, ensuring consistent blue color.

7

Step 7: Apply 'Secondary Color' style to line chart lines representing monthly sales.

Select the line chart line elements, apply 'Secondary Color' style from the styles panel.

Expected Result

Line chart lines use the consistent secondary blue color.

8

Step 8: Apply 'Success Color' style to backgrounds of success messages.

Select success message backgrounds, apply 'Success Color' style.

Expected Result

Success messages have consistent green background color.

9

Step 9: Apply 'Warning Color' style to warning icons.

Select warning icons, apply 'Warning Color' style.

Expected Result

Warning icons have consistent yellow color.

10

Step 10: Apply 'Error Color' style to error text elements.

Select error text, apply 'Error Color' style.

Expected Result

Error texts have consistent red color.

11

Step 11: Review the dashboard to ensure all colors use the defined color styles for consistency.

Visually inspect all components and check the Fill color style in Figma.

Expected Result

Dashboard colors are consistent and aligned with brand colors using color styles.

Final Result

Bar Chart

↓

Line Chart

↓

Success Msg

↓

Warning Icon

↓

Error Text

↓

Primary Button

✓Using color styles ensures all dashboard elements have consistent colors.

✓This improves readability and aligns with company branding.

✓Future updates to colors can be done by editing the color styles once.

Bonus Challenge

Create a dark mode version of the color styles with appropriate contrast and apply it to the dashboard.

Show Hint

Use darker background colors and lighter text colors. Adjust color styles by creating new styles with dark mode hex codes.