Intro
I can import an HTML prototype into Figma in under a minute. The layers arrive as a mess, the colors sometimes map to the right variables, and everything else needs to be rebuilt. That gap between “imported” and “usable” is huge.
Where Figma stands today
Figma makes importing AI-generated HTML easy. Generate what you want, use figma2code to import it, and boom—it’s editable in Figma. But once those frames are in your file, only the colors have a real chance of linking to your design tokens. Components, icons, text styles, and spacing remain disconnected from your design system. You still have to assign each one by hand.
The layer structure doesn’t help. Strange Auto Layout configurations, nested frames, and a nine-level Layers panel turn a five-minute import into an afternoon of renaming and reparenting.
Ask Figma’s AI to generate a screen directly on the canvas, and you wait—not seconds, but minutes—with nothing to look at until it finishes. If the result misses the brief, you’ve paid the full token cost and wasted your time, only to find out at the end rather than partway through.
The real obstacle isn’t Figma AI. It’s the canvas.
Tools like Magic Path and Paper MCP generate screens quickly because their canvases run on an HTML/CSS browser architecture. Figma’s canvas relies on GPU and WebGL rendering, built for a different job: smoothly panning and zooming across thousands of vector shapes, not streaming AI-generated layouts in real time. That architecture is why Figma’s AI generation lags behind browser-native tools. It’s not a bug that can be patched in the next release; it’s the foundation the entire renderer sits on.
None of that takes away from what Figma does well. Comments appear inline, developers can annotate frames directly, Jira tickets are easy to link, and Figma MCP helps speed up handoff. An entire team can open the same file at once, with everything immediately accessible. On top of that, designers still want room to explore without an AI layer inserted between them and the canvas: small tweaks, quick iterations, and the kind of hands-on craft that AI tends to complicate rather than accelerate.
What I actually want
Let AI build the first pass, fully wired to a real design system, and the equation changes. No more rebuilding a prototype by hand, cleaning up Auto Layout, or hunting down which component matches which label. The screen arrives already built a great starting point to iterate from and make your product and its experience stand out. Let’s be honest: designing a profile screen from scratch no longer makes sense. Use AI to move faster on those utility screens, then spend the time you save elevating the key screens at the heart of your product.
Untitled UI is the design system I keep coming back to for this. It connects design and development more tightly than most systems I’ve worked with, and it ships with an extensive library of layouts. That gives an AI agent something concrete to build screens from instead of forcing it to guess at the structure. Its components, layouts, and tokens are perfectly synchronized between code and design. For React, I haven’t found another framework that is as useful and reliable as Untitled UI.
Building my own workaround
So I built a tool to close the gap myself rather than wait for Figma to add real AI support.
The core idea is simple: design a complete flow with AI, generate it directly using real Untitled UI React components, and then push the result into Figma through a plugin that keeps everything linked to the design system during import.
The editor works like Webflow for a design system. Click an element and adjust its properties within the bounds of the tokens that Untitled UI and Tailwind actually define—not with free-form colors or spacing values that drift away from your system the moment someone enters a hex code.
A few pieces make that possible:
Real components, not shapes. Every element on the canvas is an actual Untitled UI component, built on React Aria. Insert a button and you get the button, keyboard behavior and screen-reader support included, not a rectangle with a label glued on.
Export that matches what you see. Every frame is generated based on working React and TSX, with the correct imports, props, and Tailwind classes already in place. What renders on the canvas is exact code.
A design-system editor built for speed. Three panels, side by side: tokens on the left, a live component preview in the middle, generated theme CSS on the right. Change a brand color and the retint carries across the whole ramp, hue and saturation both, even on a near-gray neutral scale. Adjust a radius token and a “keep in scale” toggle scales the rest of the ramp to match, so a button and a modal corner stay proportional to each other. Pick a shadow preset and the entire elevation scale re-tunes at once.
A Figma plugin that closes the loop. Paste an exported screen into the plugin and it rebuilds inside Figma, bound to real color variables, text styles, component instances, and spacing tokens from the framework. Paste the theme CSS instead and the plugin updates the matching Figma variables, including shadow effect styles and semantic tokens wired as proper variable aliases, not flat color copies.
An MCP server on top. Any agent can read the design system and add screens to the canvas, running on whatever model and token budget the team already has. The editor doesn’t run its own model. It just gives an agent a system worth building on.
Feature walkthroughs
A canvas built on real components
Every element you place is an actual Untitled UI component, not a shape standing in for one. Insert a button, select, or table and you get the real thing. Keyboard behavior and screen-reader support included. Accessibility is built in from the start.
Export that matches what you see
One click turns a frame into working React and TSX, with the correct imports, props, and Tailwind classes already in place. There’s no cleanup pass between the canvas and the codebase.
A design-system editor to match your brand
Tokens on the left, a live component preview in the middle, and generated theme CSS on the right. Edit a token and watch every component on the canvas update at once, because updating all the Tailwind color tokens in Figma is slow and cumbersome.
From there, the editor gives you a few fast, high-leverage controls: retint an entire color ramp by changing a single swatch (including neutral grays, not just saturated brand colors) Link semantic and component tokens through Utility → Alias → Component layers using a dropdown with live swatches; and keep your radius and shadow scales proportional with a “keep in scale” toggle and one-click shadow-preset retuning.
A Figma plugin that closes the loop
Paste an exported screen into the plugin and it rebuilds inside Figma, bound to real color variables, text styles, component instances, and spacing tokens. Paste the theme CSS instead and it updates the matching Figma variables, shadows included.
An MCP server for AI agents
Any agent can read the design system and add screens straight to the canvas, running on the team’s own model and token budget.
The payoff
The boring parts are the maintenance and the first iteration: updating an entire set of color tokens to match the brand, designing the initial screens, and then checking each one to see whether it actually feels on-brand. With this workflow, that first phase is already done, so you can jump straight to the fun part: making the experience unique.
The custom tool and Figma both run on the same underlying system. A change in one direction (theme tokens generated as code and pushed through the plugin) keeps the other side in sync, preventing the drift that usually occurs between design and development. Engineers can also reuse your theme CSS to update the framework on their side, keeping design and development perfectly aligned.
I’m not trying to replace Figma. I’m buying time until Figma’s own AI catches up and delivers the kind of rendering experience you’d expect.
Want to try it?
The tool is still evolving, and I’d love to see how it performs beyond my own workflows. If you’d like to try it, explore what it can do, or share feedback, please reach out to me.