Design system file structure in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UI/UX designer working with a product team

📋 Request: Your manager wants you to organize the design system files in Figma so the team can easily find and reuse components

📊 Data: You have multiple design components like colors, typography, buttons, icons, and layout grids in Figma files

🎯 Deliverable: A clear folder and page structure in Figma that groups these components logically and supports easy updates

Sample Data

File Name	Page Name	Component Type	Description
Design System	Colors	Color Styles	Primary, Secondary, Neutral colors
Design System	Typography	Text Styles	Headings, Body text, Captions
Design System	Buttons	Components	Primary, Secondary, Disabled buttons
Design System	Icons	Components	Common UI icons
Design System	Layout	Grid & Spacing	Grid system and spacing tokens
Design System	Forms	Components	Input fields, Checkboxes, Radio buttons
Design System	Alerts	Components	Success, Warning, Error messages

1

Step 1: Create a main Figma file named 'Design System' to hold all components

File name: Design System

Expected Result

One main file named 'Design System' is created

2

Step 2: Inside the 'Design System' file, create separate pages for each component category

Pages: Colors, Typography, Buttons, Icons, Layout, Forms, Alerts

Expected Result

Seven pages are created, each named after a component category

3

Step 3: On the 'Colors' page, add color styles grouped by usage: Primary, Secondary, Neutral

Create color styles with clear names like 'Primary/Blue', 'Secondary/Green', 'Neutral/Gray'

Expected Result

Color styles are organized and named for easy selection

4

Step 4: On the 'Typography' page, define text styles for headings, body, and captions

Text styles named 'Heading/H1', 'Body/Regular', 'Caption/Small'

Expected Result

Text styles are grouped and named clearly

5

Step 5: On the 'Buttons' page, create components for primary, secondary, and disabled buttons with variants

Components with variants for states: Default, Hover, Disabled

Expected Result

Button components with variants are ready for reuse

6

Step 6: On the 'Icons' page, add all common UI icons as components with consistent sizing

Icons sized uniformly and named by function, e.g., 'Icon/Search', 'Icon/Close'

Expected Result

Icon components are organized and easy to find

7

Step 7: On the 'Layout' page, define grid systems and spacing tokens as styles or components

Grid frames and spacing tokens named 'Grid/12-column', 'Spacing/8px', etc.

Expected Result

Layout guidelines are clearly documented

8

Step 8: On the 'Forms' page, create components for input fields, checkboxes, and radio buttons with states

Components with variants for states: Default, Focused, Disabled

Expected Result

Form components are reusable and consistent

9

Step 9: On the 'Alerts' page, create components for success, warning, and error messages with clear labels

Components named 'Alert/Success', 'Alert/Warning', 'Alert/Error'

Expected Result

Alert components are easy to find and use

10

Step 10: Publish the 'Design System' file as a team library for easy access and updates

Enable team library publishing in Figma settings

Expected Result

Team members can access and use components from the design system

Final Result

Design System File Structure
----------------------------
| Design System (File)     |
|--------------------------|
| - Colors (Page)          |
|   - Primary Colors       |
|   - Secondary Colors     |
|   - Neutral Colors       |
| - Typography (Page)      |
|   - Headings             |
|   - Body Text            |
|   - Captions             |
| - Buttons (Page)         |
|   - Primary Button       |
|   - Secondary Button     |
|   - Disabled Button      |
| - Icons (Page)           |
|   - Search Icon          |
|   - Close Icon           |
| - Layout (Page)          |
|   - Grid System          |
|   - Spacing Tokens       |
| - Forms (Page)           |
|   - Input Fields         |
|   - Checkboxes           |
|   - Radio Buttons        |
| - Alerts (Page)          |
|   - Success Alert        |
|   - Warning Alert        |
|   - Error Alert          |

✓Organizing components by category improves findability.

✓Naming conventions help team members understand usage.

✓Publishing as a team library ensures consistent use across projects.

Bonus Challenge

Add version control notes and update logs inside the design system file to track changes over time.

Show Hint

Create a dedicated 'Documentation' page with text boxes listing version numbers, dates, and change descriptions.