Edit Figma with Claude Code
Yes. Claude Code can edit a live Figma file if it is connected to a tool that can act inside Figma. FigmaMCP is a free one: Claude Code talks to a small local MCP server, the server talks to a development plugin open in your Figma desktop app, and the edits appear in your file. It needs macOS, the desktop app, and no API token.
Set up
Run setup
In a terminal:
npx figmamcp setupImport once in Figma
In the desktop app: Plugins, Development, Import plugin from manifest. Pick the manifest that setup points to.
Open it in your file
Run FigmaMCP from Plugins, Development. Choose the one page or frame Claude Code may edit. Leave the panel open.
If you prefer to register the server yourself, the command is claude mcp add figmamcp -- npx -y figmamcp. For Codex, add a server named figmamcp with command npx and arguments -y, figmamcp to your Codex MCP configuration.
Prompts that work well
| You ask | What happens |
|---|---|
| “On this page, rename every layer called Frame 12 to match its heading.” | Claude Code reads the page, then renames the matching layers in one validated batch. |
| “Replace the old product name in all text layers in this frame.” | It finds the text layers in the frame and rewrites them together. |
| “Build a pricing card with three tiers using our variables.” | It creates frames and text with auto layout, bound to your variables if you have allowed variable edits. |
| “Delete this color variable.” | Refused if layers still use it, so you do not get broken references. |
Guardrails you control
- Edits only inside the page or frame you chose. With no scope chosen, the agent can read but not edit.
- Each edit names its target layer, and the name must match.
- Editing variables and styles needs its own checkbox in the panel, off by default.
- A wrong edit that follows the rules still goes through. Review the result, and use Figma version history.
