Figma Folders & Tags

Introduction

I delved into the Figma community feedback, particularly a thread garnering over 1200 votes, expressing the pressing need for enhanced file organisation features. Users consistently advocate for the ability to create folders, subfolders, and tags within projects to alleviate clutter and streamline workflow.

There are other threads as well people as for better organisation features. With those votes as well there are about 3500 votes for either folders/subfolders, tags or categories.

This is the thread I have focused on on the Figma forum which is still open (1st April 2024): https://forum.figma.com/t/create-folders-categories-tags-for-files/273

User Pain Points

Figma users endure the frustration of navigating crowded and disorganised Drafts. Locating specific files amidst a myriad of designs poses a significant challenge, especially when juggling multiple projects across different clients or teams.

What Figma users say

“3 years since the first request, 1000+ votes, but no update.”

“We are not asking them to invent teleportation. I really cannot think of a more basic mundane feature than this…”

“Why is this not a thing yet?? Highly disappointing. This thread has been running since almost the past 3 years. @Figma where you at?”

“I am desperate for this feature now!! Come on Figma give us folders!”

“I don’t see why this request has been ignored / backlogged for 2 years. It would be IMMENSELY helpful for all users regardless of scope. I can see the motivation for not making it available for free account (even though it is very much compromising usability), but also no for paid professional accounts? I am genuinely confused.”

and more…

Proposed Solutions

Several users propose implementing tagging systems or a folder structure within Figma's interface. Additionally, there's a need for plugins to address this issue. Folders offer structured hierarchies, while tags offer flexibility in categorisation based on diverse criteria.

Folders

I took inspiration from VS Code and other coding environments where folders are designed to feature clear hierarchies and intuitive visual cues. I have utilised indent lines and distinctive icons to enhance navigation and file recognition in the filetree. I have created new icons for folders and projects.

With folders you can group files (design files, FigJam boards), projects and other folders as well. See example filetree below.

Tags

For the tags my main inspiration was Notion as I use it every day and I can see how useful the tags can be. I think Notion does a fantastic job by keeping these tags quick and easy to edit. Before Notion I didn’t realise how useful tags can be and I wanted to create something similar in Figma as well.

Inspired by the ease of use of Notion's tags, Figma's tags are designed to be quick and effortless to edit, enhancing user experience and productivity. Tags can be added to files, projects and folders as well. People would also be able to easily filter tags using the new tags filter feature.

User journey

1. Initial Frustration: The designer logs into their Figma account and is greeted by a cluttered dashboard with numerous design files from various projects.
2. Introducing Enhanced File Organisation Tools: Upon logging in, the designer notices a new update from Figma highlighting enhanced file organisation tools. They explore the new features, including the ability to create folders and tags to categorise and organise design files more efficiently.
3. Organising Design Files: The designer quickly creates folders for different projects and categories, such as "Client Projects," "Personal Work," and "Templates.". They also apply relevant tags to each file, such as "In Progress," "Approved," or "Final Version," to streamline navigation and categorisation further.
4. Streamlined Navigation: With the new organisation structure in place, finding specific design files becomes much easier and less time-consuming. They can now quickly locate the files they need by browsing through the organised folders or using tags to filter the designs based on different criteria.
5. Improved Collaboration: Collaboration with team members becomes smoother and more efficient as the designer can easily share relevant designs by simply directing them to the appropriate folder or applying relevant tags.
6. Enhanced Productivity: The designer experiences a significant boost in productivity as they spend less time searching for files and more time focusing on design tasks. They can efficiently manage multiple ongoing projects within Figma without feeling overwhelmed by the disorganisation.
7. Effortless Workflow: With the new file organisation features seamlessly integrated into Figma, the designer no longer needs to rely on workaround solutions or third-party plugins to manage their design assets effectively.
8. Increased Satisfaction: The designer feels more satisfied and empowered with their workflow within Figma, knowing that they have the necessary tools to keep their design files organised and accessible at all times.

Teams

I have also redesigned the way people can change teams. Currently, if you are in a lot of different teams, they will be listed underneath each other along with all the projects. This arrangement can make things very messy for some people, especially if they have numerous projects.

To enhance organisation further, I decided to include a dropdown that people can use to switch between teams. Additionally, I believe this dropdown could be further improved by incorporating a search feature to help users locate teams more quickly. Below, I have included a screenshot demonstrating how this dropdown could work.

Feedback

Your thoughts and feedback are invaluable. Share your insights here to further refine this concept.