Home /Work /

Project and File organization in Figma

This article is the second in a series where I talk about improving collaboration between designers and stakeholders by having a shared language and system for organizing design. For this part, we are going to bring order to the Figma file and the project structures. This will not only make it easier for design stakeholders to find files but also make designers' lives easier. Part 1 can be found here.

Handful Tip:
For starters if you are working on anything even if it is a single file avoid creating that in your drafts. Always create a project for any working Figma file.

Naming Conventions

We suggest naming your files by story IDs or any other project management tool that you use in your organization for larger projects. This will allow you and anyone in your organization to easily find designs for any user story without asking you all the time since everyone from developers to project managers identifies user stories by story IDs. Then, ideally, you want to keep separate design files for each user story, but in a case where it makes more sense to include multiple user stories in the design file, add all related story IDs to the title, separated by a comma.

Figma Files Project Organization

Setting up your files

The second part of this is the Comment key, which will allow you to document your design files. The annotations range from questions that you want to ask PMs or developers to risks and feasibility concerns that you want to raise.

Work Files

Now let’s talk about how you should set up each file in your project. Again, our intention here is to have a standard way of setting up the file. For any design file, we recommend having the following pages.

  • The Welcome page will contain your Figma thumbnail, table of contents, and the viewer’s guide for your file.
  • Your current working page is denoted by its status followed by Version Number and the Date it was created on.
  • Prototype Page where you can move your signed-off designs and link them to a final prototype.
  • Magic Lab can contain your experimental ideas or designs that you want to keep for future reference.
  • Scratchpad can have mood boards or other low-fidelity designs.

Welcome Page

The welcome page has the following key elements:

  • File Thumbnail
    This highlights the overall file status, Story ID, and title along with the secondary project or client name. And then finally the designer(s) name responsible for delivering the design.
  • Table of contents
    This is generated from the great Table of Contents plugin by Discord’s design team. This automatically generates a list of all the pages, hyperlinked for easy navigation
  • Viewer’s Guide
    This highlights key points on how you can read the design file. Which designs are at what stage of design? Which are ready for development or locked for feedback? And how to read the design documentation.

Design Page(s)

The design pages identified by version numbers and date stamps include the interface designs themselves. A good way to organize your screen designs is by user flows from start to finish. Don’t shy away from duplicating screens; show every flow completely. This makes it so much easier to understand how every flow works than to have to move around the file trying to figure out the previous step or how we came to this stage. You can use screenshots if you are designing flows in the middle of the journey, but always use them for context.

Sample Design Page Layout

UPDATE: Now you can also use the new Figma feature for creating sections around user flows to make the navigation even easier.

Hand-Off and Presentations

For handing off files to developers, and doing presentations for internal stakeholders, it is suggested to make a copy of the work file or the page in Figma, clear all the previous versions or experimental designs, and share that with the stakeholders. This will keep a record of your shared file as a checkpoint while keeping unwanted hands out of your work files.

Figma Files Project Organization

⬅️ Go back to Haseeb's Work