Fixing the Mess of Design Team’s Figma Environment to Start Working 6x Faster and Having Better Design Version Management

The Long Journey of Reorganizing Began

After some thoughtful discussion, I proposed some solutions to solve the issue. It will be a big effort and will take a long time. So, the execution of the following solutions will be shared equally between me and my UI Designer colleague.

Let’s go to the solutions we applied.

1. Figma’s Project Folder Restructuring

Overview of The New Design Team Project Folder Structrure in Figma

Before, different kinds of design files still didn’t have their dedicated project folder. We reviewed it thoroughly and estimated our future needs for the design works. We came up with creating new project folders to store the design based on its category and purpose.

Here are some of the project folder names and their content:

• Design Language System: for any design style guide

• Guidelines: for guidance of the team workflow, and on how to use the specific Figma file

• Website (New): for all of the new website design with the new style guide

• On Progress Task: for all the in-progress design tasks

• Website (Old): for all the old website design with the old style guide

• Member Area (Old): all member area (user dashboard) design

• Order Flow: all designs related to the checkout process on the company’s website & member area

2. Define the Design File Category

There are several categories based on the design inside each file. After putting the category on each file, we put them in each project folder that represents them well.

Here are some of the categories and in what project folder it will be placed:

• WEB: website design, can be placed either in “Website (New)” or “Website (Old)” folders

• MA: member area design, will be placed in “Member Area” folder

• OF: order flow design, will be placed in “Order Flow” folder

• DOC: documentation design, will be placed in “Guidelines” folder

*Each design can be added to the On Progress Task as well when it’s still active in the design phase

3. Give Rules on each Folder Project

Overview of The Rules Applied on Each Design Project Folder in Figma

After each design was placed in its respective project folder, we gave the rules and information on each project folder. The rules explained what kind of design can be added to the folder.

4. Apply the New Naming Format for each Design File

The New Naming Format Applied for Each Design File in Figma

To make the search process easier, all the design files were renamed using the new format. This naming format follows each design category. Here is the new naming format.

(Design Category Code) + Design/Task Name

Example: (WEB) Redesign Landing Page About Us

5. Redesign each Design File’s Cover

New Design File Cover Applied

One of the most challenging parts, whenever the UX team searches for a certain design in Figma, is that there is not enough information provided on the design file’s cover to tell about the file’s content.

Whereas the cover is the first thing we see. If it were designed to provide meaningful information, it would make the search process easier. 

Based on that, we agreed to add this information to the cover.

• Design Category: same as explained in point 2 above

• Task Name: based on what design will be worked on. It has a character limitation to give enough space for other information. It will be applied to the design file name as well

• Owner: the team member's name who is responsible for the work inside the file

• Screenshot: part of a screen capture from the design

6. Archive All Unused Design Files

The last part of this restructuring process was checking all the files stored inside the UX Team Figma environment to find all the unused designs. 

We talked with all the team members, confirming whether the files were still needed. We selected all the files that were last edited more than a year ago. Once we got the confirmation, we put all the files in the “Archive” project folder, so we still have the backup if somehow we need it in the future.