Design system file structure in Figma - Dashboard Guide

Dashboard Mode - Design system file structure

Goal

Understand how to organize a design system file structure in Figma for easy use and collaboration.

Sample File Structure Data

Folder/File	Description	Example Content
01_Tokens	Colors, typography, spacing tokens	Primary Color, Font Sizes, Spacing Scale
02_Components	Reusable UI components	Buttons, Inputs, Cards
03_Layouts	Grid and layout templates	Page Grids, Responsive Layouts
04_Icons	Icon sets and variants	Action Icons, Social Icons
05_Documentation	Guidelines and usage notes	Typography Guidelines, Color Usage
README.md	Overview of the design system	Purpose, How to use files

Dashboard Components

• KPI Card: Number of folders/files in the design system (5 folders + 1 file = 6 total)
• Bar Chart: Count of items per folder
  • Tokens: 3 types (Colors, Typography, Spacing)
  • Components: 3 types (Buttons, Inputs, Cards)
  • Layouts: 2 types (Page Grids, Responsive Layouts)
  • Icons: 2 types (Action, Social)
  • Documentation: 2 types (Typography Guidelines, Color Usage)
• Table: Shows folder name, description, and example content as in sample data

Dashboard Layout

+-----------------------------+
|        KPI Card (Total)      |
+-----------------------------+
| Bar Chart (Items per Folder) |
|                             |
+-----------------------------+
|           Table             |
| (Folder details & examples) |
+-----------------------------+
  

Interactivity

User can filter the bar chart by folder name. When a folder is selected:

• The table updates to show only the selected folder's details.
• The KPI card updates to show the count of items in that folder.

This helps focus on one part of the design system at a time.

Self Check

If you add a filter to select the folder 02_Components, which components update and how?

• KPI Card: Updates to show 3 items (Buttons, Inputs, Cards).
• Bar Chart: Highlights or filters to show only Components folder data.
• Table: Shows only the row for 02_Components with its description and examples.

Key Result

Dashboard shows the structure of a Figma design system file with folder counts and details.