Allows AI agents to directly operate Figma Desktop, enabling UI design tasks such as creating frames, text, shapes, modifying styles, managing components, variables, effects, and prototype interactions.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Talk to Figma MCP create a frame 'Login' 400x600 with auto layout"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
讓 AI Agent（Claude Code / Cursor）透過 MCP 協定直接操作 Figma Desktop，實現 AI 自主 UI 設計。
基於 grab/cursor-talk-to-figma-mcp v0.3.4 的私有 fork。
工具 | 功能 | 狀態 |
| Prototype 互動（ON_CLICK 導航等） | ✅ |
| Frame 轉 Component | ✅ |
| 建立 Component Instance（含 componentId 支援） | ✅ |
| 建立 Variable Collection（COLOR/FLOAT/STRING/BOOLEAN，多模式） | ✅ |
| 節點重命名 | ✅ |
| 綁定 Variable 到填色 | ✅ |
| 綁定 Variable 到邊框色 | ✅ |
| 圖片填充（URL → image fill） | ✅ |
| 陰影/模糊特效 | ✅ |
| 字體選擇 + 大小 | ✅ |
| 漸層填色 | ✅ |
| 頁面管理 | ✅ |
WebSocket Server 支援 Correlation ID 定向路由，多個 MCP Agent 可同時操作同一個 Figma 文件而不互相干擾。
每個連線分配 clientId
指令送出時記錄 messageId → sender
Plugin 回應時只路由給原始發送者（非廣播）
30 秒 timeout 自動清理過期 request
向後相容：無 id 的訊息仍廣播
免驗證模式：WebSocket 連線不需 ECDSA 簽名，立即放行（適合本地開發）
自動加入 Channel：MCP Server 用 MCP_CHANNEL 環境變數，Plugin 用 UI 輸入欄位
支援多專案同時使用（每個專案設不同 channel 名稱）
Related MCP server: figma-pilot
Windows (Figma Desktop + Plugin)
↕ WebSocket (port 3055)
WSL2 / Linux (socket.ts)
↕ stdio
Claude Code (MCP Server → dist/server.js)支援環境：
Windows + WSL2：Plugin 在 Windows Figma，Server 在 WSL2
本地開發：全部在同一台
遠端：透過 SSH Tunnel 或 Cloudflare Tunnel
Bun（WebSocket Server）
Node.js 18+（MCP Server）
Figma Desktop App
git clone https://github.com/kctw-dev/talk-to-figma-mcp.git
cd talk-to-figma-mcp
npm install
npm run buildbun run src/socket.ts
# WebSocket server running on port 3055Windows + WSL2 環境：
# 從 WSL2 複製 Plugin 到 Windows
cp src/cursor_mcp_plugin/code.js /mnt/c/Users/<USERNAME>/figma-plugin/
cp src/cursor_mcp_plugin/manifest.json /mnt/c/Users/<USERNAME>/figma-plugin/
cp src/cursor_mcp_plugin/ui.html /mnt/c/Users/<USERNAME>/figma-plugin/在 Figma Desktop：
Plugins → Development → Import plugin from manifest
選擇 C:\Users\<USERNAME>\figma-plugin\manifest.json
開啟 Plugin，Channel 欄填專案名稱，按 Connect
本地環境：
Figma Desktop → Plugins → Development → Import plugin from manifest
選擇 src/cursor_mcp_plugin/manifest.json
claude mcp add -e MCP_CHANNEL=my-project -- talk-to-figma-mcp node /path/to/talk-to-figma-mcp/dist/server.js或在 .mcp.json：
{
"mcpServers": {
"talk-to-figma-mcp": {
"type": "stdio",
"command": "node",
"args": ["/path/to/talk-to-figma-mcp/dist/server.js"],
"env": {
"MCP_CHANNEL": "my-project"
}
}
}
}工具 | 說明 |
| 文件資訊 |
| 目前選取 |
| 指定節點資訊 |
| 本地 Component 清單 |
| 本地樣式 |
| Prototype 互動 |
| 註解 |
| Component Override |
| Plugin 版本 |
| 依類型掃描 |
| 掃描文字節點 |
工具 | 說明 |
| Frame（含 Auto Layout） |
| 矩形 |
| 文字 |
| Frame 轉 Component |
| Component Instance |
| 連接線 |
| Variable Collection |
工具 | 說明 |
| 移動 |
| 縮放 |
| 複製 |
| 刪除 |
| 重命名 |
| 填色 |
| 邊框色 |
| 圓角 |
| 文字內容 |
| Auto Layout 模式 |
| 內距 |
| 間距 |
| 軸對齊 |
| 尺寸模式 |
| Prototype 互動 |
| 註解 |
| Component Override |
| 預設連接線 |
| 聚焦/選取 |
| 綁定 Variable 到填色 |
| 綁定 Variable 到邊框 |
| 圖片填充（URL → image fill） |
| 陰影/模糊特效（DROP_SHADOW 等） |
| 字體選擇 + 大小（fontFamily/fontStyle/fontSize） |
| 漸層填色（LINEAR/RADIAL/ANGULAR/DIAMOND） |
工具 | 說明 |
| 新增頁面 |
| 切換頁面（by ID 或 name） |
| 取得所有頁面清單 |
工具 | 說明 |
| PNG/JPG/SVG/PDF |
工具 | 說明 |
| 加入通訊頻道 |
功能 | 狀態 | 說明 |
Pen tool | ❌ 不支援 | 無法畫自定義形狀 |
Boolean 運算 | ❌ 不支援 | 無 Union/Subtract |
Mask | ❌ 不支援 | 無法建遮罩 |
Grid/Guide | ❌ 不支援 | 無法設定網格線 |
匯入 SVG 檔案 | ❌ 不支援 | 無法直接匯入 SVG |
# WebSocket Server（開發模式）
bun run src/socket.ts
# MCP Server Build
npm run build # 單次
npm run build:watch # 監聽
# 測試
bun test src/socket.test.ts修改 Plugin 後需重新複製到 Figma 讀取的路徑，然後在 Figma 重開 Plugin。
MIT（同 upstream）
Fork 時版本: v0.3.4
Bind a Figma variable to a node's fill color
Inputs: nodeId (required), variableName (required).
Bind a Figma variable to a node's stroke color
Inputs: nodeId (required), variableName (required).
Clone an existing node in Figma
Inputs: nodeId (required), x, y.
Convert an existing Figma frame/node into a reusable Component. The node cannot already be a component or be inside a component.
Inputs: nodeId (required).
Create an instance of a component in Figma
Inputs: x (required), y (required), parentId, componentId, +1 more.
Create connections between nodes using the default connector style
Inputs: connections (required).
Create a new frame in Figma
Inputs: x (required), y (required), width (required), height (required), +16 more.
Create a new page in the Figma document
Inputs: name, setCurrent.
Create a new rectangle in Figma
Inputs: x (required), y (required), width (required), height (required), +2 more.
Create a new text element in Figma
Inputs: x (required), y (required), text (required), name, +4 more.
Create a Figma variable collection with variables. Supports COLOR, FLOAT, STRING, and BOOLEAN types with multiple modes (e.g., light/dark theme).
Inputs: variables (required), collectionName (required), modes.
Delete multiple nodes from Figma at once
Inputs: nodeIds (required).
Delete a node from Figma
Inputs: nodeId (required).
Detach a library instance into an editable frame. After detaching, all sublayer text becomes modifiable.
Inputs: nodeId (required).
Export a node as an image from Figma
Inputs: nodeId (required), scale, format.
Get all annotations in the current document or specific node
Inputs: nodeId (required), includeCategories.
Get detailed information about the current Figma document
Inputs: no named parameters.
Get the mainComponent key and info from an instance node
Inputs: nodeId (required).
Get all override properties from a selected component instance. These overrides can be applied to other instances, which will swap them to match the source component.
Inputs: nodeId.
List all available library variable collections (from enabled team/community libraries)
Inputs: no named parameters.
List components in a specific library collection by collection key or name
Inputs: collectionKey (required).
Get all local components from the Figma document
Inputs: no named parameters.
Get detailed information about a specific node in Figma
Inputs: nodeId (required).
Get detailed information about multiple nodes in Figma
Inputs: nodeIds (required).
Get all pages in the current Figma document
Inputs: no named parameters.
Get the Figma plugin version to verify it is up-to-date
Inputs: no named parameters.
Get Figma Prototyping Reactions from multiple nodes. CRITICAL: The output MUST be processed using the 'reaction_to_connector_strategy' prompt IMMEDIATELY to generate parameters for connector lines via the 'create_connections' tool.
Inputs: nodeIds (required).
Get information about the current selection in Figma
Inputs: no named parameters.
Get all styles from the current Figma document
Inputs: no named parameters.
Import a component from a library by its key and create an instance on the current page
Inputs: key (required), x, y, parentId.
Import a component set (with variants) from a library by its key
Inputs: key (required).
Import a style (color, text, effect, grid) from a library by its key
Inputs: key (required).
Join a specific channel to communicate with Figma
Inputs: channel.
Move a node to a new position in Figma
Inputs: x (required), y (required), nodeId (required).
Get detailed information about the current selection in Figma, including all node details
Inputs: no named parameters.
Rename a node in Figma
Inputs: name (required), nodeId (required).
Resize a node in Figma
Inputs: width (required), height (required), nodeId (required).
Scan all instances under a node and return their mainComponent keys (deduplicated). Use to discover published library component keys.
Inputs: nodeId.
Scan for child nodes with specific types in the selected Figma node
Inputs: types (required), nodeId (required).
Scan all text nodes in the selected Figma node
Inputs: nodeId (required).
Create or update an annotation
Inputs: nodeId (required), labelMarkdown (required), categoryId, properties, +1 more.
Set primary and counter axis alignment for an auto-layout frame in Figma
Inputs: nodeId (required), counterAxisAlignItems, primaryAxisAlignItems.
Set the corner radius of a node in Figma
Inputs: nodeId (required), radius (required), corners.
Set a copied connector node as the default connector
Inputs: connectorId.
Set visual effects (shadow, blur) on a node
Inputs: nodeId (required), effects (required).
Set the fill color of a node in Figma can be TextNode or FrameNode
Inputs: b (required), g (required), r (required), nodeId (required), +1 more.
Set focus on a specific node in Figma by selecting it and scrolling viewport to it
Inputs: nodeId (required).
Set font family, style, and size on a text node
Inputs: nodeId (required), fontSize, fontStyle, fontFamily.
Set a gradient fill on a node
Inputs: stops (required), nodeId (required), angle, gradientType.
Set an image fill on a node from a URL
Inputs: nodeId (required), imageUrl (required), scaleMode.
Apply previously copied overrides to selected component instances. Target instances will be swapped to the source component and all copied override properties will be applied.
Inputs: targetNodeIds (required), sourceInstanceId (required).
Set component properties on an instance (e.g. switch Platform from Desktop to Mobile)
Inputs: nodeId (required), properties (required).
Set distance between children in an auto-layout frame
Inputs: nodeId (required), itemSpacing, counterAxisSpacing.
Set the layout mode and wrap behavior of a frame in Figma
Inputs: nodeId (required), layoutMode (required), layoutWrap.
Set horizontal and vertical sizing modes for an auto-layout frame in Figma
Inputs: nodeId (required), layoutSizingVertical, layoutSizingHorizontal.
Set multiple annotations parallelly in a node
Inputs: nodeId (required), annotations (required).
Set multiple text contents parallelly in a node
Inputs: text (required), nodeId (required).
Set padding values for an auto-layout frame in Figma
Inputs: nodeId (required), paddingTop, paddingLeft, paddingRight, +1 more.
Set prototype interactions (reactions) on a Figma node. Allows creating click-to-navigate, hover, and other prototype interactions.
Inputs: nodeId (required), reactions (required).
Set selection to multiple nodes in Figma and scroll viewport to show them
Inputs: nodeIds (required).
Set the stroke color of a node in Figma
Inputs: b (required), g (required), r (required), nodeId (required), +2 more.
Set the text content of an existing text node in Figma
Inputs: text (required), nodeId (required).
Switch to a different page in the Figma document
Inputs: pageId, pageName.
Walk entire node subtree and replace text by exact match. Works on library instance sublayers that getNodeByIdAsync cannot access.
Inputs: nodeId (required), replacements (required).
Walk entire node subtree and collect all text nodes. Works on library instance sublayers.
Inputs: nodeId (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 65 tools
Several tools have overlapping purposes, such as 'read_my_design' and 'get_selection' which both provide detailed selection info, and 'scan_text_nodes' vs 'walk_and_scan_text' which both scan text nodes. While many tools are distinct, these ambiguities could cause an agent to select the wrong tool.
Most tool names follow a consistent verb_noun pattern in snake_case (e.g., 'create_rectangle', 'set_fill_color'). The main outlier is 'read_my_design', which breaks the pattern with 'my' and differs from others like 'get_selection'. Overall, naming is largely predictable.
Sixty-five tools is excessive for a typical MCP server, exceeding the 'too many' threshold of 25+. While Figma has a broad feature set, the tool count feels bloated and could be streamlined, e.g., by merging similar tools or reducing granularity.
The tool set covers a wide range of Figma operations: node CRUD, styling, text, components, instances, libraries, variables, prototyping, and annotations. Minor gaps exist (e.g., no explicit boolean operations), but the surface is comprehensive for most design workflows.
214 tools for AI agents over one MCP endpoint: image, video, audio, 3D, data, storage, mail, GPUs.
Free public MCP for AI agents — 193 tools, 44 workflows. No API key.
Agent-Native design tool - create and edit visual designs with agent assistance
Your AI agent designs editable, clickable UI prototypes on a live canvas.