The Two Figma Plugins That Changed How I Build Design Systems

Cover of my youtuve video

If you’re building a design system in Figma, there are two plugins you need in your life. I’m not talking about “nice-to-have” little helpers — I mean the kind of tools that save you hours of work, keep your files clean, and make your whole workflow feel… well, smarter.

I use them every single time: Kigen and Variable Visualizer. Here’s why they’ve become my non-negotiables.

Before the Plugins — Why Variables Even Matter

Let’s rewind for a second.

Before we had variables and tokenization, building a design system was… painful. I’d design the UI, and then a developer would inspect each element, note the colors, font sizes, spacing, and manually recreate it all in code. Slow. Messy. And full of tiny errors.

Now? We store those values as variables — little named tokens like Primary-Color or Base-Spacing. Change it once, and it updates everywhere. Developers pull the exact same tokens into code. No hunting. No manual fixes. No “why does this button look slightly different” headaches.

That’s where Kigen and Variable Visualizer come in — they don’t just help you use variables… they help you create, organize, and see them in a way that makes your system easy to maintain.

Watch the video I have made about these two plugins:

[embed]My Youtube video

Plugin #1 — Kigen

Kigen is my go-to for generating and organizing variables right in Figma.

I open it from the Plugins & Widgets tab, click Start, and suddenly I’ve got a full toolkit for creating colors, typography, spacing, and more — all as proper tokens.

Here’s what makes it awesome:

• Instant color palettes — Generate shades from scratch or load palettes inspired by Material, Tailwind, Fluent, and more. Then tweak them to match your brand perfectly.
• Contrast controls — Set the contrast shift and let Kigen build accessible color scales for you.
• Typography tokens — Define font sizes, weights, and line heights with scaling already baked in.
• Spacing, radii, and layout variables — Keep your whole system consistent without guessing numbers.
• Semantic mappings — Map tokens to functional names like Success or Error, so your design and code speak the same language.
• Developer-friendly exports — Export everything as JSON, CSS, Tailwind config, or JS so your devs can plug it straight into code.

The best part? When Kigen generates something, it’s instantly styled and linked — no extra setup. It’s like starting a design system on “easy mode.”

Plugin #2 — Variable Visualizer

Once my tokens are set up, I use Variable Visualizer to… well, actually see what’s going on.

Instead of scrolling through lists of variables, I get a visual map of how everything connects. It’s like switching from reading a city map in text form to looking at Google Maps.

Why it’s a game-changer:

• Visual connections — See exactly which variables are linked and how they flow between collections.
• Drag-and-drop linking — Connect one variable’s output to another’s input in seconds (great for color scales and theme variations).
• Search and jump — Find any variable instantly and see where it’s used.
• Layer insights — Select a layer and see exactly which variables it’s tied to.
• Easier auditing — Spot gaps, duplicates, or weird connections you’d never notice in a list view.
• Oprational nodes— Use color and size scaling node to create variables that store scaled valuse from primary value you gave them. avoide scalling values yourself.

When your design system grows big, this kind of overview saves your brain from melting.

Why I Use Them Together

Here’s my workflow:

• Kigen → Create, define, and style the variables.
• Variable Visualizer → Map, connect, and maintain them visually.

Together, they let me go from blank Figma file to fully tokenized, documented, and mapped design system in minutes — without manual edits or messy updates.

Final Thoughts

If you’re serious about building a design system in Figma, start with these two plugins. They’ll keep your system clean, scalable, and way easier to manage — so you can focus on actually designing instead of chasing inconsistencies.

☕ Now I’m off to grab a coffee and see what other design rules I can break today… the fun ones, of course.

Thanks for reading!

If you used the file in your work, I’d love to see what you made. Drop a comment below or tag me on socials. And if there’s a component you wish existed, tell me — I might just build it next.

Get connected with me via channel below:

📹 Youtube

🔗 Discord

🔗 Instagram

🔗 X

🔗 TikTok