Organize Figma projects like a pro ??

Welcome back. Last week was one for the books. Config 2024 was a d*mn good time , from hearing brilliant speakers to hanging at the after parties to accidentally blocking an intersection with our driverless car . I knew we’d get some huge announcements from Figma, but I wasn’t prepared for how meaningful it was to hang out with so many of you. I have a lot of thoughts about Figma AI, UI3, and Figma Slides, but I want to know what you think first. Comment below and let me know.

Since we’re all exhausted from Config (and ready for the holiday weekend in the US), I’m keeping things short, sweet, and Figma-themed in today’s edition. Let's get into it.

—Tommy (@DesignerTom )

The Wireframe:

• How to organize your Figma projects
• Behind the scenes of real designers’ Figma projects
• My hot take on naming layers

Staying Organized in Figma

You know that feeling when you open Figma…and it looks like a tornado hit? Projects scattered everywhere, mysterious drafts lurking in corners, and files with names like "FINAL_FINAL_v2_ACTUALLY_FINAL.”

We’ve all been there…and all sworn we’d get better about Figma organization. Because staying on top of your projects is how you go from frantic searching and missed deadlines to efficiency, scalability, and professional sanity.

Today, I’m sharing my own process for keeping things straight Figma. Let’s get into it →

A quick caveat: While Figma’s new Visual Search AI feature will help you better locate your files, it can only work with the data you feed it—and can’t magically distinguish between your fifth button iteration and the button file you pulled as inspiration if you labeled both as “btn.” Even the best AI requires context. This is how I provide it.

Organizing and naming pages

Every part of your process should be documented, which is why I keep a base foundation of pages for each of my design files and organize them by utility:

• Inspiration: screen grabs of design influence for reference
• Explorations: a playground for my ideas, not meant to be used in production
• Iterations: Each iteration of the actual design gets its own page. This is where the heavy lifting happens. My naming convention for iterations is “[Feature/Product Name] - Iteration 1” (e.g. “Customer Dashboard - Iteration 1”)

Naming artboards

Once you start designing and iterating, you’ll find yourself navigating multiple artboards or frames. The key? Order each one—this becomes especially important during prototyping. My naming convention accounts for…

• Workflow: the path being explored
• Sequence: the current step in the path
• Variation: the options for the current step

For example, designing the first-time login experience of a dashboard might look something like this:

• 1.0 First Time Login
• 1.1 First Time Login
• 1.2A First Time Login
• 1.2B First Time Login

Grouping

Naming artboards or frames is a great start for smaller workflows. But when the number of workflows on a single page grows into a giant workspace, it’s time to use some visual grouping. Here’s how:

• Draw a large rectangle around the grouped workflow
• Add a title for the workflow name

Floating lists

Sometimes, it’s not obvious how complex interactions should behave or why a design decision was made. Instead of laboring over a comprehensive write-up (that, in all likelihood, no one will read), utilize floating lists directly on your artboards:

• Grab the type tool and document a bullet-point list of raw thoughts.
• Position it directly to the top, left, or right of the corresponding artboard and increase the font size for visibility.

Redline one-pagers

While floating lists can sufficiently explain most design decisions, some interactions or visual patterns need to be explained in-depth. That’s when redline one-pagers come in.

On these separate one-pagers, I capture individual components and their various stages of activity. This is also where I quickly define the name of the variation, triggers, on-the-fly usage rules, and intentions. Remember: This kind of documentation is not meant to replace formal design system references or developer handoffs. It’s just an easy, efficient way to organize versioning and intent—even if you’re a design team of one.

The bottom line: There's no one-size-fits-all solution to Figma organization. You’ll have to experiment to find what clicks for your workflow. My challenge for you? Pick one idea from this newsletter, try it out, then iterate and make it your own. The goal isn't perfection—it's progress.

Remember, a well-organized Figma workspace is about freeing up your mental energy to focus on what really matters: killer designs.

Figma-to-Framer in seconds

Know how to copy and paste? Then you know how to use Figma in Framer. You can speed up your design workflow today just by installing the plugin.

It’s as easy as…

1. Install the Figma to HTML with Framer plugin
2. In Figma, select what you want to copy
3. Go to the Figma menu → Plugins → Figma to HTML with Framer
4. In Framer, open a new or existing project
5. Paste on the canvas

Are you ready to design, publish, and launch fast? Check out Framer today .

News, Tools, and Resources: Becoming a Figma Expert

• Handoff Helpers is an incredible set of components made by my friend Ridd to help designers better annotate, organize, and document designs in Figma.
• Jayneil Dalal’s Sneak Peek series dives into the real Figma files of designers from big tech companies—a must watch.
• Mixpanel’s Figma annotation kit is a great starting spot as you discover what system works best for you.
• Check out how Deliveroo made its Figma workflow more efficient with organization.

Got a great tool, podcast episode, idea, or something else? Comment below and tell me what’s up.

Hot Take: Stop Stressing Over Naming Layers

I think we’re spending too much time talking about naming every layer—especially now that Figma’s AI can do it for us automatically.

Plus? Naming layers doesn’t help PMs or engineers easily navigate your Figma files—it still requires them to snoop around within the project to find the answers they need. That’s why I recommend creating strategic thumbnails for each Figma file. Here’s what mine look like:

Try this: These thumbnail templates are simple to use and include color-coding to help team members get a high-level sense of progress.

The UX Tools Job Board

• Here’s a great job for those early days of a design career: Google is hiring an entry-level user experience researcher to guide design decisions.
• Cloud-based software company Mat3ra is building a comprehensive web-based platform for digital materials R&D, and they need a UX design lead to help them uplevel.
• This is a cool one for one of the most well-known consumer interfaces out there: Duolingo is bringing on a senior product designer .

Thanks for reading. See you next week!

Enjoying this newsletter? Let us know here .