File and project organization in Figma - Real Business Scenario

Scenario Mode

👤 Your Role: You are a BI analyst working with a design team to create dashboards in Figma.

📋 Request: Your manager wants you to organize all dashboard design files and components clearly so the team can easily find and update them.

📊 Data: You have multiple Figma files containing dashboard mockups, UI components, and style guides. These files are currently mixed without clear naming or folder structure.

🎯 Deliverable: A well-structured Figma project with organized files, pages, and components following best practices for easy collaboration.

Sample Data

File Name	Content	Current Folder
Sales Dashboard.fig	Dashboard mockup for sales data	Root
Marketing Components.fig	UI components for marketing dashboards	Root
Style Guide.fig	Colors and typography styles	Root
Finance Dashboard.fig	Dashboard mockup for finance data	Root
Shared Components.fig	Common UI components used across dashboards	Root

1

Step 1: Create folders in the Figma project named 'Dashboards', 'Components', and 'Style Guides'.

In the Figma project sidebar, click 'New Folder' and name it accordingly.

Expected Result

Three folders appear: Dashboards, Components, Style Guides.

2

Step 2: Move all dashboard mockup files (Sales Dashboard.fig, Finance Dashboard.fig) into the 'Dashboards' folder.

Drag and drop the files into the 'Dashboards' folder in the project sidebar.

Expected Result

Sales Dashboard.fig and Finance Dashboard.fig are inside the 'Dashboards' folder.

3

Step 3: Move all component files (Marketing Components.fig, Shared Components.fig) into the 'Components' folder.

Drag and drop the files into the 'Components' folder in the project sidebar.

Expected Result

Marketing Components.fig and Shared Components.fig are inside the 'Components' folder.

4

Step 4: Move the Style Guide.fig file into the 'Style Guides' folder.

Drag and drop Style Guide.fig into the 'Style Guides' folder.

Expected Result

Style Guide.fig is inside the 'Style Guides' folder.

5

Step 5: Within each file, create pages named clearly, for example, in Sales Dashboard.fig create pages 'Overview', 'Trends', and 'Details'.

In the file, click '+' next to pages and rename them accordingly.

Expected Result

Sales Dashboard.fig has pages named Overview, Trends, Details.

6

Step 6: In component files, organize components into frames or groups named by function, such as 'Buttons', 'Charts', 'Filters'.

Select components and group them with clear frame names.

Expected Result

Components are grouped logically for easy finding.

7

Step 7: Use consistent naming conventions for files and components, e.g., prefix dashboard files with 'DB -' and components with 'CMP -'.

Rename files and components accordingly.

Expected Result

Files named like 'DB - Sales Dashboard.fig' and 'CMP - Marketing Components.fig'.

8

Step 8: Add descriptions or notes in the project or file to explain the folder structure and naming conventions.

Use Figma's comment or description feature to add notes.

Expected Result

Team members can understand the organization easily.

Final Result

Figma Project Structure
-----------------------
Dashboards/
  ├─ DB - Sales Dashboard.fig
  │    ├─ Overview
  │    ├─ Trends
  │    └─ Details
  └─ DB - Finance Dashboard.fig
Components/
  ├─ CMP - Marketing Components.fig
  │    ├─ Buttons
  │    ├─ Charts
  │    └─ Filters
  └─ CMP - Shared Components.fig
Style Guides/
  └─ Style Guide.fig

All files and components are named and grouped clearly for easy access.

✓Organizing files into folders reduces confusion and saves time.

✓Clear page and component naming helps team members find what they need quickly.

✓Consistent naming conventions improve collaboration and maintenance.

✓Adding notes supports onboarding new team members.

Bonus Challenge

Create a Figma team library from the 'Components' and 'Style Guides' folders to share reusable components and styles across all projects.

Show Hint

Use Figma's 'Publish Library' feature to make components and styles available to all team members.

Practice

1. Why is it important to organize Figma files into folders within a project?

easy

A. To hide files from team members

B. To increase the file size

C. To make files load slower

D. To find and manage files easily later

Solution

1. Step 1: Understand folder purpose in Figma

   Folders group related files so you can find them quickly without searching everywhere.

2. Step 2: Consider file management benefits

   Organized folders reduce confusion and save time when working on projects.

3. Final Answer:

   To find and manage files easily later -> Option D

4. Quick Check:

   Organizing files = Easy access [OK]

Hint: Folders help you find files fast, like folders on your computer [OK]

Common Mistakes:

• Thinking folders slow down Figma
• Believing folders hide files from others
• Confusing folders with file size changes

2. Which of the following is the correct way to name Figma files for version control?

easy

A. ProjectName_v1, ProjectName_v2, ProjectName_final

B. FinalProject, FinalProject2, FinalProject3

C. MyFile, MyFileCopy, MyFileCopy2

D. Design1, Design2, Design3

Solution

1. Step 1: Identify clear version naming

   Using _v1, _v2, etc., clearly shows file versions in order.

2. Step 2: Compare other options

   Other names like 'FinalProject' or 'Copy' are vague and confusing for version tracking.

3. Final Answer:

   ProjectName_v1, ProjectName_v2, ProjectName_final -> Option A

4. Quick Check:

   Consistent version names = ProjectName_v1, ProjectName_v2, ProjectName_final [OK]

Hint: Use _v1, _v2 to track versions clearly [OK]

Common Mistakes:

• Using vague names like 'Copy' or 'Final'
• Skipping version numbers
• Mixing unrelated file names

3. Given a Figma project with folders named 'Assets', 'Designs', and 'Docs', where should you place a new icon file and why?

medium

A. In 'Docs' because icons need documentation

B. In 'Designs' because icons are part of the design files

C. In 'Assets' because icons are reusable elements

D. In the root project folder to keep it simple

Solution

1. Step 1: Understand folder roles

   'Assets' holds reusable elements like icons; 'Designs' holds working design files; 'Docs' holds documentation.

2. Step 2: Match icon file to folder

   Icons are reusable assets, so they belong in 'Assets' for easy reuse across projects.

3. Final Answer:

   In 'Assets' because icons are reusable elements -> Option C

4. Quick Check:

   Reusable elements go in Assets [OK]

Hint: Put reusable items like icons in Assets folder [OK]

Common Mistakes:

• Putting icons in Docs folder
• Mixing assets with design files
• Leaving files in root folder

4. You notice your Figma project has files named inconsistently like 'DesignFinal', 'design_v2', and 'Design copy'. What is the best way to fix this?

medium

A. Rename files using a consistent pattern like ProjectName_v1, ProjectName_v2

B. Delete all files and start over

C. Leave files as they are to avoid confusion

D. Merge all files into one big file

Solution

1. Step 1: Identify problem with inconsistent naming

   Inconsistent names make it hard to track versions and progress.

2. Step 2: Apply consistent naming convention

   Renaming files with a clear pattern like ProjectName_v1 helps organize and find files easily.

3. Final Answer:

   Rename files using a consistent pattern like ProjectName_v1, ProjectName_v2 -> Option A

4. Quick Check:

   Consistent naming fixes confusion [OK]

Hint: Rename files with clear version numbers [OK]

Common Mistakes:

• Deleting files unnecessarily
• Ignoring inconsistent names
• Merging unrelated files

5. You manage a large Figma project with multiple teams. How should you organize files and folders to keep work clear and efficient?

hard

A. Put all files in one folder and name them randomly

B. Create separate folders for each team, use consistent file naming, and keep assets in a shared 'Assets' folder

C. Create folders only for assets and put all design files together without folders

D. Use different projects for each file instead of folders

Solution

1. Step 1: Organize by team folders

   Separate folders for each team help keep their work isolated and easy to find.

2. Step 2: Use consistent naming and shared assets

   Consistent file names avoid confusion; a shared 'Assets' folder allows reuse across teams.

3. Final Answer:

   Create separate folders for each team, use consistent file naming, and keep assets in a shared 'Assets' folder -> Option B

4. Quick Check:

   Team folders + consistent names + shared assets = Create separate folders for each team, use consistent file naming, and keep assets in a shared 'Assets' folder [OK]

Hint: Separate by team, name files clearly, share assets [OK]

Common Mistakes:

• Mixing all files in one folder
• Ignoring naming conventions
• Scattering assets across folders