Brandon Ngo — Figma

My favorite design software...

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.

...but there's one small problem

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?

User research

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.

Product audit

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,

For the purpose of this design challenge, I will focus on three main buckets within the file browser that deal specifically with organization: Recently Viewed, Search, and Drafts.

SEARCH

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

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.

Informal interviews

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."

— USER #1 ON FIGMA TEAMS

"I always clear out my recents at the end of the work week just so I can live more peacefully…"

— USER #2 ON RECENTLY VIEWED

"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."

— USER #3 ON DRAFTS

From these insights, I was able to assess the scope of the main issue at hand:

THE PROBLEM

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.

THE SOLUTION

Focus on reducing the amount of clutter by consolidating as much information as possible through folders and search.

Design opportunities

I pinpointed the most salient issues that a user may come across in the process of finding files in preparation for potential design explorations.

Lack of global navigation

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.

Cluttered duplicate files

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.

Managing files not within your workspace

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.

Redesigning the experience

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.

Sketches & wireframing

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).

SIDEBAR ITERATIONS

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.

Final ship

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 —

Grid View

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.

List View

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.

PROTOTYPeS IN LIST VIeW

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.

File Reduction

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.

Dynamic Search

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.

Closing remarks

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).

Looking forward

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.

Acknowledgements

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!

Reconfiguring Figma’s file system

Decluttering the File Browser to optimize file searching.

Setting the stage