Figma Folders & Tags

Problem

Figma users face significant challenges with cluttered and disorganised files, leading to wasted time searching and reduced workflow efficiency. A highly requested feature within the Figma community (over 3500 votes across various threads, with one key thread reaching 1200+ votes since 2021) highlights the urgent need for improved file organisation.

Impact

This project addresses a core user pain point by introducing intuitive folder and tag systems directly within Figma. This enhancement aims to:

• Streamline Navigation: Reduce the time spent searching for files by providing clear hierarchical structures and flexible categorisation.
• Improve Collaboration: Facilitate easier sharing and referencing of files within teams.
• Boost Productivity: Allow designers to focus on their work instead of managing disorganised assets.
• Enhance User Satisfaction: Address a long-standing community request, leading to a more positive and efficient user experience.

Solution

This is a concept for integrating folders and tags into Figma's interface, drawing inspiration from established best practices in other design and productivity tools.

• Intuitive Folder Structure: Inspired by VS Code, the proposed folder system features clear hierarchies with indent lines and distinctive icons for easy navigation of files, projects, and nested folders. New folder and project icons were designed for visual clarity.
• Flexible Tagging System: Modeled after Notion's user-friendly tags, this system allows users to quickly add and edit tags for files, projects, and folders. A new tag filter feature would enable efficient filtering and retrieval of assets based on assigned tags.
• Streamlined Team Switching: To address clutter for users in multiple teams, a redesigned team selection dropdown with a potential search functionality is proposed. This offers a cleaner and more efficient way to navigate between different team workspaces.

My Role

I delved into user feedback, analysed pain points, and designed a conceptual solution integrating folders and tags into the Figma interface. This involved:

• User Research Synthesis: Analysing Figma community forum feedback to identify key user needs and frustrations.
• Comparative Analysis: Drawing inspiration from file organisation systems in tools like VS Code and Notion.
• Interaction Design: Proposing intuitive UI elements for folder creation, tagging, and filtering.
• Visual Design: Creating mockups and new icons to illustrate the proposed features.