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.