Applying and detaching styles in Figma - Dashboard Guide

Dashboard Mode - Applying and detaching styles

Dashboard Goal

Understand how to apply and detach styles in Figma to keep design consistent or customize elements for a BI dashboard.

Sample Data: Dashboard Elements

Element	Type	Current Style	Applied Style
Title Text	Text	Default Text	Heading Style
Sales KPI Card	Frame	None	KPI Card Style
Bar Chart	Component	Chart Default	Chart Style
Filter Button	Button	None	Button Style
Footer Text	Text	Default Text	Detached (custom)

Dashboard Components

• Title Text: Applied Heading Style to keep font size and color consistent across dashboards.
• Sales KPI Card: Applied KPI Card Style for background color, border radius, and shadow to unify look.
• Bar Chart: Applied Chart Style for consistent axis fonts and colors.
• Filter Button: Applied Button Style for consistent button color and hover effect.
• Footer Text: Detached style to customize font color and size independently from the default text style.

Dashboard Layout

+---------------------------+
|         Title Text        |
+---------------------------+
|  Sales KPI Card  |  Bar Chart  |
+---------------------------+
|       Filter Button        |
+---------------------------+
|        Footer Text         |
+---------------------------+

Interactivity

Applying styles ensures that when you update a style (like Button Style), all elements using it update automatically. Detaching a style breaks this link, so changes to the original style do not affect that element.

For example, if you update the KPI Card Style background color, the Sales KPI Card updates immediately. But the Footer Text, which has a detached style, stays the same even if the default text style changes.

Self Check

If you update the Button Style color, which components update?

• The Filter Button updates because it uses the applied Button Style.
• The Footer Text does not update because it has a detached style.
• The Sales KPI Card and Bar Chart do not update because they use different styles.

Key Result

Shows how applying and detaching styles in Figma affects dashboard element consistency and customization.