Rundown ⚡️


Overview

Figma's File Browser is too rigid in terms of organization for the standard user — the way things are organized feels like an overfilled file folder.

Naturally adapted to Teams, Figma has poor consolidation structure for organizing documents for standalone users, making file-finding difficult.

Role

Individual Project (UX Research/Design, Interaction Design)

Timeline

3 Days

Tools

Figma, Pen + Paper

Setting the stage 🎬


Context

Figma is one of the most popular design tools in the market today 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 globally.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eefdce24-2ab6-4163-9b79-64bf6e691029/Frame_1.png

My experience with Figma

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. I designed my first prototype ever in well under an hour, and since then, 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 for all users?

User research 🔎


In order to validate my hypotheses, I started off with doing some research to see how users feel about Figma.

01: Feelings on 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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ac185b64-279a-4c84-b41a-461a6ae0d7a9/Screen_Shot_2020-10-19_at_2.01.42_AM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/3d7055db-58ae-43ab-b7ef-0eb4e3eb89ea/Screen_Shot_2020-10-19_at_2.10.40_AM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bfec819c-a14b-4970-9ad5-a5050edab77d/Screen_Shot_2020-10-19_at_2.11.45_AM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6912ed0c-aacf-402b-a068-3974955141eb/Screen_Shot_2020-10-19_at_2.05.59_AM.png

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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d2669a72-4557-41af-9457-9fb3c46ab9e7/Screen_Shot_2020-10-19_at_1.24.56_AM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5c58e0de-94a7-4d08-a1d2-e8f24f165e3e/Screen_Shot_2020-10-19_at_1.51.56_AM.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0d85786b-c173-4585-83fa-13c1dc3ae361/Screen_Shot_2020-10-19_at_3.04.44_AM.png

02: 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.

File Browser

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,

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dbdc7418-dbcb-4bd9-8bd3-30cd1b370c36/Screen_Shot_2020-10-18_at_9.46.16_PM.png

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

Recently Viewed

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/53857f19-06c9-4cc2-81ed-d70b6a2c69e0/Frame_12.png

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.

No location information presented

No location information presented

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