Keeping files organized for your team

As developers get access to design files, which are filled with dozens of in-progress frames, iterations, components, and more, it's good practice to communicate which parts of the files are ready for implementation and which are still being worked on. File organization and communication were consistent trends among each of the design teams at Expedia, Dropbox, and Cash App and there were a few ways, in particular, that each team approached it.

Naming pages to indicate what's ready for implementation — Each of the designers I spoke with used pages within files to separate what was still being worked on, what was ready for feedback, and what was ready to build, while also making space for the iterations along the way. Did you know you can use emojis in page names? Go ahead, get creative! 🏗️, 💭, 🚢.

How the teams at Cash App (left) and Dropbox (right) organize their pages in Figma.

Create custom thumbnails — It's now possible in Figma to set any frame on the canvas as the file's thumbnail. Just select the frame, right-click, and choose "Set as Thumbnail." These thumbnails appear when browsing through files within the file browser and can help provide additional context for teammates.

Here's a preview of how the file previews look for the teams at Expedia and at Cash App.

A preview of how the design team at Expedia organizes their Figma File Browser.
A preview of how the design team at Cash App organizes their Figma File Browser.