ArticleIntroductionText

We’ve been watching the rise of AI coding tools with a mix of curiosity and healthy skepticism. One idea that sounded especially promising was connecting a Figma design system directly to a Cursor AI code editor, so it could generate UI that actually matches the design system.

Text

So I tried exactly that: I wired up a Figma design system to Cursor via MCP and asked it to build UI from our components.Short version: it worked… but only up to a point. Beyond that point, things got weird.This article is a quick field report: what I did, what worked, what broke, and what I’d need to see before recommending this workflow in a production setting.

<h2>Experiment Setup and Constraints</h2>

I easily did Figma-Cursor integration as it’s a simple process that doesn’t involve writing any custom scripts. You just configure native options in both tools.

Now I needed a source of truth for the assistant to read from. I could have used a commercial design system we maintain at Mirumee, but for test purposes, I decided against a large, living organism for a few reasons:

<ul><li>Feature drift in mature files: Our existing system doesn’t fully adopt every brand-new Figma feature. Updating them just for an experiment would be costly.</li><li>Human-first conventions: A design system used in a classic, non-AI workflow carries conventions (naming, component scaling, instance swaps) tailored to human designers. This doesn’t necessarily make parsing easier for an LLM.</li><li>Scale gets in the way: Huge token, typography, and color sets increase ambiguity and make outputs harder to control.</li><li>Easier debugging: A small, fresh system gives complete context and faster troubleshooting.</li></ul>

With those constraints in mind, I created a compact design system and asked Cursor to generate UI against this test environment.

Cursor AI picked up the basic layout concept and referenced the design system in a way that was directionally correct. The assistant understood the general structure and produced a reasonable starting point.&nbsp;At first glance, the tokens in Figma and Cursor <code>design-tokens.css</code> even looked identical, which was promising.

Image

screenshot showing a list of tokens concerning spacing, font size, and line height in Figma and Cursor AI

However, it turned out that the output did not meet the expectations. To tighten things up, I rewrote the prompts to include a button component with its color variables, all the components for a landing page, etc. Most importantly, I specified what it should not do. This didn’t help with the final result, though.

screenshot showing the test of the design system and mockup design

screenshot showing the creation of the design in Figma and Cursor

<h3>1. "Creative” Styling Outside the Design System</h3>

Despite having access to the design system, Cursor regularly decided to improvise. Even when I told it not to invent new styles, it still tended to slip in “helpful” adjustments that broke visual consistency.&nbsp;From a designer’s perspective, this is a dealbreaker. The whole point of connecting Figma is to reduce drift, not battle a second opinion baked into the AI.

<h3>2. Components Without Reliable Variants</h3>

I expected Cursor to use the base button component and respect the defined variants. Instead, some variants were implemented, and others were ignored.&nbsp;It also missed specific details and occasionally combined properties in ways that didn’t match any variant in the design system.

<h3>3. Adding Extra Margins</h3>

Cursor insisted on adding extra spacing and margins around headers, which didn’t come from any tokens at all. You can work around this by repeatedly correcting it or explicitly listing rules like:<ul><li>Do not add margin-top or margin-bottom to headings.</li><li>Do not add any outer margin to the container.</li><li>Only use spacing tokens X, Y, Z.</li></ul>But at that point, it starts to feel like you’re reverse-engineering the assistant rather than getting help from it.

Connecting a Figma design system to Cursor felt like it should be a breakthrough: a single source of truth driving both design and code, with AI filling in the boring parts.In practice, I found it’s not quite there yet.&nbsp;Is it just a prompting problem? The honest answer: partly, yes. I’m almost certain the prompts weren’t perfect. With more time, a stricter prompt template, and a comprehensive “playbook” for guiding the assistant, I could probably get better results.

But that’s also the point. If we have to:<ul><li>Constantly remind the tool not to change fonts or spacing,</li><li>List out everything it’s not allowed to do,</li><li>Double-check every small detail against Figma,</li></ul>then the value proposition starts to erode. At that stage, it’s faster to write the components yourself and use AI for smaller, well-bounded tasks (like generating tests or wiring up state logic).

Integrating a Figma Design System into Cursor AI

MIRUMEE SOFTWARE SP. Z O.O. SP.K.

SERVICES

CASE STUDIES

BREITLING

BUTTERFLY

LULU

ROUGH TRADE

SPAYA.AI

OPENSOURCE

PRODUCT DESIGN

BLOG

CAREERS

LET'S TALK

HOME

HOW WE WORK

Breitling, the legendary luxury watchmaker, embarked on an ambitious project to redefine its e-commerce platform for a global audience. The goal was to create a consistent digital experience that matched their iconic brand and leverage modern composable architecture to ensure scalability, flexibility, and a premium customer journey. Replatforming to Saleor helped Breitling bring its timeless elegance into the digital age.

Breitling

Funded by the Bill and Melinda Gates Foundation, Butterfly has launched a portable ultrasound scanner that can reach the farthest corners of the world, helping those most in need. Creating a flexible and scalable global e-commerce platform was the major requirement. As a result of our collaboration, Butterfly was able to open a fully functional store in a new country every 14 days to reach more users with its revolutionary device.

Butterfly

Created by Bob Young, the founder of Red Hat, Lulu provides custom book printing with a global Print-On-Demand network, making the dreams of thousands of people who want to become authors come true. The long-term roadmap, we created and continually develop together, includes revolutionizing the system of high-speed modern microservices in the backend and crafting groundbreaking features, such as Lulu Book Cover.

Thanks to the extensibility of Saleor headless commerce platform and tailored implementation of top-notch tools, we designed and built an easy-to-extend, composable platform that allowed the recreation of that unmistakable atmosphere Rough Trade has built over the years in its stationary record stores, managing enormous traffic periods and launching this legendary brand to the global market.

Rough Trade

Spaya’s online platform is a game-changer in molecular chemistry that enables scientists to generate retrosynthetic routes by using AI. Such trailblazing products require the use of high-quality front-end technology. Our desire to increase efficiency for this specific environment led to the implementation of tailored functionalities like daily work scenarios and unique real-time collaboration modes.

m-zine

Author

Piotr Flis

Articles

Integrating a Figma Design System into Cursor AI

Author

Articles

Piotr Flis

Integrating a Figma Design System into Cursor AI

Let’s engineer great products and systems together