Organize a Figma file like a pro; a complete guide

January 22, 2022

It’s easy to lose focus and work without structure when working on Figma files. Because we’re always looking for the best solution, we move and restructure flows and pages a lot. Work not organized can cause chaos in your files and slow your workflow. Here’s how to organize the information in your design files well.

This article shows what works for me, but every team and designer works differently. You can use the techniques as is, but you can adapt them to fit your needs.

Figma files need to be well-organized for this reason

We do not work alone on our Figma design files; there are product managers, developers, QA testers, and other product designers from the design team that uses our files as a reference. Because of that, organizing the design file so that you and your teammates can easily find it and its contents is essential.

How to structure the pages

My favorite way to structure a page is to divide it into sections:

  1. Cover image
  2. Ready to development
  3. Iterations
  4. Research
  5. Design QA
  6. Components
  7. Design decisions (Optional)

Let’s take a deep look at each page:

Cover image (​​thumbnail)

Here you put an image that you’ll see on the Figma main page (I call it the Figma project manager page). It’ll make it easier for you and your team to select the file you want to see.

What should be on the cover

The cover should have essential information to help people understand what’s inside. It includes:

  • Feature or project name
  • Number of the Jira ticket
  • Date of start
  • The status: (Research, design, ready for development, done)
  • Name of the leading designer: For easy contact when needed

What is the recommended size for the cover?

An image size of 1600 x 960px is recommended for the cover. You can also use the size you want. If this is the case, apply the same color you used on the cover artboard to the cover page as a background. That way, the card in the project manager will have one background color.

Tips

  1. You don’t have to make your own cover image; you can download one from the community. Here is an example of a cover I uploaded to the community, but you can find other ones there.
  2. Ensure the cover image page is at the top of the tree so that it will appear as a thumbnail. If you don’t want to add it to the first page on the tree, you can use the “set as thumbnail” feature in Figma. That means no matter what page it is on, the selected artboard will be the cover.
  3. It’s easier to read text from the project manager page if it has a solid color background (not gradient).
  4. Adding the cover image to your design system file as a component will make it easier for everyone to use it.
  5. You can make the statuses a component with variants so people can change them easily.

Ready to dev

Add the design that will be developed on this page. The page must be 100% clean with only the necessary information to make the design to development handoff process easy. Make sure all the screens are built with components and without errors.

Tips

  1. To explain the solution to the developers, make simple flows. Add a title to each flow that describes what the flow is about.
  2. Put notes below the screens to explain extra information that’s hard to explain with the flow. In addition, you can add a voice note using the Voice Memo widget if needed.
  3. Demonstrate how the flow works and where the user clicks to move to the next page. You can add an arrow with a Figma plugin like Overflow. I like to add a hand emoji to explain where the user clicks to move to the next page.
  4. Name each artboard. Avoid using names like Untitled. Instead, write a name that helps understand what’s on the screen and the screen position on the flow. Here’s an example: “the user clicks to pay-08.”
  5. If you need to make a prototype, you can use the screens in this page. (No need to open a particular page)
  6. Put the title page, notes, and hand icon as a component in your design system file. It’ll help you work faster since they’re ready to use.
  7. Be sure to review this page more than once before sending it to development. Each error can delay the release and decrease the product quality. You’re responsible for providing the developers with clean info.

Iterations pages

In this section, you can list your iterations and tests to find the best design. Usually, there’s more than one iteration, so you’ll need more than one page.

I like to show my team the design from the iteration page. When I finish designing the flows, I ask my team what they think (either one-on-one or a design review). I add all their questions and suggestions on the page while I show it to them. Then I duplicate the page and work on it again until it is designed well and ready to go to development.

Tips

  1. Give every iteration page a number like Iteration-1 and Iteration-2. Some designers add a date (Iteration-1 | 10.7.2022).
  2. Organize all the screens. Give the flows and screens names.
  3. I like to use a red point with a text near the places where I want to ask someone from the team a question.
Figma

Questions for the developers.

Research and Inspiration

You can add all the information you get from the team members, the users, and some inspiration you find online. Then all the information about the task is contained within the file, and you don’t need to leave Figma to find it. It is also good when all is there since sometimes team members ask you about things, and you can show them directly from Figma without going outside.

Design QA

After the implementation, you fill out this page with all your design QA findings.

I use this page when I want to show the developers where the gaps are between the design and development.

Since the master design is in the file, I have to copy it from there. I can then explain the error and how to fix it with an image of the error and an image of the correct design.

To learn more about design QA, check out the three articles I wrote about this topic.

Components page

Mostly you’ll use ready components and icons from the design system UI kit, but sometimes you’ll have to create your own, so, inside this page, you add all the new components you designed.

If you don’t want to add the new component to the design system, leave them there. Be aware that Figma enables you to copy and paste components from one file to another without breaking the connection.

Check out this video if you want to learn how to do this.

Design decisions (optional)

It is a page where you can document all the design decisions you and the team agreed on. Having said that, I like to do it outside of Figma since I think Figma is for designing, not a documentation tool.

Check out my article to learn more about Design decisions documentation.

More tips

Here are some tips on how to organize the file:

Give the Figma file a clear name

Give the file a clear name so everyone can find it with the search input. Name the file with the ticket number and the name of the feature or project.

Give the Figma file a clear name.

Layer naming

Because we use components, I don’t see the need to rename every layer in the instances, and I prefer to use the layers name that comes by default from the UI kit.

I want to mention that the components should have a clear naming and structure to keep the UI kit clean and easy to understand, but when we add them as an instance, I don’t think we have to rename them.

Emojis

Emojis can give your Figma file a bit of personality. They’re not necessary, but they make it more “Happy.”

Use pages as a separator

For easier reading, add an empty page and name it like — — — — — — — to separate the sections.

Also, if a section has more than one page, for example, iteration-1, iteration-2, you can use the Tab symbol to make it look like a tree.

Use the Tab to make it look like a tree.

Create a template file

In Figma, you can make a template file so everyone can copy it, and the structure will be ready.

Make sure the designers agree on the structure

All the team designers need to work the same way in their files, which will make work easier for everyone since they have the same understanding.

Your team members can use the structure you designed, but you can hold a workshop to create the structure with them. The most important thing is that the structure will help your members in their design work.

The product team needs to know the structure

Show the structure to the product team members like the product manager, product owner, developers, and the QA testers so they’ll understand how to search and find the information they need.

To summary

This article showed you how to organize information inside Figma.

I showed what the structure l believe is the most useful:

  1. Cover image
  2. Ready to development
  3. Iterations
  4. Research
  5. Design QA
  6. Components
  7. Design decisions (Optional)

Afterward, we looked at each section, and I shared tips for organizing every page.

Remember that every designer and every team works differently, so you may need to make some tweaks to make it work for your team.

Thank you for reading the article. I hope it helped you understand how to organize the information in your Figma files.

Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

Mia Vuong
UX/UI Director