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.

Practice

1. Why is it important to use clear folder names when organizing files in Figma?

easy

A. It helps everyone quickly find and understand the content inside folders.

B. It makes the file size smaller.

C. It automatically creates backups of the files.

D. It changes the colors of the designs inside the folder.

Solution

1. Step 1: Understand folder naming purpose

   Clear folder names describe the content, making it easy to find files.

2. Step 2: Consider collaboration benefits

   When working with others, clear names reduce confusion and save time.

3. Final Answer:

   It helps everyone quickly find and understand the content inside folders. -> Option A

4. Quick Check:

   Clear folder names = easy file finding [OK]

Hint: Think about how you'd find a file fast [OK]

Common Mistakes:

• Confusing folder names with file size
• Assuming naming changes design colors
• Believing naming creates backups

2. Which of the following is the correct way to name version files consistently in Figma?

easy

A. ProjectFinal, ProjectFinal2, ProjectFinal3

B. Project1, ProjectFinal, ProjectLast

C. Project, Project copy, Project copy 2

D. Project_v1, Project_v2, Project_v3

Solution

1. Step 1: Identify consistent version naming

   Using a clear pattern like _v1, _v2 helps track versions easily.

2. Step 2: Compare options for clarity

   The other options use inconsistent or unclear naming that can confuse users.

3. Final Answer:

   Project_v1, Project_v2, Project_v3 -> Option D

4. Quick Check:

   Consistent version names = Project_v1, Project_v2, Project_v3 [OK]

Hint: Use numbers with a clear prefix for versions [OK]

Common Mistakes:

• Using vague names like 'Final' or 'copy'
• Skipping version numbers
• Mixing naming styles

3. Given these folders in a Figma project: Data_Assets, Designs, Data_Assets_Backup, which folder best follows the best practice of separating content types?

medium

A. Data_Assets and Designs are correctly separated.

B. All folders are mixed and unclear.

C. Data_Assets_Backup should be merged with Designs.

D. Designs should be renamed to Data_Assets.

Solution

1. Step 1: Identify folder content types

   Data_Assets holds data files, Designs holds design files, so they are separated by type.

2. Step 2: Evaluate backup folder role

   Data_Assets_Backup is a backup folder, separate but related to Data_Assets, which is acceptable.

3. Final Answer:

   Data_Assets and Designs are correctly separated. -> Option A

4. Quick Check:

   Separate content types = Data_Assets and Designs are correctly separated. [OK]

Hint: Group files by type, not randomly [OK]

Common Mistakes:

• Mixing backup with main folders
• Renaming folders incorrectly
• Merging unrelated content

4. You notice your Figma project folders have inconsistent naming like DesignsFinal, designs_v2, and Designs Copy. What is the best way to fix this?

medium

A. Merge all folders into one called Designs without versions.

B. Delete all folders and start fresh without naming.

C. Rename all folders to a consistent style like Designs_v1, Designs_v2, Designs_v3.

D. Keep the names as they are because renaming is risky.

Solution

1. Step 1: Identify the problem with inconsistent names

   Inconsistent names cause confusion and make tracking versions hard.

2. Step 2: Apply consistent naming conventions

   Renaming folders with a clear pattern like Designs_v1 helps organize versions and clarity.

3. Final Answer:

   Rename all folders to a consistent style like Designs_v1, Designs_v2, Designs_v3. -> Option C

4. Quick Check:

   Consistent naming fixes confusion = Rename all folders to a consistent style like Designs_v1, Designs_v2, Designs_v3. [OK]

Hint: Standardize names before adding new versions [OK]

Common Mistakes:

• Deleting folders unnecessarily
• Ignoring inconsistent names
• Merging versions without tracking

5. You have a Figma project with multiple teams working on data, designs, and assets. How should you organize the files to ensure smooth collaboration and easy updates?

hard

A. Name folders by team member names and mix file types inside.

B. Create separate folders named Data, Designs, and Assets, use consistent version naming, and document folder purpose.

C. Put all files in one folder and rely on search to find them.

D. Use random folder names and update files without version control.

Solution

1. Step 1: Separate files by content type

   Organizing by Data, Designs, and Assets keeps files clear and accessible.

2. Step 2: Use consistent version naming and documentation

   Consistent naming helps track changes; documentation explains folder use to all teams.

3. Final Answer:

   Create separate folders named Data, Designs, and Assets, use consistent version naming, and document folder purpose. -> Option B

4. Quick Check:

   Clear folders + naming + docs = Create separate folders named Data, Designs, and Assets, use consistent version naming, and document folder purpose. [OK]

Hint: Separate by type, name versions, add notes [OK]

Common Mistakes:

• Mixing file types in one folder
• Ignoring version control
• Not documenting folder use