RELATED 01
Figma MCP Bridge
Read and edit open Figma and FigJam files through a desktop plugin instead of the Figma REST API
889GitHub stars
1.3k/wknpm downloads
60popularity score
Claude Talk to Figma MCP
Reads and edits open Figma and FigJam files through a local plugin and WebSocket relay
By Xúlio Zé (individual) TypeScript Local · stdio Design
62 popularity score ★ 676 ↓ 731/wk
Connect your client
Local (npm)
Add in one click
Opens the app, which asks before it adds the server.
Or add it by command or config
FirstTerminal
npx claude-talk-to-figma-mcpClaude CodeTerminal
claude mcp add claude-talk-to-figma -- npx -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-serverClaude Desktopclaude_desktop_config.json
{
"mcpServers": {
"claude-talk-to-figma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Cursor~/.cursor/mcp.json
{
"mcpServers": {
"claude-talk-to-figma": {
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}VS Code.vscode/mcp.json
{
"servers": {
"claude-talk-to-figma": {
"type": "stdio",
"command": "npx",
"args": [
"-p",
"claude-talk-to-figma-mcp@latest",
"claude-talk-to-figma-mcp-server"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.claude-talk-to-figma]
command = "npx"
args = ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-server"]Gemini CLITerminal
gemini mcp add --scope user claude-talk-to-figma npx -- -p claude-talk-to-figma-mcp@latest claude-talk-to-figma-mcp-serverWhat it does
Claude Talk to Figma MCP gives an MCP client hands inside the Figma desktop app. It has three moving parts: the MCP server your client starts over stdio, a small WebSocket relay on your machine, and a Figma development plugin that you import into Figma Desktop. The plugin shows a channel ID; you ask the assistant to join that channel, and from then on its tool calls reach the open file through the relay.
The tools cover reading a document (pages, selection, node details, styles, text scans, image export), drawing and arranging layers (shapes, frames, text, groups, auto layout), restyling them (fills, strokes, effects, typography, corner radius), working with local and team-library components, editing image fills, and building FigJam boards with stickies, shapes, connectors and sections. Typical uses are design audits such as contrast checks, bulk recolouring, and reading a frame to write matching front-end code.
The server at v1.0.0 registers 93 tools across its tool files, while the README's command list (COMMANDS.md) names 64; the extra ones include variables (get_variables, set_variable, apply_variable_to_node), SVG import and export (set_svg, get_svg). The relay queues commands per channel so several agents can work on one file, gives each command up to two minutes before returning a timeout error, and refuses set_current_page outright; creation tools take a parentId to say which page they target.
It is a community project by Xúlio Zé, based on Sonny Lazuardi's cursor-talk-to-figma-mcp, and is not made by Figma.
What it needs
| Runtime | Node.js |
|---|
Node.js (the client starts the server with npx). Figma Desktop with the project's development plugin imported from src/claude_mcp_plugin/manifest.json, which means having the repository on disk: running `npx claude-talk-to-figma-mcp` once clones it with git, installs dependencies and starts the WebSocket relay on port 3055. The relay is written against Bun's server API; the launcher offers to install Bun and otherwise falls back to npm. The relay and the plugin must be running, and the assistant must join the plugin's channel, before any tool works. Claude Desktop can instead install the .dxt file from the releases page.
Limits
It works only on files open in Figma Desktop with the plugin running; it does not call Figma's REST API or reach files that are closed. set_current_page is still listed as a tool but the relay blocks it in every case; pass the page ID as parentId instead. Each command times out after 120 seconds, a value fixed in the relay's code. The relay port is set to 3055 in socket.ts, while the MCP server's --port, --server and --reconnect-interval arguments only change where it connects. The README lists full Figma Variables support as still in development, although variable tools exist at v1.0.0. Docker in the docs runs only the relay, not the MCP server.
Who it suits
It suits designers and front-end developers who work in Figma Desktop and want an assistant to audit, restyle or build layers in the file they have open, including FigJam boards. Because it writes to the live document and needs a plugin, a relay and a channel join each session, it is more setup than a read-only tool. Anyone who needs closed files, comments or Figma's REST API without the desktop app should look elsewhere.
Tools 60 of 93
join_channel- Connect the server to the Figma plugin session by its channel ID
get_document_info- Summarise the open document
get_selection- Report what is selected in Figma
get_node_info- Return details of one node by ID
get_nodes_info- Return details of several nodes at once
scan_text_nodes- Find every text node under a node
get_styles- List the document's local styles
export_node_as_image- Render a node to an image
get_pages- List the document's pages and their IDs
create_page- Add a page
delete_page- Remove a page
rename_page- Change a page's name
set_image_fill- Fill a node with an image
get_image_from_node- Read the image fill details of a node
replace_image_fill- Swap the image in an existing image fill
apply_image_transform- Pan, scale or rotate an image within its node
set_image_filters- Adjust an image's exposure, contrast, saturation and similar
create_rectangle- Draw a rectangle
create_frame- Create a frame container
create_text- Add a text layer
create_ellipse- Draw a circle or oval
create_polygon- Draw a polygon
create_star- Draw a star
clone_node- Duplicate a node
group_nodes- Group nodes together
ungroup_nodes- Break a group apart
insert_child- Move a node inside another
flatten_node- Flatten a node into a single vector
set_fill_color- Set a node's fill colour
set_stroke_color- Set a node's stroke colour and weight
set_selection_colors- Recolour a node and its children in one pass
move_node- Change a node's position
resize_node- Change a node's size
rename_node- Change a layer's name
delete_node- Remove a node
set_corner_radius- Round a node's corners
set_auto_layout- Configure auto layout on a frame
set_effects- Apply shadows or blurs
set_effect_style_id- Attach an existing effect style to a node
set_text_content- Replace the text of a text node
set_multiple_text_contents- Replace text in many nodes in one call
set_text_align- Set horizontal and vertical text alignment
set_font_name- Change the font family and style
set_font_size- Change the font size
set_font_weight- Change the font weight
set_text_style_id- Attach an existing text style to a node
set_letter_spacing- Adjust letter spacing
set_line_height- Adjust line height
set_text_case- Switch text to upper, lower or title case
get_styled_text_segments- Break a text node into runs by a style property
get_local_components- List components defined in the file
get_remote_components- List components from team libraries
create_component_instance- Place an instance of a component
set_instance_variant- Switch an instance to another variant
get_figjam_elements- Read stickies, connectors, shapes and sections on a FigJam board
create_sticky- Add a sticky note to a FigJam board
set_sticky_text- Edit a sticky note's text
create_shape_with_text- Add a labelled FigJam shape
create_connector- Draw a connector between two board elements
create_section- Create a section on a FigJam board