Figma Edit MCP

Connect AI assistants to Figma via Model Context Protocol to read designs, create and modify elements, and manage design systems programmatically.

This plugin empowers your AI assistant to become a Figma assistant, executing design updates Safer, Cleaner, and Faster than a human ever could.

This plugin allows you as a Designer to focus purely on creative decision-making, leaving the error-prone & repetitive manual changes to the automated systems.

Read more about our design philosophy here.

Core Principles

• 🛡️ Safer: The plugin performs programmatic checks and protections that exceed those in the Figma Desktop app. For example, it prevents the deletion of variables that are still in use, avoiding dangling references. By enforcing these strict validations before an action is taken, the plugin protects designs from both human error and AI hallucinations.

• ✨ Cleaner: Programmatic, thorough operations mean no node is ever skipped or forgotten during large updates, ensuring that the design file is always consistent.

• ⚡ Faster: Executing batch operations (like bulk text replacement or instance override propagation) via AI reduces hours of tedious manual design work down to seconds.

Supported AI Integrations

• Cursor

• GitHub Copilot (VS Code)

• Google Antigravity

• Claude Code (VS Code & CLI)

• Claude Desktop (Chat, Cowork & Code)

• LM Studio

Quick Start

The quickest way to run Figma Edit MCP is directly from the NPM registry. You do not need to clone this repository.

1. Configure your AI assistant

Add the server to your AI assistant's MCP configuration:

{
  "mcpServers": {
    "FigmaEdit": {
      "command": "npx",
      "args": ["-y", "figma-edit-mcp"]
    }
  }
}

The config file location depends on your host — see Integration-Specific Setup below. Bun users can substitute bunx for npx; both resolve the same package.

2. Start the WebSocket bridge

In a terminal, start the bridge that connects the MCP server to the Figma plugin. Keep this terminal running:

npx figma-edit-mcp-socket

3. Install the Figma plugin

The Figma plugin ships inside the NPM package. Install the package once to materialize the plugin files on disk:

# In any directory of your choosing (e.g., ~/figma-edit-mcp/)
npm install figma-edit-mcp

Then in the Figma desktop app:

1. Open Plugins → Development → Import plugin from manifest…

2. Select node_modules/figma-edit-mcp/figma_plugin/manifest.json from the directory above.

The plugin is now available under Plugins → Development in any Figma file.

Running from a local clone? See CONTRIBUTING.md for the contributor-only --local development workflow.

Integration-Specific Setup

Paste the JSON snippet from the Quick Start into your host's MCP config file:

Manual Configuration

If you prefer to edit your host's MCP config directly, paste this snippet into the appropriate config file:

{
  "mcpServers": {
    "FigmaEdit": {
      "command": "npx",
      "args": ["-y", "figma-edit-mcp"]
    }
  }
}

Running from a local clone? See CONTRIBUTING.md for the --local workflow.

Contributing

For local development — building from source, running the bridge from a clone, and the --local integrate workflow — see CONTRIBUTING.md.

Windows + WSL Guide

To allow Figma (running on Windows) to connect to the bridge (running inside WSL), the bridge needs to listen on 0.0.0.0 instead of localhost:

npx figma-edit-mcp-socket --host 0.0.0.0
# or via environment variable:
FIGMA_EDIT_MCP_SOCKET_HOST=0.0.0.0 npx figma-edit-mcp-socket

Then point the Figma plugin's WebSocket address at your WSL instance's IP.

Usage

1. Start the WebSocket bridge: npx figma-edit-mcp-socket

2. Configure the MCP server in your AI assistant (see Integration-Specific Setup)

3. Open Figma and launch the Figma Edit MCP plugin from Plugins → Development

4. Use the join_channel MCP tool to establish communication

5. Use your AI assistant to interact with Figma via the available MCP tools

MCP Tools

The MCP server provides the following tools for interacting with Figma:

Document & Selection

Node Creation

Node Modification

Styling

Auto Layout & Spacing

Text Operations

Annotations

Components & Styles

Variables

Prototyping & Connections

Export

Connection Management

MCP Prompts

Built-in prompts guide complex multi-step design tasks:

Hallucination Safeguards

The plugin enforces hard constraints (scope locking, name verification, batch validation) that AI agents cannot bypass. See AGENTS.md for the full rules and error codes.

Best Practices

When working with Figma Edit MCP:

1. Always join a channel first with join_channel before sending any other commands

Notes

Automatic Node ID Normalization

Node IDs copied from Figma URLs use dashes (20485-41), but the plugin API expects colons (20485:41). The MCP server automatically converts dash-format IDs before forwarding, so either format works without manual intervention.

Acknowledgements

Built on prior work by sonnylazuardi and the contributors to grab/cursor-talk-to-figma-mcp. Thank you for the foundation this project builds on.

Thanks to @dusskapark for the following contributions:

• Bulk text content replacement — Batch-update text across large designs efficiently. Demo video

• Instance override propagation — Propagate component instance overrides from a source to multiple targets in a single command, dramatically reducing repetitive design work. Demo video

License

The MIT License (MIT)

Copyright (c) 2025 sonnylazuardi
Copyright (c) 2026 Neo Product LLC