# figma-edit-mcp

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.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 14
- Author: neozhehan
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/neozhehan/figma-edit-mcp
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/mcp/figma-edit-mcp

## What it 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`.

## Requirements
- Needs: Node.js (commands run via npx)
- Works with: Figma

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add figma-edit-mcp -- npx -y figma-edit-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add figma-edit-mcp -- npx -y figma-edit-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "figma-edit-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "figma-edit-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "figma-edit-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "figma-edit-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add figma-edit-mcp npx -y figma-edit-mcp
```

## When to use it
- 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
- Find every text layer containing “Old Name” on the Checkout page and swap it for “New Name”
- Copy the overrides from the `Card/Primary` instance to the other instances on this frame
- Read the Hero frame and describe which layers it is built from

## Similar
- [Next AI Draw.io](https://affpapa.org/en/nevibecode/mcp/next-ai-drawio.md) — MCP server · ★ 36398
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [Agent-Native Assets](https://affpapa.org/en/nevibecode/mcp/agent-native-assets.md) — MCP server · ★ 7506
- [Remove AI Watermarks](https://affpapa.org/en/nevibecode/mcp/remove-ai-watermarks.md) — MCP server · ★ 6114
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md