Skip to content

27/10 - Product Design Meetup Kortrijk with Polestar, Design Regio Kortrijk & FTI

Register now

Building at scale, maintaining a big design system, making the handoff to development go smoother: that all sits somewhat outside what it’s built for today. Which is a pity, because we think those are exactly the places where AI assistance shines.

So we built a more powerful version of the Figma MCP ourselves, and we’ve kept extending it ever since. Ours fits the way we work a bit better at the moment. We’re of course keeping a close eye on the official one, and we hope it grows in this direction too.

AI-assisted design

We don’t use Claude to design a new component, that’s the part we don’t want to outsource. We do use it however to create 100 pages based on a design system. To set up 50 variables across 200 components. To translate hundreds of design tokens into a solid CSS system.

As designers we still decide what the button looks like. But rolling that decision out across a library, keeping it consistent and writing it all down for the developers who’ll build it, that’s the other half of a design system, and it’s the part we love automating.

AI is shit at designing but god dammit it can help with everything else around the actual designing”

A few highlights

Rather than run through the whole list, we’ll walk you through a few of our favourite functionalities, and what each one actually makes easier.

Working with lots of variables is effortless & fast

We can list every local variable in a file in 1 go, filtered by collection, so a big system returns only the part you happen to be working in instead of every token in the file. We can also ask for every variable together with the layers that reference it, across every page, which tells you what breaks if you change a token.

And this filtering isn’t only about convenience, it’s about how much information the agent can hold before running out of room. Ask for a big frame in full and you usually get an enormous amount of detail that’s almost never needed and fills your context window in an instant. With our Figma plugin we can reduce the data we receive to the bare essentials, allowing us to work for way longer without running into any usage limits.

Effortless documentation

We love using annotations to add extra context & insights to our interfaces & design systems. They’re the perfect tool to collaborate with developers or visualise the reasoning behind decisions, and AI is quite good at writing those as well.

Unfortunately you can’t read or write these annotations in bulk with Figma’s MCP, so adding this ability to our version was a no-brainer. The ability to document your entire prototype or to retrieve all the developer-related annotations in a design system in one go is a huge time-saver.

Quality control at scale

A regular plugin checks against a fixed set of rules someone else decided on and hands you a list to work through by hand. We check against the rules we describe in plain language, so they’re our own, and the same pass that finds the problems also fixes them in bulk, across the whole library.

We can check for hardcoded fills and strokes, corner radii that really should have been tokens, components missing a description, and text contrast against WCAG AA, making sure our design systems are rock solid, without having to go through each component by hand.

Combine multiple actions into 1 call

We also added a few custom compound tools” that roll a sequence of five to eight calls into one. So, setting up a frame with its fill, its layout and its sizing is a single call rather than a handful of separate round trips.

This not only means Claude needs to do way fewer calls and can go much faster, it also allows it to work more correctly. Since it can create a component in 1 call, it’s easier to keep all the different properties in mind, requiring much less trial and error.

All of these small improvements combined make for a much smoother & more token-efficient AI-assisted design process.

But, is it worth the effort?

Building something like this costs real time, and keeping it working costs more, so of course you might wonder if it makes sense to build & maintain something like this.

However, we can now build software much faster than we did a year ago, so the effort of creating your own plugin keeps shrinking. Something that looked illogical to build twelve months ago now makes perfect sense. And the impact it has on our speed & efficiency, especially when building design systems at scale, is impossible to ignore. So for now, we’ll keep working on this.

Right now we’re still keeping this internally, but reach out if you want to try this in your team and we’ll see how we can help you out.

Read other blog posts

Development

Making website security more accessible for the whole team

Every modern website quietly loads dozens of third-party tools, and a Content Security Policy decides which ones are allowed. Yet that policy is too often a developer-only job buried in the console, when the real work is making it readable for the whole team.

Design

Six lessons from designing AI tools people actually use

AI is part of the products we build every day. Yet integrating AI’ is too often reduced to adding a chatbot or integrating smart suggestions, when the real work is making that technology understandable, reliable and human.

Need help with your digital product?