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.

Practice

1. What is the main benefit of using Color Styles in Figma?

easy

A. They add animations to elements.

B. They automatically create new shapes.

C. They change font sizes globally.

D. They keep colors consistent across your design.

Solution

1. Step 1: Understand the purpose of Color Styles

   Color Styles are used to keep colors consistent in a design project.

2. Step 2: Compare options with the purpose

   Only 'They keep colors consistent across your design.' correctly states that Color Styles keep colors consistent.

3. Final Answer:

   They keep colors consistent across your design. -> Option D

4. Quick Check:

   Color Styles = Consistent colors [OK]

Hint: Color Styles = consistent colors everywhere [OK]

Common Mistakes:

• Confusing color styles with font or shape features
• Thinking color styles create animations
• Assuming color styles change font sizes

2. Which of the following is the correct way to create a new color style in Figma?

easy

A. Select a shape with a fill color, then click 'Create Style' in the Fill section.

B. Draw a rectangle and rename it to 'Color Style'.

C. Change the font color and save it as a style.

D. Right-click on the canvas and select 'New Color Style' from the menu.

Solution

1. Step 1: Identify how to create a color style

   In Figma, you create a color style by selecting an object with a fill color and clicking 'Create Style' in the Fill section.

2. Step 2: Evaluate each option

   'Select a shape with a fill color, then click "Create Style" in the Fill section.' matches the correct method. Options B, C, and D describe incorrect or impossible actions.

3. Final Answer:

   Select a shape with a fill color, then click 'Create Style' in the Fill section. -> Option A

4. Quick Check:

   Create Style button in Fill = new color style [OK]

Hint: Use 'Create Style' button on fill color [OK]

Common Mistakes:

• Trying to create color style by renaming shapes
• Assuming font color changes create color styles
• Looking for 'New Color Style' in right-click menu

3. If you update a color style named Primary Blue, what happens to all elements using this style?

medium

A. All elements using Primary Blue update automatically.

B. Elements keep their old color unless manually changed.

C. Only new elements will use the updated color.

D. The color style is deleted after update.

Solution

1. Step 1: Understand color style updates

   When a color style is updated, all elements using that style update automatically to reflect the change.

2. Step 2: Analyze each option

   All elements using Primary Blue update automatically. correctly states this behavior. Options A and B are incorrect because changes apply immediately to all linked elements. The color style is deleted after update. is false; updating does not delete the style.

3. Final Answer:

   All elements using Primary Blue update automatically. -> Option A

4. Quick Check:

   Update color style = auto update all elements [OK]

Hint: Update color style updates all linked elements [OK]

Common Mistakes:

• Thinking only new elements update
• Believing manual change is needed after update
• Confusing update with deletion

4. You tried to update a color style, but the elements did not change color. What is the most likely reason?

medium

A. You updated the wrong color style name.

B. Figma does not support updating color styles.

C. The elements are not using the color style but have fixed colors.

D. You need to restart Figma to see changes.

Solution

1. Step 1: Identify why elements don't update

   If elements have fixed colors (not linked to a color style), updating the style won't affect them.

2. Step 2: Evaluate other options

   You updated the wrong color style name. could be possible but less likely if you are sure of the style name. Figma does not support updating color styles. is false; Figma supports updates. You need to restart Figma to see changes. is unnecessary.

3. Final Answer:

   The elements are not using the color style but have fixed colors. -> Option C

4. Quick Check:

   Fixed colors ignore style updates [OK]

Hint: Check if elements use style or fixed color [OK]

Common Mistakes:

• Assuming Figma needs restart
• Confusing style update support
• Not verifying element color source

5. You have a design with multiple color styles for buttons: Primary, Secondary, and Accent. You want to change all buttons to a new shade of blue without changing other elements. What is the best approach?

hard

A. Manually change the fill color of each button individually.

B. Create a new color style named Button Blue and apply it to all buttons, then update it as needed.

C. Update the Primary, Secondary, and Accent color styles to the new blue shade.

D. Delete all existing color styles and create new ones.

Solution

1. Step 1: Understand the goal

   You want to change button colors without affecting other elements using existing styles.

2. Step 2: Evaluate options

   Update the Primary, Secondary, and Accent color styles to the new blue shade. changes all elements using those styles, not just buttons. Manually change the fill color of each button individually. is manual and inefficient. Delete all existing color styles and create new ones. is disruptive. Create a new color style named Button Blue and apply it to all buttons, then update it as needed. creates a dedicated style for buttons, allowing easy updates without affecting others.

3. Final Answer:

   Create a new color style named Button Blue and apply it to all buttons, then update it as needed. -> Option B

4. Quick Check:

   Use dedicated color style for buttons [OK]

Hint: Use dedicated color style for buttons to isolate changes [OK]

Common Mistakes:

• Updating shared styles affecting unrelated elements
• Changing colors manually one by one
• Deleting styles unnecessarily