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?
Figma prototype designed from scratch by me
How long did it take you to find these files?
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
How do users organize their files right now?
1️⃣ Team Projects
They are useful in helping teams organize and quickly locate projects/files that pertain to that particular team. Users would:
Create a team, then
Create a project, then
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
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
How might we help users organize and locate Figma files more easily?
User flow
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.
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
