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.

Practice

1. Why is it important to use numbered folders in a Figma design system file structure?

easy

A. To keep folders organized and maintain a clear order

B. To make the file size smaller

C. To automatically update components

D. To change the color scheme of the design system

Solution

1. Step 1: Understand the purpose of numbered folders

   Numbered folders help keep files in a specific order, making it easier to find and manage items.

2. Step 2: Relate to design system organization

   In a design system, clear order prevents confusion and speeds up work by grouping related items logically.

3. Final Answer:

   To keep folders organized and maintain a clear order -> Option A

4. Quick Check:

   Numbered folders = clear order [OK]

Hint: Number folders to keep things tidy and easy to find [OK]

Common Mistakes:

• Thinking numbering changes file size
• Assuming numbering updates components automatically
• Confusing numbering with design style changes

2. Which of the following is the correct way to name a folder for color styles in a design system file?

easy

A. ColorStyles

B. Colors 01

C. 01 Colors

D. Styles-Colors

Solution

1. Step 1: Check naming conventions for order

   Numbering folders at the start (like '01 Colors') ensures they appear in the correct order.

2. Step 2: Compare options

   01 Colors starts with a number and a clear name, which is best practice for organization.

3. Final Answer:

   01 Colors -> Option C

4. Quick Check:

   Number first, then name = correct folder naming [OK]

Hint: Start folder names with numbers for order [OK]

Common Mistakes:

• Putting numbers after names causing sorting issues
• Using unclear or combined words without spaces
• Skipping numbering and losing order

3. Given a design system file with folders named 01 Colors, 02 Components, and 03 Documentation, what will be the order of these folders in Figma's sidebar?

medium

A. Colors, Components, Documentation

B. Colors, Documentation, Components

C. Components, Documentation, Colors

D. Documentation, Components, Colors

Solution

1. Step 1: Understand folder numbering effect

   Folders with numbers at the start sort in ascending order by those numbers.

2. Step 2: Apply numbering to folder names

   01 Colors comes first, then 02 Components, then 03 Documentation.

3. Final Answer:

   Colors, Components, Documentation -> Option A

4. Quick Check:

   Number order = Colors, Components, Documentation [OK]

Hint: Folders sort by leading numbers ascending [OK]

Common Mistakes:

• Ignoring numbers and sorting alphabetically
• Mixing folder order randomly
• Assuming Figma sorts by last word

4. You notice your design system file has folders named Colors, Components, and Documentation without numbers, but they appear in random order. How can you fix this?

medium

A. Rename folders to all uppercase letters

B. Add numbers at the start of each folder name like 01 Colors

C. Delete and recreate folders in the correct order

D. Change folder colors to match their content

Solution

1. Step 1: Identify cause of random order

   Without numbers, folders sort alphabetically, which may not match desired order.

2. Step 2: Apply numbering to enforce order

   Adding numbers like '01 Colors' forces folders to appear in that numeric order.

3. Final Answer:

   Add numbers at the start of each folder name like 01 Colors -> Option B

4. Quick Check:

   Numbering folders fixes order [OK]

Hint: Number folders to fix random order [OK]

Common Mistakes:

• Thinking uppercase changes order
• Deleting folders wastes work
• Changing colors does not affect order

5. You want to create a design system file structure that separates colors, typography, components, and documentation clearly. Which folder structure below follows best practices?

hard

A. 01 Components
02 Colors
03 Docs
04 Typography

B. Colors
Typography
Components
Docs

C. Components
Colors
Docs
Typography

D. 01 Colors
02 Typography
03 Components
04 Documentation

Solution

1. Step 1: Check for numbering and clear folder names

   01 Colors 02 Typography 03 Components 04 Documentation uses numbers to keep order and full descriptive folder names.

2. Step 2: Verify grouping of related items

   Colors, Typography, Components, and Documentation are grouped separately and clearly.

3. Final Answer:

   01 Colors 02 Typography 03 Components 04 Documentation -> Option D

4. Quick Check:

   Numbered, clear folders = best practice [OK]

Hint: Number and name folders clearly for easy use [OK]

Common Mistakes:

• Skipping numbering causing disorder
• Using unclear or abbreviated folder names
• Mixing unrelated items in one folder