Style organization and naming conventions in Figma - Dashboard Guide

Dashboard Mode - Style organization and naming conventions

Goal

Help designers keep their Figma styles neat and easy to find by using clear naming rules and organizing styles well.

Sample Styles

Style Name	Type	Color / Font	Description
Color / Primary / Blue 500	Color	#2563EB	Main brand blue
Color / Neutral / Gray 300	Color	#D1D5DB	Light gray for backgrounds
Text / Heading / H1 / Bold	Text	Roboto, 32px, Bold	Page titles
Text / Body / Regular	Text	Roboto, 16px, Regular	Paragraph text
Effect / Shadow / Card	Effect	Drop shadow, 0 2px 4px rgba(0,0,0,0.1)	Card shadows
Grid / Layout / 8px	Grid	8px spacing	Base grid for layout

Dashboard Components

• KPI Card: Shows the count of styles by type.
  Formula: Count styles grouped by Type.
  Result: Color=2, Text=2, Effect=1, Grid=1
• Bar Chart: Number of styles per category (Primary, Neutral, Heading, Body, Shadow, Layout).
  Formula: Count styles grouped by category extracted from name.
  Example: Primary=1, Neutral=1, Heading=1, Body=1, Shadow=1, Layout=1
• Table: Lists all styles with columns: Style Name, Type, Color/Font, Description.

Dashboard Layout

+----------------------+---------------------+
|      KPI Card        |     Bar Chart       |
|  (Style counts by    |  (Styles per        |
|   type)              |   category)         |
+----------------------+---------------------+
|                      Table                    |
|          (All styles with details)           |
+----------------------------------------------+

Interactivity

Filter by style type or category using dropdown menus.

• Selecting a type (e.g., Color) updates KPI Card, Bar Chart, and Table to show only Color styles.
• Selecting a category (e.g., Primary) filters all components to styles in that category.
• Clear filters to see all styles again.

Self Check

Add a filter for Type = 'Text'. Which components update and what do they show?

• KPI Card updates to show count only for Text styles (2).
• Bar Chart updates to show categories only within Text styles (Heading=1, Body=1).
• Table shows only Text styles rows.

Key Result

Dashboard showing style counts and categories with filters for style type and category in Figma.