figma-edit-mcp — Claude Code MCP server: edit Figma from chat
Connects your AI assistant to Figma so it can read designs, add and change layers, and touch variables or styles. A plugin checks every operation before it runs.
claude mcp add figma-edit-mcp -- npx -y figma-edit-mcpWhat figma-edit-mcp does
The server talks to a Figma plugin over a WebSocket bridge on your machine. Your assistant sends operations; the plugin validates each one and turns down anything that would damage the file. Deleting a colour variable that layers still point to is one example it blocks. You pick a single page or frame for the session, and edits outside it are refused. With no area chosen, the file is read-only for the AI.
Every edit has to name its exact target, and the plugin compares that name against the real layer. A bulk change with one bad item is rejected as a whole. Locked layers, shared-library assets and anything inside a component instance stay off limits. Variables and styles need their own checkbox, and it starts unchecked.
The checks cover where an edit lands and which layer it hits, not whether the edit is what you wanted. An operation that follows every rule will go through, so you still review the result. Node.js is required: the server runs through npx, the bridge figma-edit-mcp-socket stays open in a terminal, and the plugin is imported from node_modules/figma-edit-mcp/figma_plugin/manifest.json.
What it helps with
- rename a product across every text layer on a page
- copy component instance overrides onto other instances
- read a frame's structure and turn it into code
- update variables and styles without broken references
- keep the assistant out of frames it should not touch
Example prompts for the agent
- Find every text layer containing “Old Name” on the Checkout page and swap it for “New Name”
- Copy the overrides from the
Card/Primaryinstance to the other instances on this frame - Read the Hero frame and describe which layers it is built from
How to install figma-edit-mcp
Platform CLI
claude mcp add figma-edit-mcp -- npx -y figma-edit-mcpPlatform CLI
codex mcp add figma-edit-mcp -- npx -y figma-edit-mcpConfig file
{
"mcpServers": {
"figma-edit-mcp": {
"command": "npx",
"args": [
"-y",
"figma-edit-mcp"
]
}
}
}Config file
{
"servers": {
"figma-edit-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-edit-mcp"
]
}
}
}Platform CLI
gemini mcp add figma-edit-mcp npx -y figma-edit-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about figma-edit-mcp
How do I install figma-edit-mcp in Claude Code?
Run claude mcp add figma-edit-mcp -- npx -y figma-edit-mcp. Then start the bridge with npx -y --package figma-edit-mcp figma-edit-mcp-socket and import the Figma plugin from node_modules under Plugins → Development.
What does figma-edit-mcp do?
It gives an assistant MCP access to Figma: reading designs, creating and modifying layers, handling variables and styles. The plugin inside Figma enforces the safety rules, so the assistant cannot skip them.
Can the assistant wreck my Figma file?
Edits outside the chosen area, with a mismatched layer name, or on protected layers get refused. It will not catch a change that follows the rules but was not what you meant, so review the output yourself.
