Figma Dev MCP

An MCP server with full read and write access to Figma through a local plugin bridge. It does not use the Figma REST API, so no API token is required and REST API rate limits do not apply.

The npm package includes native binaries for macOS, Linux, and Windows. npx automatically launches the binary for the current platform.

Requirements

• Node.js 18 or newer
• Figma Desktop
• The companion plugin.zip

Configure your MCP client

Claude Code

claude mcp add -s project figma-dev-mcp -- npx -y @kadekdodik/figma-dev-mcp@latest

Claude Desktop and other MCP clients

{
  "mcpServers": {
    "figma-dev-mcp": {
      "command": "npx",
      "args": ["-y", "@kadekdodik/figma-dev-mcp@latest"]
    }
  }
}

VS Code and compatible clients

Add this to .vscode/mcp.json:

{
  "servers": {
    "figma-dev-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@kadekdodik/figma-dev-mcp@latest"]
    }
  }
}

Install the Figma plugin

1. Download plugin.zip from the public Figma Design to Code repository.
2. Extract the archive.
3. In Figma Desktop, open Plugins → Development → Import plugin from manifest.
4. Select the extracted manifest.json.
5. Start the MCP server from your client, then run the plugin in the Figma file you want to work with.

The server and plugin connect locally at 127.0.0.1:1994 by default. You can change the host or port in the plugin UI.

Example prompts

Once the server and plugin show as connected, give your AI agent requests such as:

Inspect a selected design

Read my current Figma selection. Describe its layout, typography, colors, spacing, and reusable components, then take a screenshot to verify your analysis.

The agent can combine get_selection, get_design_context, get_styles, get_variable_defs, and get_screenshot.

Turn a design into code

Convert the selected Figma frame into responsive HTML and Tailwind CSS. Export any image assets to ./assets and preserve the exact colors, typography, spacing, and corner radii.

The public Figma Design to Code workflow contains agent instructions for this use case.

Create a design

Create a 1440 px dashboard frame named “Analytics”. Add a sidebar, header, three metric cards, and a chart placeholder. Use auto layout, 24 px spacing, and reusable color and text styles.

The agent can use create_frame, create_text, create_rectangle, set_auto_layout, and the style tools.

Apply a bulk update

In the selected frame, replace every occurrence of “Acme” with “Northstar”, rename layers beginning with “Card” to use the “Metric” prefix, and change the card corner radius to 16 px.

The agent can use find_replace_text, batch_rename_nodes, and set_corner_radius.

Export design assets and tokens

Export the selected frames as PNG files, export all design tokens as CSS custom properties, and create a PDF containing one page per selected frame.

The agent can use save_screenshots, export_tokens, and export_frames_to_pdf.

Available tools

Figma Dev MCP provides 73 tools.

Create

| Tool | Description | | --- | --- | | create_frame | Create a frame with optional auto layout, fill, and parent. | | create_rectangle | Create a rectangle with an optional fill and corner radius. | | create_ellipse | Create an ellipse or circle. | | create_text | Create text with automatic font loading. | | import_image | Place a base64-encoded image as a rectangle fill. | | create_component | Convert a frame into a reusable component. | | create_section | Create a section to organize frames and groups. |

Modify

| Tool | Description | | --- | --- | | set_text | Update text content. | | set_fills | Replace or append solid fills. | | set_strokes | Replace or append strokes and set their weight. | | set_opacity | Set opacity on one or more nodes. | | set_corner_radius | Set uniform or per-corner radii. | | set_auto_layout | Configure auto-layout properties. | | set_visible | Show or hide nodes. | | lock_nodes | Lock nodes against editing. | | unlock_nodes | Unlock nodes. | | rotate_nodes | Set an absolute rotation. | | reorder_nodes | Move nodes through the layer stack. | | set_blend_mode | Apply a blend mode. | | set_constraints | Set horizontal and vertical constraints. | | move_nodes | Move nodes to an absolute position. | | resize_nodes | Change node width or height. | | rename_node | Rename one node. | | clone_node | Clone, reposition, or reparent a node. | | reparent_nodes | Move nodes to another parent. | | batch_rename_nodes | Rename multiple nodes with replacement, regex, prefix, or suffix rules. | | find_replace_text | Find and replace text in a subtree or page. |

Delete and prototype

| Tool | Description | | --- | --- | | delete_nodes | Permanently delete one or more nodes. | | set_reactions | Replace or append prototype reactions. | | remove_reactions | Remove all reactions or selected reaction indexes. |

Styles

| Tool | Description | | --- | --- | | set_effects | Apply shadows or blur effects directly to a node. | | create_paint_style | Create a solid-color paint style. | | create_text_style | Create a typography style. | | create_effect_style | Create a shadow or blur style. | | create_grid_style | Create a columns, rows, or grid style. | | update_paint_style | Rename or recolor a paint style. | | apply_style_to_node | Link a local style to a node. | | delete_style | Delete a paint, text, effect, or grid style. |

Variables

| Tool | Description | | --- | --- | | create_variable_collection | Create a local variable collection. | | add_variable_mode | Add a mode such as Light or Dark. | | create_variable | Create a color, float, string, or boolean variable. | | set_variable_value | Set a variable value for a mode. | | bind_variable_to_node | Bind a variable to a supported node property. | | delete_variable | Delete a variable or collection. |

Pages, components, and navigation

| Tool | Description | | --- | --- | | add_page | Add a page at an optional index. | | delete_page | Delete a page when more than one page exists. | | rename_page | Rename a page by ID or name. | | navigate_to_page | Switch the active page. | | group_nodes | Group nodes that share a parent. | | ungroup_nodes | Ungroup nodes while preserving their children. | | swap_component | Change the main component of an instance. | | detach_instance | Convert component instances into frames. |

Read documents and selections

| Tool | Description | | --- | --- | | get_document | Read the complete current-page tree. | | get_metadata | Read the file name, pages, and current page. | | get_pages | List pages without loading their trees. | | get_selection | Read the currently selected nodes. | | get_node | Read one node in full detail. | | get_nodes_info | Read multiple nodes in one request. | | get_design_context | Read a depth-limited, token-efficient design tree. | | search_nodes | Search by node name and type. | | scan_text_nodes | Read all text nodes within a subtree. | | scan_nodes_by_types | Find nodes by one or more types. | | get_viewport | Read viewport center, zoom, and bounds. |

Read styles, variables, components, and prototypes

| Tool | Description | | --- | --- | | get_styles | List local paint, text, effect, and grid styles. | | get_variable_defs | Read variable collections, modes, and values. | | get_local_components | List local components and component sets. | | get_annotations | Read dev-mode annotations. | | get_fonts | List fonts used on the current page. | | get_reactions | Read prototype reactions from a node. |

Export

| Tool | Description | | --- | --- | | get_screenshot | Return node screenshots as base64 image data. | | save_screenshots | Save screenshots directly to the local filesystem. | | export_frames_to_pdf | Export frames as a multi-page PDF. | | export_tokens | Export variables and paint styles as JSON or CSS. |

Included MCP prompts

| Prompt | Purpose | | --- | --- | | read_design_strategy | Read and analyze Figma designs efficiently. | | design_strategy | Create and modify designs consistently. | | text_replacement_strategy | Replace text safely in manageable chunks. | | annotation_conversion_strategy | Convert manual annotations to native annotations. | | swap_overrides_instances | Transfer overrides between component instances. | | reaction_to_connector_strategy | Turn prototype reactions into interaction-flow diagrams. |

Supported platforms

| Operating system | Architectures | | --- | --- | | macOS | Intel (x64), Apple silicon (arm64) | | Linux | x64, arm64 | | Windows | x64, arm64 |

Troubleshooting

The Figma plugin shows Disconnected

Confirm that your MCP client has started @kadekdodik/figma-dev-mcp and that the host and port shown in the plugin match the server. The default is 127.0.0.1:1994.

Binary not found

Install the latest package globally, then run the CLI directly:

npm install --global @kadekdodik/figma-dev-mcp@latest
figma-dev-mcp

If the error continues, confirm that your operating system and architecture appear in the supported-platform table.

Use another port

Pass a different port to the server and configure the plugin to match:

npx -y @kadekdodik/figma-dev-mcp@latest --port 2994

Public resources

• Figma Design to Code workflow
• Download plugin.zip
• Report an issue
• License: MIT