What is Figma Edit MCP?
Figma Edit MCP is an MCP server and Figma plugin that let an AI agent read designs, create elements and edit variables, styles and components. The plugin checks each edit inside Figma, limits changes to the page or frame you choose, and refuses edits that would break the file.
Figma Edit MCP connects AI assistants to Figma through the Model Context Protocol. The assistant can read designs, create and modify elements, and manage design systems, while a plugin inside Figma checks every request before it runs.
The project sets three goals: safer, cleaner and faster edits. A single change can reach hundreds of layers in seconds, such as replacing a product name in every text layer on a page or copying overrides to fifty instances.
What the plugin refuses to do
- Edit anything outside the one page or frame you chose when connecting. With no area chosen, the agent can read but not edit.
- Edit a layer unless the request names it exactly, which stops edits to layers the model invented or misremembered.
- Apply a bulk edit when any single item fails validation. Nothing changes in that case.
- Touch locked layers, shared library assets, or the structure inside a component instance.
- Delete or replace the page or frame assigned to the session.
- Change variables or styles unless you tick a separate checkbox. Both boxes are off by default.
One limit is stated plainly. The plugin checks where an edit happens and which layer it touches, not whether it is the edit you wanted. A wrong edit that follows the rules still goes through, so review the result.
Who Figma Edit MCP is for
Best for
- Designers who want repetitive, error-prone changes handled in bulk while they keep the creative decisions.
- Teams keeping variables, styles and component overrides consistent across large files.
- People comparing Figma bridges, such as Figma Pilot or Framelink, and weighing edit safety against other priorities.
Not for
- Anyone who needs the plugin to judge design quality. It validates targets and scope, not intent.
- Readers who only want to pull design context into code. The Figma MCP server is closer to that job.
Use it with UiChemy
Use Figma Edit MCP to tidy a design with its node tools, such as renaming a node or setting a fill. Once the Figma file is ready, UiChemy's Figma to WordPress turns it into an editable page. UiChemy Composer works inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Figma Edit MCP: Safer AI Edits to Live Figma Files to your AI client
npx -y figma-edit-mcpAdd the server
Paste the config into your agent's MCP settings. Locations include
~/.cursor/mcp.jsonfor Cursor and~/Library/Application Support/Claude/claude_desktop_config.jsonfor Claude Desktop. In Claude Code runclaude mcp add FigmaEdit npx figma-edit-mcp.Start the WebSocket bridge
In a terminal, run
npx -y --package figma-edit-mcp figma-edit-mcp-socketand keep it running. Windows with WSL needs--host 0.0.0.0on that command.Install the Figma plugin
Run
npm install figma-edit-mcpin any folder. In the Figma desktop app choose Plugins, Development, Import plugin from manifest, then selectnode_modules/figma-edit-mcp/figma_plugin/manifest.json.Join a channel
Launch the plugin from Plugins, Development, then call the
channel_jointool before anything else. Pick the one page or frame the agent may edit.Optional: add the skill
Copy the bundled skill with
cp -R node_modules/figma-edit-mcp/skills/figma-edit ~/.claude/skills/. Clients without skills can read the same rules asfigma-edit://guide/*resources.
Client configuration
{
"mcpServers": {
"FigmaEdit": {
"command": "npx",
"args": ["-y", "figma-edit-mcp"]
}
}
}Endpoints and ports
npx -y --package figma-edit-mcp figma-edit-mcp-socketKeep running while you workWhat you can do with it
- Scoped editingThe agent can only change the page or frame you picked for the session.
- Exact target namesEach edit must name its layer, and the plugin compares the name with the real one.
- All or nothing bulk editsOne bad item rejects the whole batch before anything is modified.
- Protected layersLocked layers, shared library assets and component instance internals are refused.
- Variables and styles gatedEditing them needs its own checkbox, and both are off by default.
- Override copyingRead overrides from one instance and apply them to many others with a built-in prompt.
- Dev Mode annotations and reactionsRead and write native annotations and prototype reactions.
- Dash and colon ids both workNode ids copied from Figma URLs with dashes are converted automatically.
Tools it exposes
page_info
Lists the document's pages, or returns chosen pages with their top-level children.
node_info
Reads one or more nodes with recursive traversal, filters and a depth limit, including bound variables.
node_transform
Moves or resizes a node with absolute x, y, width and height.
node_rename
Renames a node.
node_delete
Deletes one or more nodes in a single validated batch.
node_clone
Duplicates a node, optionally at a new position.
view_navigate
Moves the editor view to a page or to nodes.
node_group
Wraps nodes in a new group.
node_ungroup
Dissolves a group and promotes its children.
node_flatten
Flattens a node and its children into one vector.
node_insert_child
Reparents a node under a new parent at an optional index.
node_set_auto_layout
Configures a frame's auto-layout: mode, padding, spacing, alignment and sizing.
node_set_fill
Sets a fill to a color or image, or clears it.
node_set_stroke
Sets stroke color and weight, uniform or per side.
node_set_corner_radius
Sets corner radius, uniform or per corner.
node_set_effects
Sets the effect array, such as shadows and blurs.
node_apply_style
Links a node to a shared library style.
node_bind_variable
Binds a variable to a node property, or sets an explicit variable mode.
node_export_visual
Renders a node to PNG, JPG, SVG or PDF.
create_shape
Creates a rectangle, ellipse, polygon or star with optional fill and stroke.
create_frame
Creates a frame with optional fill, stroke and full auto-layout.
create_text
Creates a text node with optional font size, weight and color.
create_svg
Creates a node from an SVG markup string.
create_component
Converts an existing frame into a main component.
create_instance
Instantiates a component at a position.
create_component_set
Combines components into a component set of variants.
style_list
Lists local paint, text, effect and grid styles.
style_manage
Creates a named style, or updates one when a style id is given.
style_delete
Deletes a local style by id.
text_set_content
Sets the text of one or more text nodes in a batch.
text_set_style
Sets any mix of typography properties on a text node.
component_list
Lists components with filtering and scope options.
component_manage_property
Adds or edits a component property definition.
component_delete_property
Removes a component property definition.
instance_set_property
Sets one property on an instance: toggle, text, swap or variant.
instance_get_overrides
Reads the override properties from a source instance.
instance_set_overrides
Applies copied overrides to target instances.
variable_list
Lists variables and collections, or details by id, with an optional consumer scan.
variable_manage
Creates collections and variables and sets values or aliases.
variable_delete
Deletes variables or a collection, and is rejected while they are still in use.
annotation_list
Reads annotations on a node.
annotation_set
Creates or updates native Dev Mode annotations in a batch.
reaction_list
Reads prototype reactions such as click flows and overlays.
reaction_update
Replaces a node's reactions with a new array.
channel_join
Joins a WebSocket channel to connect with the Figma plugin. Call it first.
Frequently asked questions
What is Figma Edit MCP?
It is an open-source MCP server plus Figma plugin for letting an AI assistant read, create and modify Figma designs. Its distinguishing feature is validation: the plugin checks every action inside Figma and refuses the ones that fail its rules.
How do I install Figma Edit MCP?
Add the FigmaEdit entry with npx -y figma-edit-mcp to your agent's MCP config, start the bridge with npx -y --package figma-edit-mcp figma-edit-mcp-socket, and import the plugin manifest in Figma desktop. Then call channel_join to connect.
Which AI tools work with Figma Edit MCP?
The README lists Cursor, GitHub Copilot in VS Code, Google Antigravity, Claude Code, Claude Desktop, and LM Studio. Each stores the same JSON config in a different file, and Claude Code can add it with one command.
Can the AI delete my variables or styles?
Only if you allow it. Editing variables or styles needs its own checkbox in the plugin, and both are off by default. Even then, variable_delete is rejected while a variable is still used by layers, so references are not left broken.
What happens if a bulk edit has one bad item?
Nothing changes. The plugin validates every item before it modifies the first one, and rejects the whole bulk edit if any item fails. That keeps a half-applied change from leaving the file in an inconsistent state.
Does it need a Figma API token?
The README does not ask for one. It works through a WebSocket bridge and a development plugin you import from a manifest in the Figma desktop app, so you start the bridge and keep the plugin open instead of creating a token.
What are alternatives to Figma Edit MCP?
For other Figma bridges, compare Figma Pilot and Framelink. For reading designs into code rather than editing them, the Figma MCP server is the usual starting point, and a Figma design generation skill covers building screens.