AI to Figma: Send Claude and Cursor UI to Figma via MCP

AI coding assistants can now produce a convincing landing page, settings screen or dashboard in a few minutes. The problem is where that UI ends up: in a code editor or a local preview, far from the Figma file where your team reviews, annotates and refines design.

This guide shows how to close that gap with an AI to Figma connection. HTML to Frames exposes an MCP connection that lets Claude Code, Claude Desktop, Cursor or any MCP client send pages straight into your open Figma plugin, where they are converted into real, editable layers with Auto Layout.

What "AI to Figma" means here

There are two very different things people call AI to Figma:

1. AI that generates a design inside Figma from a prompt.
2. AI that writes HTML and CSS, and a bridge that converts that code into Figma layers.

HTML to Frames does the second. Your AI tool keeps doing what it does well, writing front-end code, and the plugin does the conversion it already does for any web page: frames, text, vectors, images, variables and Auto Layout. The result is the same quality as importing a live site, because it goes through the same capture pipeline. For a product overview, see AI to Figma.

How the MCP connection works

The Model Context Protocol (MCP) is a standard way for AI tools to call external tools. When you connect HTML to Frames as an MCP server, your AI tool gains three tools:

The page lands in your open plugin in Figma and is imported with your own plan, so the usual plan rules apply: screens per import, styles and variables, components and so on.

What the AI tool gets back

The AI does not get your Figma file back. It gets a response from the tool call that confirms the page was handed over, and it can call import_status to check how that import is doing. The design work itself happens in Figma, inside the plugin, where you see the result screen with frames, layers, Auto Layout share and any warnings. This is deliberate: the plugin does not read your Figma file content, so nothing about your file flows back to the AI.

Setup: connect your AI tool from the plugin's AI tab

You do the setup once per AI client. Everything starts in the plugin.

1. Open HTML to Frames in Figma and go to the AI tab.
2. Get your token. The AI tab gives you a connection token. Treat it like a password.
3. Choose your client. The AI tab shows copy-paste setup for the supported clients.
4. Paste the setup into your client exactly as shown (details per client below).
5. Restart or reload the client so it picks up the new MCP server.
6. Keep the plugin open in Figma while you work. Pages are delivered to the open plugin.

Claude Code

Claude Code reads MCP servers from its configuration. Copy the setup the AI tab gives you for Claude Code and run or paste it as instructed. Then start a new session and ask Claude to list its tools; you should see import_html, import_url and import_status.

Claude Desktop

Claude Desktop keeps MCP servers in its configuration file, which you can open from the app's developer settings. Paste the snippet from the AI tab into that file, save, and fully restart Claude Desktop. The tools appear in the tools menu of a new chat.

Cursor

Cursor lists MCP servers in its settings. Add a new server using the snippet from the AI tab, save, and confirm that the server shows as connected with three tools.

Any other MCP client

If your tool speaks MCP, the same token and setup apply. Use the generic setup from the AI tab and adapt it to how your client registers servers.

Not supported yet: claude.ai web connectors

claude.ai web connectors (OAuth) are not supported yet. If you work in the browser version of Claude, generate the HTML there, save it, and import it through the plugin's Local file or Paste code source instead. Or move the task to Claude Code or Claude Desktop, which connect over MCP today.

Privacy: what happens to your token and pages

AI workflows raise fair questions about where code and designs travel. Here is what the connection does:

• Your connection token is stored only as a hash. The service can check it, but does not keep the token itself.
• Pages wait in memory for at most 30 minutes. If your plugin does not pick a page up in that window, it is gone.
• Rendering happens in an isolated, sandboxed browser. The result is delivered once, then deleted from memory, and never written to disk.
• No cookies, analytics or tracking pixels in the plugin, extension or website.
• We never receive your name or email from Figma; the account identifier is derived from your Figma user id.

The full breakdown is on the security page.

Limits worth knowing

• HTML size: import_html accepts up to 2 MB. Inline huge base64 images sparingly; link to hosted images when you can.
• Public URLs only for import_url. If the AI's preview runs on localhost, either have the AI send the HTML directly with import_html, or capture the running page with the Chrome extension, which handles localhost and logged-in pages.
• Plan usage applies. Each page counts as an import on your plan. Free gives 10 imports per month and 1 screen per import; Pro and Team are unlimited under fair use with up to 4 screens per import. See pricing.
• Same conversion rules as any page. Iframes, WebGL canvases and videos without a poster become a screenshot image of their box. Skew and 3D transforms are not converted yet.

Prompts to try

Once connected, you talk to the AI the way you normally would and tell it to send the result to Figma. Some prompts that work well:

1. "Build a pricing page with three tiers using plain HTML and CSS with flexbox, then send it to Figma with import_html."
2. "Take the settings screen you just built, inline the CSS, and import it into Figma. Then check import_status."
3. "Our staging site is at this public URL. Import the pricing and signup pages into Figma with import_url."
4. "Create two variations of this hero section, one with a left-aligned headline and one centred. Send each to Figma as a separate import."
5. "Rewrite this card grid using CSS custom properties for colors, then import it so the variables come through."

Prompting for clean Figma output

The AI writes better imports when you nudge its CSS:

• Ask for flexbox and grid with gap instead of margins between siblings. These map cleanly onto Auto Layout; see CSS flexbox and grid to Auto Layout.
• Ask for CSS custom properties for colors. With Styles & variables on (Pro), --brand-primary becomes a brand/primary variable.
• Ask for real text, not text baked into images, so every heading stays editable.
• Ask for one page per import; long multi-screen documents are harder to review.

The design and code loop

The real value is not one import. It is a loop where design and code stop drifting apart.

1. Prompt: the AI builds a first version in code.
2. Import: the AI sends it to Figma with import_html or import_url.
3. Review in Figma: designers adjust spacing, type, color and layout with Auto Layout frames, add comments and explore alternatives.
4. Describe changes back: tell the AI what changed, or paste the relevant values, and let it update the code.
5. Re-import to confirm the code now matches, and compare against the previous frame.

Who benefits

• Designers stop redrawing AI prototypes by hand and start from editable frames.
• Front-end developers get design review on real output without exporting screenshots.
• Product managers can turn a prompt into a reviewable Figma page for a stakeholder meeting.
• Solo builders keep a visual record of every iteration in one file.

AI to Figma compared with other routes

All three plugin routes use the same engine. MCP simply removes the copy-paste step and lets the AI drive. The Auto Layout is verified: every child's position is checked within 2 px, and if a layout does not hold, a simpler plan is tried or the frame keeps absolute positions. The design never breaks. More on that in Auto Layout explained.

Troubleshooting

• The AI says the tool is not available. Restart the client after adding the server, and check that the snippet was pasted unchanged.
• The import never shows up. Make sure the plugin is open in Figma. Pages wait up to 30 minutes, so open the plugin and it will pick them up within that window.
• The token was rejected. Generate a fresh token from the AI tab and update the client's setup.
• The layout looks off. Check the result screen's diagnostics, which explain why a frame stayed absolute, and ask the AI to use flexbox or grid for that section.

Getting started

Open the plugin, go to the AI tab, and connect one client. Ask your AI tool to build a small component and send it to Figma; you will see how it behaves before you rely on it for a full screen. The docs cover the AI tab, and features lists everything the import supports.