File organization best practices in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a UX designer working with a team on a large project in Figma.

📋 Request: Your manager wants you to organize the Figma files so the whole team can find and use design assets easily.

📊 Data: You have multiple Figma files containing screens, components, and design systems for different parts of the project.

🎯 Deliverable: Create a clear folder and file structure in Figma with naming conventions and component organization for easy team collaboration.

Sample Data

File Name	Content Type	Current Organization
App Screens.fig	Screens	All screens mixed in one page
Components.fig	UI Components	Components scattered without naming
Design System.fig	Colors, Typography	Colors and text styles mixed
Marketing.fig	Marketing Screens	Mixed with app screens
Icons.fig	Icons	Icons in one page, no categories

1

Step 1: Create separate Figma files for each major category: App Screens, Marketing Screens, Components, Design System, and Icons.

In Figma, create new files named clearly: 'App Screens', 'Marketing Screens', 'Components', 'Design System', 'Icons'.

Expected Result

Five separate files each dedicated to one content type.

2

Step 2: Within each file, create pages to organize content logically. For example, in 'App Screens', create pages for 'Login', 'Dashboard', 'Settings'.

Use the '+' button next to pages in Figma to add pages named by feature or screen group.

Expected Result

Each file has multiple pages grouping related screens or components.

3

Step 3: Rename all components with a clear naming convention using slashes to create categories, e.g., 'Button/Primary', 'Button/Secondary', 'Icon/Navigation/Home'.

Select each component, rename it following the pattern 'Category/Subcategory/Name'.

Expected Result

Components are grouped in the assets panel under categories for easy finding.

4

Step 4: Separate colors and text styles into distinct pages inside the 'Design System' file, naming pages 'Colors' and 'Typography'.

Create two pages in 'Design System' file and move color styles to 'Colors' page and text styles to 'Typography' page.

Expected Result

Design System file clearly separates colors and typography for easy access.

5

Step 5: Organize icons into categories by creating pages or frames named by icon type, e.g., 'Navigation', 'Social', 'Actions'.

In 'Icons' file, create pages or frames named by icon category and move icons accordingly.

Expected Result

Icons are grouped logically making it easy to find specific icons.

6

Step 6: Document the file and component naming conventions in a README page inside the main project file.

Add a new page named 'README' with text explaining the folder structure and naming rules.

Expected Result

Team members can read and follow the organization rules easily.

Final Result

Figma Project Structure
-----------------------
App Screens.fig
  ├─ Login
  ├─ Dashboard
  └─ Settings

Marketing Screens.fig
  ├─ Campaigns
  └─ Landing Pages

Components.fig
  ├─ Button
  │    ├─ Primary
  │    └─ Secondary
  ├─ Input
  └─ Modal

Design System.fig
  ├─ Colors
  └─ Typography

Icons.fig
  ├─ Navigation
  ├─ Social
  └─ Actions

README page with naming and organization rules

✓Separating files by content type reduces confusion and improves focus.

✓Using pages inside files groups related screens or components logically.

✓Naming components with categories helps team members find assets quickly.

✓Separating colors and typography clarifies design system usage.

✓Organizing icons by category speeds up icon selection.

✓Documenting conventions ensures consistent team collaboration.

Bonus Challenge

Create a Figma plugin or use existing plugins to automate component renaming and organization based on your naming conventions.

Show Hint

Explore Figma community plugins like 'Rename It' or 'Organize Layers' to batch rename and group components.