This is some text inside of a div block.
.
This is some text inside of a div block.
Home
1. Mastering Figma variables
1
.
5

Keeping your system healthy as it grows

Because variables don’t clean up after themselves

Setting up your variables is one thing — keeping them sane over time is another. As your team grows, your product evolves, and new themes sneak in, things can get messy fast. Without some regular upkeep, even the cleanest setup turns into a pile of “what is this and why does it exist?”

Here’s how to keep your variable system sharp, scalable, and easy for anyone to understand — even future you.

1. Run regular audits

Design systems aren’t static — and your variables shouldn’t be either.

Make time every month or quarter to do a quick sweep:

  • Are any variables unused or outdated?
  • Has naming drifted from your conventions?
    Are there duplicates hiding in different collections?
    Do your modes and collections still make sense?

🔍 Use plugins like Variable Search and sorting tools — they make cleanup way faster.

2. Don’t delete — deprecate

If you spot variables that are no longer in use, don’t rip them out immediately. That’s a fast track to broken components.

Instead:

  • Move them into a deprecated/ group
  • Add a quick note so your team knows it’s on the way out
  • Flag any design files that still rely on it

This gives teams time to update things gradually, without breaking stuff mid-sprint.

3. Write down the logic (yes, really)

You know what spacing/m or color/brand/neutral means. But will someone new next month?

Using a documentation tool like Supernova helps. Cover things like:

  • How your spacing scale works
  • Which color tokens are brand vs neutral
  • What each mode is for
  • Who owns what (and who to ping with questions)

It doesn’t need to be perfect — just helpful. Checkout how our customers at Greenhouse Design System did it for inspiration:

💡Tip:

We have more juicy customer examples for you in chapter 3.1!

4. Loop in devs early and often

Once your variables are syncing to Supernova, they become design tokens — and those flow straight into code. Developers rely on your structure to:

  • Build consistent themes
  • Automate outputs
  • Scale UI (components) across platforms

Bonus: aligned naming = faster builds, fewer questions.

So don’t just design for design. Make sure your naming, scoping, and logic translate to code in a way that makes sense. Especially if you have them plugged in to code using automations which brings us to point number 5 *hint-hint*

5. Let Supernova do the heavy lifting

Once your variables are in Supernova, you unlock:

  • Version control for your tokens
  • Code automation (CSS, SCSS, JSON, Android, iOS…)
  • Multi-brand, multi-mode support
  • Easy documentation, changelogs, and governance

Supernova turns your variable setup into a reliable system — one that scales without constant micromanaging.

TL;DR: A good system needs love

Even the best variable structure won’t maintain itself. Keep yours healthy with:

  • Regular audits
  • Clear naming and documentation
  • A bit of cross-team communication
  • The right tools to do the heavy lifting

When everyone understands the system, maintaining it doesn’t feel like work — it just works.