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.
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:
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.
At first glance, the tokens in Figma and Cursor design-tokens.css even looked identical, which was promising.
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.
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.
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.
I expected Cursor to use the base button component and respect the defined variants. Instead, some variants were implemented, and others were ignored.
It also missed specific details and occasionally combined properties in ways that didn’t match any variant in the design system.
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:
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.
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:
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).