Applying and detaching styles in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI designer working on a sales dashboard in Figma.

📋 Request: Your manager wants you to apply consistent color and text styles to the dashboard components. Later, they want to see how the dashboard looks without these styles, so you need to detach the styles from some elements.

📊 Data: You have a Figma file with dashboard components: titles, labels, buttons, and charts. Some components already have local styles defined for colors and text.

🎯 Deliverable: A Figma dashboard where you apply shared styles to all relevant components, then detach styles from selected components to customize their appearance.

Sample Data

Component	Type	Current Style
Dashboard Title	Text	Local Text Style: Heading 1
Region Label	Text	Local Text Style: Body
Sales Button	Button	Local Fill Color: Blue
Filter Dropdown	Button	No Style Applied
Chart Title	Text	Local Text Style: Heading 2
Legend Label	Text	No Style Applied

1

Step 1: Create shared text styles for headings and body text.

In Figma, go to the Text panel, create a new text style named 'Dashboard Heading' with font size 24px, bold, and color #333333. Create another text style named 'Body Text' with font size 14px, regular, and color #666666.

Expected Result

Two shared text styles named 'Dashboard Heading' and 'Body Text' are available in the styles panel.

2

Step 2: Create shared color styles for buttons and fills.

In Figma, select a blue color (#1E90FF) and create a new color style named 'Primary Blue'. Create a gray color (#CCCCCC) style named 'Secondary Gray'.

Expected Result

Two shared color styles named 'Primary Blue' and 'Secondary Gray' are available.

3

Step 3: Apply the shared text styles to all text components.

Select 'Dashboard Title' and apply 'Dashboard Heading' text style. Select 'Region Label' and 'Legend Label' and apply 'Body Text' style. Select 'Chart Title' and apply 'Dashboard Heading' style.

Expected Result

All text components use the shared text styles consistently.

4

Step 4: Apply the shared color styles to buttons and fills.

Select 'Sales Button' and apply 'Primary Blue' fill color style. Select 'Filter Dropdown' and apply 'Secondary Gray' fill color style.

Expected Result

Buttons have consistent fill colors using shared styles.

5

Step 5: Detach styles from 'Region Label' and customize its text color.

Select 'Region Label', right-click and choose 'Detach Style' for text. Change its text color to #FF4500 (orange).

Expected Result

'Region Label' text no longer linked to shared style and shows orange color.

6

Step 6: Detach fill color style from 'Sales Button' and change its color.

Select 'Sales Button', right-click and choose 'Detach Style' for fill. Change fill color to #32CD32 (lime green).

Expected Result

'Sales Button' fill color is now lime green and not linked to shared style.

Final Result

Dashboard Title (Dashboard Heading style)
Region Label (Custom orange text, detached style)
Sales Button (Custom lime green fill, detached style)
Filter Dropdown (Secondary Gray fill style)
Chart Title (Dashboard Heading style)
Legend Label (Body Text style)

✓Applying shared styles ensures consistent look across dashboard components.

✓Detaching styles allows customization for specific components without affecting others.

✓Using shared styles simplifies future updates to the dashboard design.

Bonus Challenge

Create a variant of the 'Sales Button' with a hover effect using shared styles, then detach the hover style to customize it.

Show Hint

Use Figma's component variants to define hover state styles, then detach the hover fill style on the variant instance to change its color.