Log inSubmit server
Figma Edit MCP logo

Figma Edit MCP

Read, create, and update Figma designs through an MCP connection with scoped editing and plugin-enforced safety checks.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Figma Edit MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "figma-edit-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "--package",
        "figma-edit-mcp",
        "figma-edit-mcp-socket"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

We couldn’t confirm it starts correctly

We ran the install command but it didn't respond within our test window — this can mean a slow first-time install rather than a real problem.

npx -y --package figma-edit-mcp figma-edit-mcp-socket

No response to initialize.

This is an experimental automated check and can have false negatives — missing environment variables, a slow cold install, etc. It doesn’t necessarily mean something’s wrong. Last checked 15d ago.

Overview

The figma-edit-mcp MCP server connects AI assistants to Figma through a local MCP process, WebSocket bridge, and Figma plugin. It supports reading designs, creating and modifying elements, bulk updates, and programmatic work with design systems. Editing is restricted to a selected page or frame, while the plugin validates targets and protects locked, shared, and component-instance content. Reach for it when an agent needs to apply repeatable changes across Figma layers while keeping a human responsible for reviewing the result.

Use cases

  • Update product names across every matching text layer
  • Copy component overrides across multiple instances
  • Create Figma elements from natural-language instructions
  • Review and apply scoped design-system changes

Key features

  • Read Figma designs through MCP
  • Create and modify design elements
  • Apply validated bulk edits
  • Scope edits to a selected page or frame
  • Protect locked layers and component instances
  • Manage variables and styles with explicit permission

Tools45

What Figma Edit MCP lets your agent do. Expand a tool for its parameters.

Self-reported~797 tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 13d ago via OSV.dev · figma-edit-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars14Stargazers on the source repository.
npm downloads407Package downloads in the last 30 days.
Last commit3d agoMost recent push to the default branch.
Install checkInconclusiveDidn't respond in our test window — often a slow first install.
Tools exposed45Callable tools this server registers over MCP.
Directory activity4 viewsConfig copies, upvotes, and views on AllMCPs.

How Figma Edit MCP works

What figma-edit-mcp MCP server does

The figma-edit-mcp MCP server lets supported AI clients inspect Figma files and request design changes through Model Context Protocol. Its supported work includes reading designs, creating elements, modifying existing elements, applying repeated changes across matching layers, and working with design-system assets such as variables and styles when explicitly permitted.

The system divides responsibility between three parts. The AI converts a natural-language request into Figma operations, the plugin runs those operations inside Figma, and the designer chooses the intended result and reviews the changes. This makes the server suitable for repetitive updates that would otherwise require manually finding and editing many layers.

How it works

The MCP process runs locally through npx or bunx. A separate WebSocket bridge connects that process to the Figma plugin, which must be installed in the Figma desktop app. The plugin performs validation before applying an operation rather than relying only on the assistant to identify the correct target.

At connection time, the user selects one page or frame as the session’s working area. Edits outside that area are refused. If no area is selected, the assistant can read the file but cannot edit layers. Each edit must also identify an exact layer name that matches the real Figma layer.

Bulk operations are validated as a group. If one item fails validation, the whole bulk edit is rejected before any item changes. The plugin also refuses edits to locked layers and shared-library assets, prevents structural changes inside component instances, and protects the assigned page or frame from deletion or replacement.

Setup and configuration

Add the server to the client’s MCP configuration with a command entry that runs npx -y figma-edit-mcp. Start the bridge separately with npx -y --package figma-edit-mcp figma-edit-mcp-socket, and keep that process running while using Figma.

Install the npm package once so its plugin files are available locally. In Figma Desktop, choose Plugins → Development → Import plugin from manifest, then select the package’s figma_plugin/manifest.json file. The imported plugin can then be opened from the development plugins menu in Figma files.

An optional agent skill is included for clients that support the open SKILL.md convention. Other clients can access equivalent guidance through figma-edit://guide/* MCP resources.

Tools and capabilities

The figma-edit-mcp MCP server provides agent access for:

  • Reading Figma design content.
  • Creating and modifying design elements.
  • Applying a requested text or property change across many matching layers.
  • Copying component-instance overrides to other instances.
  • Managing variables and styles when the corresponding permissions are enabled.
  • Loading guidance about safety rules, error recovery, and tool selection through the included skill or MCP resources.

Limitations and notes

The plugin’s safeguards verify the editing scope and target layer, but they cannot determine whether a permitted change matches the designer’s intent. A valid operation can still be the wrong design decision, so human review remains necessary.

Variable and style changes require separate permissions in the plugin, and those permissions are disabled by default. The assistant cannot enable them on its own. Protected content and unsafe structural operations are rejected according to the plugin’s validation rules, which are also documented in the project’s safety guidance.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Figma Edit MCP

figma-edit-mcp is an MCP server that connects AI assistants to Figma through a local MCP process, WebSocket bridge, and Figma plugin. Its main tools read designs, create elements, modify layers, apply bulk updates, and manage variables or styles when explicitly permitted.

Install it by adding an `npx -y figma-edit-mcp` MCP configuration entry, starting the `figma-edit-mcp-socket` bridge, and importing the bundled plugin manifest into Figma Desktop. The npm package must be installed locally to access that manifest.

Yes, figma-edit-mcp works with Cursor. Add the server configuration to `~/.cursor/mcp.json`, then restart Cursor. The Figma plugin and WebSocket bridge must also be installed and running for design operations.

No, editing is limited to the page or frame selected for the session. If no area is selected, the assistant can read the file but cannot edit layers. The plugin also refuses edits to protected content and the assigned working area.

It validates each requested operation inside the Figma plugin before applying it. Checks include the selected working area, exact layer names, locked layers, shared-library assets, component instances, bulk-edit consistency, and separate permission for variables and styles.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewFigma Edit MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/figma-edit-mcp?style=directory)](https://allmcps.com/mcp/figma-edit-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/figma-edit-mcp"><img src="https://allmcps.com/api/badge/figma-edit-mcp?style=directory" alt="Figma Edit MCP on AllMCPs" /></a>