Give Claude hands inside Figma

Connect Claude to your Figma file and it stops describing designs and starts making them — real frames, real auto layout, real components you can keep editing. Works with a free Figma account. No Dev seat, no terminal.

Connect Claude

Connect in about 60 seconds

The hosted route. Nothing to install beyond the Figma plugin itself.

  1. Install the Flaude plugin in Figma

    Grab it from the plugin page. The plugin is what actually touches your document — only a plugin is allowed to, which is why every route into Figma needs one.
  2. Copy your MCP URL

    Open Flaude in Figma → Settings → Copy URL for Claude. One string, tied to your account.
  3. Paste it into Claude

    Claude → Settings → Connectors → add the URL. Works in Claude Desktop, Claude.ai and Claude Code.
  4. Ask for something

    Open a file, select a frame, and try “restyle this to our brand colours and rename the layers sensibly”. Claude works on the real layer tree, so you can undo it like any other edit.

Prefer to self-host?

The MCP server is MIT-licensed and free. Bring your own machine.

Clone the repo, run npm install && npm run build, then register it with Claude Code using claude mcp add flaude node /path/to/dist/index.js. The self-host guide has the full walkthrough.

Pro exists for the people who would rather not babysit a local process — same capabilities, hosted, with the library kept current. Both work with a free Figma account.

What Claude can actually do in Figma

Concrete operations, not vibes.

  • Build a screen from a prompt as native frames with auto layout
  • Restyle an existing selection to your palette, type scale and spacing
  • Rename messy auto-generated layers across a whole frame in one pass
  • Lint a file against your design system and report what drifted
  • Turn a copied gallery screen into your own branded starting point
  • Assemble multi-screen flows instead of one frame at a time

Claude + Figma FAQ

Setup, seats, what works where, and what to do when it doesn't.

Start with a real screen

Copy any screen from the gallery into Figma as editable layers, then ask Claude to make it yours.

Open the gallery