How to organize Figma

Each designer in Figma eventually has such a large number of files, projects, icons, etc. which form chaos and exclude the ability to quickly search for the necessary information.

It becomes more difficult to use this when several people work on the project, who organize the workspace in their own way.

If you work in a team, you MUST create a clear ecosystem in Figma so that subsequent people in the team do not have questions about how everything works and where to look for everything you need.

Organize Teams, Projects and Files

Let’s Start working

🧩

Team Creation

It is important to start working with the team in the right way. If you have a lot of them, be sure to organize your folders according to them. For example, on the screen on the left you can see Shared Projects (because I'm not the creator of this team, but I'm a member of it) and additional (I'm the creator)

🥽

Project Creation

in each of these teams, you can create a large number of projects with a large number of files (provided that Figma is paid) The free version has restrictions on the number of teams and files in them

⭐

Favourite Files

In Favourite Files, you can pin files that you use constantly (below I will tell you how to do it.)

Design Files in the project

When you open a project in a team, you can see all your files belonging to this project.

Adding a thumbnail image

As you can see, all files have images. I advise you to add images to all important files for quick and easy search. It's easy to add them:

1️⃣

Create a frame and select Set as Thumbnail.

2️⃣

The selected frame will be displayed as a thumbnail of the file.

Add to pinned and favourite files

1️⃣

Frequently used files can also be pinned to the top of the project, to do this, right-click on the file and select Pinned.

2️⃣

The pinned file will appear above.

To add a file to your favourite you need to follow the same steps, but select add to your favourite (favourite are displayed on the left, as I mentioned earlier).

File structure organization

After you figured out the main page and files, you need to properly organize the workspace inside the file. Depending on the size of the project, the organization can be either page-by-page or global (one page with ready-made frames, a page with a UI kit, an archive page, etc.)

“Folder” system organization

Unfortunately, a folder system with a tree has not yet been invented inside the file, so we will make do with what we have. Sort all important pages according to categories. For example, in my case, sorting is done as follows:

1️⃣

Structured system based on groups of developed pages. (client pages, company pages, Lists, profile page, etc.)

2️⃣

Icons display the current process of a particular page.

Frame Status

Inside the page there is also a duplication of statuses, it looks like this:

Tips and tricks

1️⃣

Always try to properly sign your files and components. This makes it easier to search through assets and through the dedicated Figma Walker plugin.

2️⃣

Also sort the components in the UI kit by folders through /

3️⃣

Write down all changes in components and pages in the description field on the right. This will allow you to understand what and when has changed.

4️⃣

Many duplicate files to remember changes that were made a month or a year earlier. It is much more convenient to save to version History (file - save to version history)

Conclusion

Proper organization of your documents and files will allow you to find what you need at any time, optimize the process of teamwork with other designers and frontend developers.