Design system file structure in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Core Components in Design Systems

Which folder in a design system file structure typically contains reusable UI elements like buttons, inputs, and icons?

A Assets

B Documentation

C Tokens

D Components

💡 Hint

Think about where you would find building blocks used repeatedly in designs.

The Components folder holds reusable UI elements such as buttons, inputs, and icons that designers use across projects.

❓ data_modeling

intermediate

Organizing Color Tokens in a Design System

In a design system file structure, where should color tokens be stored for easy maintenance and consistency?

A Assets folder

B Components folder

C Tokens folder

D Documentation folder

💡 Hint

Think about where you keep values that define styles like colors and fonts.

Color tokens are stored in the Tokens folder to centralize style values for consistency and easy updates.

❓ visualization

advanced

Visualizing a Design System File Structure

Which of the following diagrams best represents a clear and scalable design system file structure?

Figma

Root/
├── Tokens/
│   ├── Colors
│   ├── Typography
│   └── Spacing
├── Components/
│   ├── Buttons
│   ├── Forms
│   └── Icons
├── Assets/
│   ├── Images
│   └── Logos
└── Documentation/
    ├── Guidelines
    └── Usage

A

Root/
├── Tokens/
│   ├── Colors
│   ├── Typography
│   └── Spacing
├── Components/
│   ├── Buttons
│   ├── Forms
│   └── Icons
├── Assets/
│   ├── Images
│   └── Logos
└── Documentation/
    ├── Guidelines
    └── Usage

B

Root/
├── Documentation/
│   ├── Buttons
│   ├── Colors
│   └── Typography
├── Components/
│   └── Icons
└── Tokens/

C

Root/
├── Assets/
│   ├── Buttons
│   ├── Colors
│   └── Icons
├── Tokens/
│   └── Typography
└── Docs/

D

Root/
├── Components/
│   ├── Colors
│   └── Buttons
├── Tokens/
│   └── Typography
└── Docs/

💡 Hint

Look for a structure that separates tokens, components, assets, and documentation clearly.

Option A shows a well-organized, scalable file structure separating tokens, components, assets, and documentation clearly.

🔧 Formula Fix

advanced

Identifying a Problem in Design System File Structure

Which option shows a problematic design system file structure that could cause confusion or maintenance issues?

A

Root/
├── Components/
│   ├── Buttons
│   ├── Colors
│   └── Typography
├── Tokens/
└── Docs/

B

Root/
├── Tokens/
│   ├── Colors
│   └── Typography
├── Components/
│   ├── Buttons
│   └── Icons
└── Documentation/

C

Root/
├── Tokens/
│   ├── Colors
│   ├── Typography
│   └── Spacing
├── Components/
│   ├── Buttons
│   ├── Forms
│   └── Icons
└── Documentation/

D

Root/
├── Assets/
│   ├── Images
│   └── Logos
├── Tokens/
├── Components/
└── Documentation/

💡 Hint

Look for folders mixing unrelated items that should be separated.

Option A incorrectly places color and typography tokens inside the Components folder, mixing style values with UI elements, which can cause confusion and maintenance issues.

🎯 Scenario

expert

Scaling a Design System File Structure for Multiple Platforms

You need to organize a design system file structure that supports web, iOS, and Android platforms with shared and platform-specific components. Which structure best supports scalability and clarity?

A

Root/
├── Web/
│   ├── Tokens/
│   └── Components/
├── iOS/
│   ├── Tokens/
│   └── Components/
├── Android/
│   ├── Tokens/
│   └── Components/
└── Documentation/

B

Root/
├── Tokens/
├── Components/
│   ├── Shared/
│   ├── Web/
│   ├── iOS/
│   └── Android/
└── Documentation/

C

Root/
├── Tokens/
│   ├── Web/
│   ├── iOS/
│   └── Android/
├── Components/
└── Documentation/

D

Root/
├── Components/
│   ├── Buttons
│   ├── Inputs
│   └── Icons
├── Tokens/
└── Documentation/

💡 Hint

Consider how to separate shared and platform-specific parts clearly.

Option B organizes components into shared and platform-specific folders under Components, keeping tokens centralized and documentation separate, which supports scalability and clarity.