Introducing Kigen: A Design System Generator for Figma

I built Kigen, a Figma plugin that helps you generate design system foundations—colors, typography, spacing, radii, and more—so you don’t have to start from scratch every time.

May 24, 2025 · 3 min read

Kigen

Over the years, I’ve helped a bunch of brands set up their design systems. And honestly? It always starts the same—create some color tokens, typography styles, spacing, radii... over and over again. Same steps, different projects.

Eventually, I thought—why not automate this?

Where It All Started

Design systems are super important when you’re building any app. But creating one from scratch? It takes a lot of time—researching, naming things, figuring out the structure, second-guessing your choices, and renaming things again.

After looking at a ton of different design systems, I noticed something: the foundations are mostly the same.

Take colors, for example. Every brand has its own primary color, sure. But red is red. Green is green. Yellow is yellow. Most of these utility colors barely change. So I started curating a bunch of existing palettes online and putting them together into a solid, reusable base.

First Demo & Early Feedback

I put together a rough demo and shared it—and the response was wild. I got over 200 signups just to test it out. That gave me the push to take it seriously and think about how to properly structure this tool.

I’ve built plugins before, but they were simple. This one was totally different. There were so many pieces to create and manage—tokens, styles, generators, docs. I started planning, prototyping, testing… and then redoing things when they got messy.

Honestly, I restarted the whole project twice. The more I tried to organize it, the more chaotic it became. I kept making new demos and testing them myself, but I realized building something just for me isn’t the same as building something for others to use at scale. It needed to be easier, smoother, more polished.

I started sharing devlogs and behind-the-scenes updates while figuring it all out.

Kigen Website

The Launch

After about 4–5 months of building, refining, and restarting (twice!), I knew it was time to get Kigen out into the world.

I already had around 1,200 people on the waitlist—just from demos and early testing. But when I finally launched v1, things took off fast. In just the first week, over 3,000 people installed the plugin.

The response was wild—way beyond what I expected. I started getting tons of feedback: what worked, what was confusing, what people wanted next. Some of it was super encouraging, and some of it pointed out real issues I hadn’t noticed. Honestly, both kinds helped.

It made one thing clear: people actually wanted this. And now that it’s out there, I’m already planning the next wave of updates and features.

And this is just the beginning.

Why “Kigen”?

At first, I just called it “Project DS” or “DS Generator” while I focused on getting the plugin to actually work. Naming wasn’t a priority—I just wanted to build.

But once things started falling into place, I knew it needed a real name. “Design System Generator” felt too generic, and there were already tons of similar names in the Figma Community.

So I started exploring. After some brainstorming (with a bit of help from ChatGPT), I found the word Kigen—which means origin in Japanese. It felt right. This tool is all about helping you build the foundation of your design system.

Best part? The domain kigen.design was available. So I grabbed it. And yes, it’s live now.

Website - Kigen.design

It's free plugin - Check here

stay hungry, stay foolish

-Steve Jobs

©realvjyvijay verma