Because of its cloud-based platform and ease of use, landing a spot as the second most preferred interface design tool amongst product and UX designers in 2019.
Its commitment to collaborative design has rapidly evolved and innovated how product teams handle tasks like version control, prototyping, and developer handoff — product managers and developers can now give feedback and comments simultaneously in real-time all in one shared file. And in the post-COVID world of remote work, Figma has been proven to be one of the most powerful tools.
I have a special place in my heart for Figma, primarily because it was the first design tool I've ever used in my career as a product designer. Having some familiarity with Adobe CC, the overall interface was extremely intuitive for me, and the learning curve for adopting Figma's toolkit of components, frames, and design libraries was relatively easy.
Figma has opened up limitless possibilities for me to venture deeper into different facets of visual design and web design.
Now somewhat established into my career as a product designer, Figma remains my go-to UI design tool for wireframing and prototyping because of its fluidity and swiftness. But as my personal projects and work continues to grow, I've come across a problem: organization. My file browser is cluttered with tons of wireframes and prototypes that I've created and/or viewed from giving feedback on work from other designers, and searching for a file becomes tedious and sometimes impossible.
For this design challenge, I've decided to take a jab at solving this convoluted form of file management:
HOW CAN I MAKE FIGMA’S FILE ORGANIZATION MORE MANAGEABLE AND LESS CLUTTERED?
In order to validate my hypotheses, I started off with doing some research to see how users feel about Figma.
For the most part, it was difficult finding negative reviews because of the company's dedication to creating a product that accounts for so many different pain points. Virtually everyone feels positively towards the design tool, and the majority of negative reviews were critical on development (e.g. too performance heavy, no offline use, load time). People just love Figma.
However, as I scanned for people's thoughts on Figma's organization system, I was happy to find out that my hypothesis was right — many individuals feel that file management needs some improvements.
To further understand why a leading design company like Figma opted to design its organization system like this, I conducted an end-to-end product audit on the file browser feature.
Figma's Help documentation surrounding the file browser places a special emphasis on collaboration with Teams, which is consequently the only system of file management. According to Figma,
The Recently Viewed page is the first page that users are greeted with when they open Figma — here users can see contextual information of the files they last opened as well as where the file is located.
However, there is no organization system for files that are not nested within your Drafts or Teams, rendering navigation for those items essentially useless.
You can see how this can be ineffective not only for personal users, but also for cross-functional product teams, where ideation sessions and design sprints can rely heavily on external Figma files (e.g. designers referencing UI kits/design systems).
Additionally, without any local metadata or contextual information presented, searching for specific cards can become really messy; all specific projects that you have opened or are shared with you are located in your Drafts (if not located in a specific team).
Also called Universal Search, the Search page discovers all resources within your Figma account. When users are attempting to search for members within larger teams or are trying to find more granular-level items, this feature may become problematic as it would reveal all information.
Although useful in theory, this method of search is too rigid in that users cannot find files within specific domains.
Drafts were created to serve as an ideation hub where users can experiment in a workspace. Figma intended users to migrate these drafts over into Teams, but if users don't utilize Teams, drafts remain nested within this page forever.
As a result, the Drafts page and Figma as a whole eventually turn into an aggregated collection of files that have no relation to each other at all.
In designing a collaborative environment for teams and also to stay on track with business goals, Figma had overlooked personal users when they developed the file browser.
In order to consolidate files, all individuals must utilize Teams, adding a project to their Favorite Projects so that it appears in the menu for easy dragging-and-dropping. From the lens of a standalone user, this forces users to create a one-person team to organize drafts.
As this product audit was based on my personal outlook on usability, I also conducted several informal user interviews with avid Figma users who struggle with organization in order to validate and uncover more issues within the File Browser.
"I've never used FIGMA Teams in my entire life. I used to use thumbnails as a quick way to visually mark the card in Drafts, but I got lazy."
"I always clear out my recents at the end of the work week just so I can live more peacefully…"
"I don't really understand what Drafts mean, but I have hundreds of drafts in Recently Viewed I have to shuffle through to get through someone else's design file from a while ago."
From these insights, I was able to assess the scope of the main issue at hand:
Figma's organization system was designed for teams and fails to account for standalone users, lacking essential file management features.
From the UX audit and user feedback, it's evident that there's a pressing issue with the lack of segmentation features. By consolidating the structure of Recently Viewed and Drafts into one along with a dynamic search bar that is globally and locally adapted to all pages, the overall discoverability of files is improved and file management becomes much more swift, simple, and segmented.
Focus on reducing the amount of clutter by consolidating as much information as possible through folders and search.
I pinpointed the most salient issues that a user may come across in the process of finding files in preparation for potential design explorations.
Universal search can potentially provide too much information to users, making it difficult for users to access their search queries.
Solution: A dynamically adaptable search to find items locally and globally.
With prototypes being interactive carbon copies of design files, this occupies unnecessary real estate in both list and grid view in Recents.
Solution: Categorization/tagging system that segments and filters different types of files (and/or teams as well), consolidating prototype file and design file into one using menus.
For files not nested within Drafts or Teams, they stockpile up in Recently Viewed. In accessing Figma files from other users, users must dig through tons of their own files in Recently Viewed.
Solution: Tab exploration to create new hub for files that are not within your workspace.
Taking into consideration a macro-level view of Figma, the central focus lies within the design application experience. Therefore, upon the new redesign, the overall rigid integrity of the File Browser should remain intact to ensure that it does not overstep the workflow experience.
I took a look into Figma's existing design system to learn and understand each component — this would later down the line help me determine how to design novel features following the integrity of Figma's design principles.
From there, I was able to lay the foundation for my first wireframe — this further helped me visualize how site architecture would work (e.g. Home encompasses both Recently Viewed and Files rather than segmenting them into two different pages).
Figma's sidebar has the most valuable real estate in the user interface, so I did a lot of explorations here. The concept of Files and Folders in 2 were something that I personally wanted to explore more, as it built off the current UI of Drafts.
However, as I continued to think about how this may change the rigidity of Figma's File Browser, I opted for options 1, 3, and 4, since the concept of folders requires the nesting of folders that can cause a lot of clutter within the sidebar.
Upon documenting potential design explorations and feature prioritization, I came up with several features that aimed to optimize the File Browser. My final iteration is documented below —
Sticking with sidebar iteration 1, Home now serves as the new hub for all of your files. Introducing Figma Folders, this new form of segmentation makes it easy for individuals to drag and drop their files in Grid View (or they could just scrap and drag it to the Trash in the sidebar).
Duplicate files for design files and prototypes seemed a bit convoluted in grid view as well, and I was able to solve this by making prototype buttons on all design files visible at all times. This plays the last viewed prototype, making it easier than ever to get to previews.
In List View, individuals now can see who owns the file. This opens up a lot of competitive growth opportunities for Figma Community, as clicking into an owner would take them to their page, creating a more engaged and interactive experience for users.
Files are now color coded depending on their file type. This means when opening prototypes and design files from other individuals, users can now easily keep track of what and where each file is.
In regards to accessing prototypes for list view, users can right-click the menu to run a prototype from any design file.
Other dropdown features like showing file location and favoriting were also added for more effective ease-of-use.
I also decided to make a tradeoff in segmenting information into the Home page, where I reduced the amount of cards shown in order to avoid an overwhelming user experience.
Still, users can access all files within their Folders and Recently Viewed — just click into the title to see all of your recent documents and folders. Breadcrumbs were added for simple navigation across pages.
The process of dynamic search must be the most fundamental part of this Figma redesign. In place of an unnecessary secondary title, the search bar is now part of the global navigation on every page. This means more real estate for getting to what's important: designing.
Figma's original intention of a universal search was done poorly as users would be greeted with a search of all of Figma rather than within a page. What's unique about this dynamic search is that it parses information locally first and then offers individuals the option to search globally within all of Figma.
The most important part with design challenges like this is to iterate, iterate, and iterate. These features are simply one exploration of how file management systems can be optimized, but there are millions of other possibilities.
There's a lot of potential business value that I didn't touch upon within this UX case study that I'd also want to explore (like leveraging the engagement from Figma Community for paid design software plugins).
I would have personally liked to conduct A/B testing with future iterations to determine which features work and which features don't. I set 3 days to complete this design challenge to see how much I could accomplish within my design process as well as where I lag. In retrospect, the most tedious part has definitely been the amount of research and writing involved. Had I had more time, I would've loved to work on refining my case study with more interactive visualizations.
This case study was done as part of the KPCB's 2021 Design Fellowship application.
A special thank you to Hayes, Colleen, and Conner for their tremendous support in this extensive case study. Super grateful for all of the help you guys gave me in these short 3 days — this was one of the most arduous tasks I've done in a relatively short timespan, and I couldn't have done it without you guys!