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. Hit reply 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:
Staying Organized in FigmaYou 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 pagesEvery 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:
Naming artboardsOnce 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…
For example, designing the first-time login experience of a dashboard might look something like this:
GroupingNaming 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:
Floating listsSometimes, 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:
Redline one-pagersWhile 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. 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. TOGETHER WITH FRAMER Figma-to-Framer in secondsKnow 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…
Are you ready to design, publish, and launch fast? Check out Framer today. News, Tools, and Resources: Becoming a Figma Expert
Got a great tool, podcast episode, idea, or something else? Hit reply and tell me what’s up. Hot Take: Stop Stressing Over Naming LayersI 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
Hiring for a design role, or know someone who is? Submit it here to hit the inboxes of 75k+ talented designers. Thanks for reading. See you next week! Enjoying this newsletter? Let us know here. |
Practical lessons, resources, and news for the UX/UI community. Learn the real-world skills, methods, and tools that help you build user-first experiences. We make resources like practical tutorials, the Design Tools Survey, the Design Tools Database, and UX Challenges. Join 60k+ other designers and sign up for the newsletter to get product design mastery in just 5 minutes a week.
Welcome back. Framer just dropped a game-changer for creators: The new Marketplace Dashboard hands creators the keys to their own digital storefronts. As someone who's been in the trenches of design entrepreneurship, I can't overstate how huge this is. It's not just about organization—it's about empowerment. Whether you're a seasoned template maker or just starting out, this is your moment to turn side hustles into serious businesses. —Tommy (@DesignerTom) The Wireframe: How to build your...
Welcome back. Over the long weekend, I've been thinking about isolation in design—and how it can tank your career in this unpredictable tech landscape. That's why I'm doubling down on community and continuous learning. So here's your post-holiday challenge: As we dive back in, think about how you're pushing your craft forward. Join a Slack group. Hit a virtual meetup. Share what you know. Every bit counts. —Tommy (@DesignerTom) The Wireframe: Five tips for mastering micro interactions Create...
Welcome back. As designers, we often focus on technical skills…but what about the subtler signs of growth? This week, I shared a LinkedIn post outlining seven key indicators that you're evolving as a product designer. Spoiler alert: It's not about tools. It's about transforming how you think, communicate, and solve problems. So, as we dive in today, ask yourself: What's been clicking for you lately that has nothing to do with your technical skills? —Tommy (@DesignerTom) The Wireframe:...