MCP connection
AI to Figma: send generated UI from Claude or Cursor to Figma
Connect your AI tool to HTML to Frames over MCP. The pages it builds land in your open plugin as editable, Auto Layout layers.
- Works with Claude Code, Claude Desktop, Cursor and other MCP clients
- Three tools: import_html, import_url, import_status
- Token stored only as a hash
Coming soon to Figma Community
AI to Figma is a workflow problem more than a generation problem. Tools like Claude and Cursor can produce a convincing landing page or dashboard in HTML within minutes, but that output lives in a code file or a browser preview. To review it with a team, combine it with an existing design system or keep iterating visually, it needs to be in Figma, as layers, not as a screenshot.
HTML to Frames, the Figma plugin by EUREKA!, provides an MCP connection for exactly that. Open the plugin's AI tab, copy the token and the setup snippet it shows, and add it to Claude Code, Claude Desktop, Cursor or any MCP client. Your AI tool then gets three tools: import_html to send HTML it has written (up to 2 MB), import_url to import a page by address, and import_status to check on a job.
When the AI calls one of them, the page lands in your open HTML to Frames plugin and is imported with your own plan and settings. You get the same result as any other import: editable text, vectors, images, verified Auto Layout and, on Pro, variables, styles and components.
This is useful for designers who prototype with AI and want to refine the result by hand, for developers who generate UI and need to hand it to design, and for teams that want AI drafts to snap to their existing styles.
The guide AI-generated UI to Figma with MCP walks through a full session. To see what the conversion preserves, read HTML to Figma, and for how token and data are handled, see security.
Connecting an AI tool to Figma
- 01
Open the AI tab in the plugin
Start HTML to Frames in Figma and switch to the AI tab to get your connection token.
- 02
Copy the setup into your tool
Paste the copy-paste setup into Claude Code, Claude Desktop, Cursor or another MCP client.
- 03
Ask the AI to send a page
The AI calls import_html with the HTML it wrote, or import_url with an address.
- 04
Review it in Figma
Keep the plugin open; the page lands there and is imported as editable layers.
What the MCP connection gives your AI
Works with your AI tool
Claude Code, Claude Desktop, Cursor or any client that speaks MCP.
import_html
Send HTML the AI generated, up to 2 MB, without saving or hosting it first.
import_url
Let the AI import a public page by address, for example a reference it found.
import_status
The AI can check on the status of an import it started.
On-system output
With Snap on Pro, AI drafts bind to your file's closest color and text styles.
Hashed token
The connection token is stored only as a hash, and pages wait in memory for at most 30 minutes.
MCP setup for Claude Code, Claude Desktop and Cursor
The Model Context Protocol (MCP) is an open standard that lets AI tools call external tools. HTML to Frames exposes its import as an MCP server, so any MCP-capable client can send pages to Figma.
Getting the connection details
Open HTML to Frames in Figma and go to the AI tab. It shows a personal token and a copy-paste setup for your client. You do not need to write configuration by hand.
Claude Code
Add the server using the setup from the AI tab, then ask Claude to send the page it is building to Figma. Claude will call import_html with the file contents.
Claude Desktop
Add the server to Claude Desktop's MCP configuration using the provided snippet, then restart the app if it does not pick up the change. The HTML to Frames tools then appear in the conversation.
Cursor
Add the server in Cursor's MCP settings with the same details. The agent can then import a generated page or a URL while you work in the editor.
Other MCP clients
Any client that supports MCP servers can connect with the same token. Note that claude.ai web connectors, which use OAuth, are not supported yet.
Exact steps for each client are kept up to date in the docs.
Turning AI drafts into a maintainable design
AI-generated HTML tends to be inconsistent in small ways: a slightly different blue on each button, three near-identical font sizes, spacing that varies by a few pixels. Imported literally, that becomes a messy design file. HTML to Frames gives you tools to clean it up on the way in.
- Verified Auto Layout. Flexbox and grid layouts from the generated CSS become Auto Layout frames where every child stays within 2 px, so the draft is easy to rearrange.
- Styles & variables (Pro). Colors used repeatedly and any CSS custom properties become variables, and text and shadow styles are created.
- Snap to my file's styles (Pro). Values that do not exactly match your system snap to your closest existing color and text styles, so AI drafts arrive on-system.
- Components (Pro). Repeated cards, buttons and list items become components with instances.
A practical loop looks like this: ask the AI for a layout, send it to Figma, adjust it visually, then describe the changes back to the AI for the next iteration. Each round lands as new frames, so you keep a history of versions on the canvas.
Because the import uses your own plan, the same limits apply as for any import. See pricing for details.
Privacy and limits of the AI connection
Connecting an AI tool to a design file raises fair questions about what is shared. Here is how the MCP connection is handled.
Token
Your connection token is stored on our side only as a hash. Treat it like a password and keep it out of shared repositories: it is what allows a client to send pages to your plugin.
Pages in transit
Pages sent by the AI wait in memory for at most 30 minutes until your open plugin picks them up. URL imports are rendered in the same isolated, sandboxed browser used for every other import, and results are never written to disk.
Your Figma file
The AI cannot read your Figma file through this connection. The plugin itself does not read your file's content; it writes new layers and reads only its own frames' metadata.
Limits
import_htmlaccepts HTML up to 2 MB.- The plugin must be open in Figma for pages to land.
- Each page counts as one import on your plan.
- claude.ai web connectors (OAuth) are not supported yet.
The security page has the full data retention details.
Frequently asked questions
Claude Code, Claude Desktop, Cursor and any other client that supports MCP servers. You connect them from the plugin's AI tab, which gives you a token and a copy-paste setup. claude.ai web connectors, which use OAuth, are not supported yet.
Three: import_html sends HTML the AI has written, up to 2 MB; import_url imports a public page by its address; and import_status lets the AI check the progress of an import. Pages land in your open plugin and are imported with your settings.
Yes. Pages sent by your AI tool are delivered to your open HTML to Frames plugin in Figma. They wait in memory for at most 30 minutes, so if the plugin is closed briefly, opening it again within that window lets it pick them up.
No. The MCP connection only lets the AI send pages to be imported and check their status. The plugin itself does not read your file's content; it writes new layers and reads only the metadata of frames it created, such as source URL and width.
No separate pricing applies. An AI-sent page is imported with your own plan and counts as one import, like any other source. The Free plan includes 10 imports per month, and Pro and Team are unlimited within a fair-use allowance.
On Pro, turn on Styles & variables and Snap to my file's styles. Exact matches reuse your existing variables and styles, and values that are close but not exact snap to your nearest color and text style, so generated pages arrive bound to your system.
Related
Stop redrawing the web.
Paste a link and get real, editable, responsive Figma layers in seconds. Free to start — 10 imports every month.
No credit card. Pro is bought inside Figma.
Coming soon to Figma Community