intro-banner.jpg
 
Context.jpg
 
 

Figma at a glance

Figma is an all-in-one design and prototyping tool for designers, developers, product managers, etc. It allows team members to collaborate real-time in the same file right in the browser with no app downloading required.

According to a survey by uxtools.co in 2020, Figma was the most used tool in many areas of design.

 

But Figma has some limitations too.

A Challenge For You

You and your team have been working on Project XYZ. Today, you need to look back at some of the older files. Can you find them?

Created with Figma

Figma prototype designed from scratch by me

 

How long did it take you to find these files?

 
step1-empathize.jpg
 

When it comes to navigating, not everyone can always locate the exact file instantly. This can create a hot mess for designers, engineers and product managers because files are scattered all over the place.

 
Screenshots from Youtube: DesignCourse, Traversy Media, Rocksauce, Punit Chawla, and New Pragmatic

Screenshots from Youtube: DesignCourse, Traversy Media, Rocksauce, Punit Chawla, and New Pragmatic

 

How do users organize their files right now?

1️⃣ Team Projects

 
Left Panel.jpg
 

They are useful in helping teams organize and quickly locate projects/files that pertain to that particular team. Users would:

  1. Create a team, then

  2. Create a project, then

  3. Pin files from Recent or Drafts to that project.

👎 Problems with this approach

  • You cannot pin file to project if you don’t have edit access to the file.

  • If you have edit access, but the owner has the file in Drafts, then you cannot pin the file.

  • You need to be on Education Plan in order to add unlimited projects at no extra cost. Not everyone always has a .edu email.

 

2️⃣ File Thumbnails

 
Figma File Navigation Thumbnail.jpg
 

Users also create customizable file covers and set them as thumbnails for easier way-finding.

👎 Problems with this approach

  • You still have to spend some time creating thumbnails

  • You also still have to manually look for the exact file

 
 
step2-define.jpg
 
 
 
 

 How might we help users organize and locate Figma files more easily?

 
 
 
 
step3-ideate.jpg
 
Ideation-1.jpg
Ideation-2.jpg

User flow

 
User Flow.jpg
 

 

 
step4-prototype.jpg
 

Try this challenge again!

You and your team have been working on Project XYZ. Can you find the relevant files?

*This clickable prototype works better if you are on your computer.

Created with Figma

 

Annotations

Next Steps

  • Validate my design by conducting user and usability testing with Figma users

  • Consider how Tags can interact and coexist with Team Projects and Search pages

  • Think of ways to visually notify users if certain files don’t have tags assigned

Other Projects

Portfolio Redesign

3D Me