How We Use AI to Build Design Systems in Figma

We've been using Claude to build design systems in Figma, and the early results are promising enough that I wanted to write down what we've learned. This isn't a hype piece. It's an honest look at where AI genuinely helps in a design workflow, where it doesn't, and why we think the combination of AI and a human design team is stronger than either on its own.

Starting From a Style Tile

Every design system we build starts with a point of view. Before any AI gets involved, we design a style tile ourselves: the colours, the type, the spacing, the overall feel. That's the part that needs taste and judgement, and it's the part we're not interested in handing off. It sets the direction for everything that follows.

Once we've got that foundation, the question becomes how to turn it into a full, working system inside Figma without burning days on repetitive setup. That's where AI earns its place.

Connecting Claude to Figma via the Console MCP

We hooked Claude up to Figma using the console MCP. That connection is what makes the whole thing practical rather than theoretical. It means Claude can work directly in the file, reading what's there and building what's needed, instead of us copying instructions back and forth.

From a single style tile we'd designed, Claude built out a full design system and component library. Tokens, naming, structure, all sorted properly from the start. If you've ever inherited a Figma file where the colours are named "blue-2" and "blue-2-final" and nobody knows which is live, you'll understand why getting this right at the beginning matters so much.

The Real Win Is Speed on Setup

The honest headline here is speed. Setting up a design system by hand is slow, fiddly work. You're defining tokens, naming layers, organising styles, and making sure everything connects the way it should. None of it is hard exactly, but all of it takes time, and it's the kind of time that doesn't show up in the final design. It's invisible groundwork.

Getting everything into Figma with the correct tokens and naming, sorted properly from the start, is the part AI handles brilliantly. It doesn't get bored, it doesn't fat-finger a hex code on the fortieth colour token, and it doesn't cut corners at the end of a long afternoon. The setup that used to eat into a project now happens fast and clean.

Building Components That Stay On-System

Here's the part that genuinely surprised us. Because Claude built the system, it understands the system. So when we ask it to produce components and UI elements, it uses the right colours and styles automatically. It's not guessing or approximating. It's drawing from the same tokens and rules it helped establish, which means new elements land on-brand and on-system without us having to police every detail.

We've also set up a few rules to keep things disciplined. Claude sticks to consistent spacing and proper auto-layout, so the files stay tidy rather than drifting into the kind of mess that takes hours to untangle later. That consistency isn't just an aesthetic preference. It's what makes a file genuinely usable by the people who come after us.

Why Developer Handoff Gets Easier

A design system is only as good as the handoff. If developers can't read the file, can't find the tokens, or can't trust the spacing, then all the upfront work is wasted. Clean structure, consistent naming, and reliable auto-layout mean the files we hand over are easy to interpret and easy to build from.

This is one of the quieter benefits of getting AI to do the setup. Because the system is built methodically from the ground up, the handoff-ready state is the default rather than a last-minute scramble. Developers get files that behave predictably, and that saves friction on both sides.

The Bigger Payoff: Freeing Up Real Design Work

All of this matters, but it's not actually the point. The point is what it frees up.

With the grunt work handled, we get more time for the parts AI isn't built for. Unpicking tricky UX problems. Working out why a flow feels wrong and what would make it right. Doing the craft-led design that genuinely elevates a user's experience rather than just ticking boxes. These are the things that need a human who understands people, context, and nuance, and they're the things that actually differentiate good design from forgettable design.

We don't see AI as a replacement for that craft. We see it as a way to clear the mechanical work off the table so there's more room for it. The setup, the token wrangling, the component scaffolding: let the machine handle it. The thinking, the problem-solving, the judgement calls: that stays with us.

What This Means for the Work

The result is a workflow that's faster at the start and deeper where it counts. We spend less time on the invisible groundwork and more time on the design decisions that clients actually feel in the finished product. The design systems we ship are more consistent because they're built systematically, and the team is freed up to do the work that needs a human brain.

That balance is what we're most excited about. AI in design systems isn't about removing designers from the equation. It's about getting the boring-but-important parts done properly and quickly, so the genuinely creative work gets the attention it deserves.

We're still early in this, and we'll keep refining how we use it. But the direction feels right: let AI handle the setup, keep the craft where it belongs, and ship better work as a result.

If you're thinking about how AI could fit into your own design workflow, or you need a design system built that developers will actually thank you for, get in touch. We'd love to talk.

Change starts with great design, are you ready?

Let’s turn your vision into something real.
Drop us a line at hello@madmagpies.com or book a call via Calendly

Changes start with great design, are you ready?

Let’s turn your vision into something real.
Drop us a line at hello@madmagpies.com or book a call via Calendly

Change starts with great design, are you ready?

Let’s turn your vision into something real.
Drop us a line at hello@madmagpies.com or book a call via Calendly
Connect with us
Talk to us

hello@madmagpies.com

Connect with us
Talk to us

hello@madmagpies.com

Connect with us
Talk to us

hello@madmagpies.com