Figma is our home. Not “a tool we use” — home. We spend more hours in Figma per week than in most of the rooms in our apartments.
Like any home, after a while you notice which habits keep it sane and which ones turn it into a chaos museum. These are the ones we’ve settled on, after many shipped projects. None of these are about keyboard shortcuts. Those save you seconds. These save us hours.
The “one hero frame per file” rule
Every Figma file we open has one enormous frame at the top called Current State. It shows exactly what the latest approved version of the product looks like, with nothing experimental in it.
Everything else — work in progress, explorations, parking-lot ideas — lives below, in clearly labeled sections.
Why this matters: when a developer, a PM, or (the worst case) a new team member opens the file, they know in three seconds which screens are real. No more “is this the approved version or an old exploration?” Slack messages.
Component names that describe function, not appearance
Bad component name: “Blue Button Large.” Good component name: “Button / Primary / Large.”
Bad component name: “Card with Image Top.” Good component name: “Card / Project / Featured.”
The difference: when we change the primary color from blue to purple (happens all the time), the first name becomes a lie. The second one stays accurate. We organize every component with slashes, so Figma auto-groups them into tidy dropdowns. Our button library alone has Primary, Secondary, Ghost × Large, Medium, Small × Default, Hover, Active variants — all findable in seconds.
Variables first, colors second
This one is newer — Figma Variables launched properly in 2023 — but it’s transformed us. We never apply raw hex values anymore. Every color on every layer references a variable. Primary/500. Surface/Subtle. Text/Inverse.
Why it matters: when a client says “can we make it a bit warmer?”, we change one value. The entire product shifts. No layer-by-layer hunt.
Same with spacing (Space/4, Space/8, Space/16), radii (Radius/SM, Radius/MD), and typography scales. First time you set this up, it feels like overhead. By the third project, it feels like cheating.
Design-to-dev frames, every single project
At handoff, we don’t just link a Figma file and say “here you go.” We create a dedicated page called For Developers with three frames.
- 01Component Specs — every reusable component with states, spacing, and behavior notes.
- 02Interaction Map — what happens on click, hover, focus for anything non-obvious.
- 03Edge Cases — empty states, error states, loading states, max-length overflow.
This page is the single source of truth during dev. It kills most of the “hey what should happen when…” questions before they get asked.
The Friday cleanup ritual
Every Friday afternoon, whoever was the primary designer on each project spends twenty minutes cleaning up the file.
- 01Archive old exploration frames to a separate Archive page.
- 02Delete duplicate layers.
- 03Rename any frames labeled “Frame 47” or “Group 12.”
- 04Update the Current State hero frame.
- 05Leave a one-sentence note in a comment saying what changed this week.
This sounds trivial. It compounds massively. After six weeks of Friday cleanups, files stay readable forever. After six weeks without them, files turn into landfills nobody wants to open.
The bigger principle
If you’ve read this far, you’ve probably noticed these aren’t really “Figma tricks.” They’re team habits that happen to live inside Figma.
The best design tools don’t save you time through features. They save you time through the discipline you build around them. Figma is just the medium.
We’re not religious about these rules. Projects drift. We occasionally have messy files. But when a team member notices the drift and pulls the file back to standards, it genuinely feels like magic — like walking into a room someone just cleaned. Steal any of these that fit. Ignore the rest.