Connect Your AI
to Figma
ai.to.design is a free Figma plugin that turns AI-generated HTML/CSS into native, editable Figma designs. Connect Claude, Cursor or any MCP client — or chat with your own API key — and render, edit and iterate directly on your canvas.
Install the Figma Plugin
Get the plugin from the Figma Community and start rendering AI-generated designs on your canvas.
Configure Claude Desktop
Add to your claude_desktop_config.json:
{
"mcpServers": {
"ai-to-design": {
"command": "npx",
"args": ["-y", "@ai.to.design/figma-connector@latest"]
}
}
}Two ways to design with AI in Figma
MCP mode — use your AI tool
A local MCP server connects Claude, Cursor or any MCP client to the plugin. Your agent renders HTML as Figma frames, then edits nodes, builds components and reads your design system. No API key needed.
How MCP mode worksChat mode — bring your own key
Chat with Anthropic, OpenAI or Google models right inside Figma using your own API key. The plugin renders the generated HTML on your canvas — no server, no MCP client.
Set up Chat modeWorks with your AI tool
Edit Designs Interactively
Go beyond one-shot rendering. Refine your designs iteratively — no rebuilding by hand.
Render
Create your initial design with AI
Select
Pick any element on your canvas
Edit
Ask your AI to change text, styles, or layout
Iterate
Keep refining through conversation
Frequently asked questions
Is ai.to.design free?
Yes. The Figma plugin and the local MCP connector are free and open source under the MIT license. There is no account, subscription or usage quota. In Chat mode you pay your AI provider directly for the tokens you use.
How does it turn HTML into a Figma design?
Your AI tool writes HTML and CSS. The plugin lays it out in a hidden browser viewport and rebuilds it as native Figma layers — frames with auto layout, text, vectors and image fills — so you can keep editing the result by hand.
Which AI tools work with it?
Any MCP client that can launch a local stdio server: Claude Desktop, Claude Code, Cursor, Codex CLI, opencode, VS Code with GitHub Copilot, Windsurf and others. Without an MCP client, use Chat mode with your own Anthropic, OpenAI or Google API key.
Does my design data leave my machine?
In MCP mode the connector talks to the plugin over localhost only; your HTML, prompts and designs are not sent to any ai.to.design server. In Chat mode your prompt goes directly from Figma to the AI provider you chose. The plugin and connector send anonymous usage counters with no identifier, which you can switch off.
Do I need an account or an API key?
No account is needed. MCP mode needs no API key at all — your AI tool does the generation. Chat mode needs an API key from Anthropic, OpenAI or Google, stored in Figma's plugin storage on your machine.
Can it edit existing Figma designs and use my design system?
Yes. Your AI can find, restyle, move and duplicate nodes, create components and variant sets, read the variables and styles already in your file, and export a Figma design back to code.
