Figma custom sections, the new way to organize your Figma file browser | by Edward Chechique | Mar, 2023

Custom sections are a new way to organize your Figma file browser

For a long time, I struggled with organizing my sidebar in Figma, although I had a clear method that I shared in my blog.

Last week, Figma launched a new feature that helps us easily organize the left menu in the file manager.

In this blog post, I want to show you how you can use it to organize your files better.

How the files are structured in Figma

In Figma, the files are structured in 3 levels:

Teams include some folders, and folders include the files.

For example, if you work in a product team, you can divide the folder into:

• In design: Design files that you are currently working on and are in progress
• Done: designs that are implemented into the product.
• Archive: files you started but the product team abandoned and are no longer used.
• Design system: Files your UI kit library.

The left menu

Until now, you could only add some files to the favorite section, and if you wanted, you could add folders as a favorite below the product team.

You could only have direct access to your files from the favorite section. This led designers to have many files in one place, which took more work to manage.

What is the new feature, and what does the custom section do?

The main difference after the release of the new feature is that you can now build your sections and add the files you want. Previously, you only had one favorite section where all the files were; now, you can customize many sections according to your needs.

Let’s take a look at these three examples:

• If you work on one product and are currently focused on it, you can add it to the left menu below the section “Working files product A.” That way, you will have direct access to it.
• Imagine that you work on two teams in the product: payments and the help center. You can build two sections and add the files you are currently working on to each of the sections.

Another change this improvement gives us is the ability to open a section and add folders or teams. It was also possible to add folders in the past, but they had to be below the team by default.

For example, if you had two different UI kit libraries, one for desktop and one for iOS, they needed to be below one team on the left menu. Now you can open a “Design system” section and add everything below one section.

You no longer need to have all the teams on the left menu

Previously, you had all the teams you were a member of on the left menu. This caused a lot of issues for designers involved in many teams and projects.

The left menu was full of information that they did not need. Now, if you want to see all your teams in the company, you can click on the top of the left menu on “All teams.” After clicking on it, you will be able to see which teams you are a member of.

How to create a custom section

You can click the plus icon on the left menu and add a new section. Additionally, you can click on the star below the file, select a new section, and send the file directly to the new section.

Also, if you are inside the file, click on the chevron on the top, add a new section, and send the file there.

How to move sections

You can move sections by clicking on them and dragging them above or below other sections.

How to delete sections

To delete a section, right-click the three dots near the section name and select delete. Be aware that if you delete a section, you cannot restore it.

How to rename a section

To rename a section, right-click on the three dots near the section name and select “rename.”

Here is how to move a file to a section

• From the file manager, drag and drop it into the section.
• Click on the star and select the section where you want to move the file.
• If you are in the file, click on the chevron near the file name on the top bar and select the section where you want to move the file.

On what plan does it work?

Custom sections are available only on the organization and enterprise plans.

My suggestions on how to organize the left menu

Every team and organization works differently, so there is no one right way to organize the left bar. However, my suggestion is to add only relevant files or folders to make your work faster and more efficient. For example:

• If you are a junior designer who works only on one file, add only that file.
• If you are a design system designer, add only the UI kits you work on and the relevant files for your daily work.
• If you are a designer on a small design team and work on new improvements and design systems, add the UI kit and the files you work on to two sections: “Design System” and “Working Files.”

Please keep it simple and easy.

In summary

This article introduced the new feature launched by Figma called custom sections. It first discussed how files were organized on Figma before this feature was introduced, then explained the new features and provided examples of how to organize the left menu differently.