Looking to improve your Figma file organization?
As one progresses in the design of a website or a product, it usually happens that the order established at the beginning becomes obsolete, and one ends up getting used to navigating through the chaos.
To accomplish an efficient figma file organization throughout the entire design process it is best to define a scalable file structure from the very beginning.
Here at LoopStudio, we developed simple guidelines to improve our file organization.
Defining the Scope of the project
When starting the project, you can ask yourself some questions that will help you determine the most accurate file structure:
- Is the project a product or a website?
- Does it have dark and light modes?
- In how many breakpoints are you designing?
- Does the product have different types of users with different permissions or application views?
- Are you going to work on the component library?
Figma File Organization: How to do it properly?
Let’s see the steps for a healthy Figma file organization.
1. Cover
All of your Figma files must contain a cover, (it should always be in the first tab of the file). This way team members can easily identify the file at a glance and save time when searching for it.
Adding extra information to the cover could save some time when searching for a file (e.x. tag status, tag mode, description).
2. Overview/Index
Add an index of the file in the second tab of each Figma file. You can provide a preview look and/or quick information about your design.
Linking the items of the index to the actual design will improve the navigation of people who access the file (remember to link all of the resources used or related to the files, even external ones or the ones located in different files inside the team, (e.x. Figjam files, components libraries).
Status tags with references
To avoid getting people confused about the status of each design, you can use a labeling system with colors for all of your designs. A possible way of labeling could be:
- Design in Progress
- Waiting for Approval
- Approved waiting for Dev
- Ready on Stage
You can add these references in the third tab of your Figma file; that way, people who see the file for the first time can easily understand the color coding.
And create the component called label so that you can later use each of its variants when needed.
Design File Organization
Now let’s talk about design file organization while working on Figma projects.
1. User Flows & Prototypes
These two items are a bit more complex to systematize because they depend a lot on the scope of the project.
There are probably a lot of ways of organizing them, but I laid out three possible ways that can meet the needs of most projects.
2. File archive
Never delete anything. Instead, create an archive. Keep all of the flows separated by page or section, making them easier to find if you need to go back to them. It is practical for it to be found within the same file to which the designs belong, but if it is full of elements the solution will be to make them a separate file, that way you avoid making the file heavier with unnecessary elements.
Component library file organization
When designing a component library, simplicity and organization are key.
The most efficient solution is you divide and group the designs according to their functionality.
Miscellaneous
As designers, we are used to being asked to work on presentations and/or apply our designs to mockups. If this is your case, having those designs in a different file is the most recommended.
Final Thoughts
Taking the time at the beginning of the project to generate a clear and orderly file structure will save you a lot of time.
As the project evolves your Figma team should look pretty much like this:
