Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
ยังไม่มีคำอธิบายภาษาไทย ดูข้อเท็จจริงด้านล่าง หรือเปิดคำอธิบายต้นฉบับจากผู้ทำ
Figma/FigJam MCP server with read/write via plugin — no API token, no limits. 78 tools.เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ผลตรวจผ่าน 3/3 · ทำงานบนเครื่องคุณ · ✓ ตรวจคำสั่งแล้ว 13 พ.ย. 2569
ขั้นแรก: คุณใช้ AI ตัวไหน
เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง
ต่อกับ Claude ได้ แต่ต้องเตรียมก่อน
ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ
SettingsDeveloperEdit Config
{
"mcpServers": {
"figma-rs": {
"command": "npx",
"args": [
"-y",
"figma-mcp-rs"
]
}
}
}ใช้ Figma MCP Rs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude บอกว่ากำลังใช้ Figma MCP Rs หรือมีชื่อเครื่องมือของ Figma MCP Rs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ChatGPT ยังต่อ Figma MCP Rs ไม่ได้
Figma MCP Rs ต้องติดตั้งในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะตัวที่ทำงานบนเว็บ
ก · ใช้แอปที่ต่อ Figma MCP Rs ได้
ข · ตัวอื่นในหมวด ออกแบบ ภาพ และเสียง ที่ต่อกับ ChatGPT ได้
เลือกจากตัวที่ใช้มากในหมวดเดียวกัน เฉพาะตัวที่ต่อด้วยที่อยู่ได้โดยไม่ต้องใส่คีย์
ต่อกับ Claude Code ได้ แต่ต้องเตรียมก่อน
ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
claude mcp add --scope user figma-rs -- npx -y figma-mcp-rsต้องเห็น Figma MCP Rs ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ใช้ Figma MCP Rs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude Code บอกว่ากำลังใช้ Figma MCP Rs หรือมีชื่อเครื่องมือของ Figma MCP Rs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Cursor ได้ แต่ต้องเตรียมก่อน
ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ใช้ Figma MCP Rs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Cursor บอกว่ากำลังใช้ Figma MCP Rs หรือมีชื่อเครื่องมือของ Figma MCP Rs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ VS Code ได้ แต่ต้องเตรียมก่อน
ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
ใช้ Figma MCP Rs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า VS Code บอกว่ากำลังใช้ Figma MCP Rs หรือมีชื่อเครื่องมือของ Figma MCP Rs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม
ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง
Claude Code
claude mcp add --scope user figma-rs -- npx -y figma-mcp-rsClaude Desktop (claude_desktop_config.json)
{
"mcpServers": {
"figma-rs": {
"command": "npx",
"args": [
"-y",
"figma-mcp-rs"
]
}
}
}Cursor (~/.cursor/mcp.json)
{
"mcpServers": {
"figma-rs": {
"command": "npx",
"args": [
"-y",
"figma-mcp-rs"
]
}
}
}VS Code (mcp.json)
{
"servers": {
"figma-rs": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"figma-mcp-rs"
]
}
}
}ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569
ติดตั้งบนเครื่องได้ใน
ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 14 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub jirayusueb ซึ่งเป็นเจ้าของ repo
มีการแก้โค้ดล่าสุด 2 เดือนที่ผ่านมา
ใช้ MIT
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์
ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย
ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx
ยังไม่มีรีวิว
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 3 จาก 3 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด 2 เดือนที่ผ่านมา และส่งรุ่นล่าสุด (0.1.0) เข้า registry 2 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Figma Context MCP, AutoClip, Next AI Draw.io
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Clip long videos into short clips with covers and captions. Local CLI and MCP.
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Figma/FigJam MCP server in Rust — free, no rate limits. Rust port of vkhanhqui/figma-mcp-go with a rewritten SolidJS plugin and FigJam support.
Open-source MCP server with full read/write access to Figma and FigJam via plugin — no REST API, no rate limits. Turn text into designs and designs into real code. Works with Claude, Cursor, GitHub Copilot, and any MCP-compatible AI tool.
Highlights
get_status, execute_code, eight FigJam tools, the use_figma escape hatch, and four design-system tools: update_style, update_variable, set_variable_mode, bind_variable_to_style)rgb(), hsl(), or oklch(); get_styles and export_tokens emit any of them via colorFormatThe official Figma MCP servers go through the REST API, which is rate limited per plan:
| Figma plan | REST budget |
|---|---|
| Starter | 6 calls/month |
| Professional | 200 calls/day |
| Enterprise | 600 calls/day |
This server never calls the REST API. It talks to a plugin running inside Figma Desktop over a local WebSocket, so every read and write is unlimited and free — and unlike REST, the plugin can *write* to the open file.
Measured on Apple M4 Pro: ~6 MB RSS idle, ~7 MB with a plugin connected during tool round trips; startup < 10 ms. The Go reference runs ~15–25 MB.
Claude Code CLI
claude mcp add -s project figma-mcp-rs -- npx -y figma-mcp-rs@latest
Or build from source:
make build # cargo build --release + plugin build
claude mcp add -s project figma-mcp-rs -- /path/to/figma-mcp-rs/target/release/figma-mcp-rs
Codex CLI
codex mcp add figma-mcp-rs -- npx -y figma-mcp-rs@latest
Claude Code plugin marketplace (also installs the 15 skills)
/plugin marketplace add <this-repo>
/plugin install figma-mcp-rs@figma-mcp-rs
.mcp.json (Claude and other MCP-compatible tools)
{
"mcpServers": { "figma-mcp-rs": { "command": "npx", "args": ["-y", "figma-mcp-rs"] } } }
.vscode/mcp.json (Cursor / VS Code / GitHub Copilot)
{
"servers": { "figma-mcp-rs": { "type": "stdio", "command": "npx", "args": ["-y", "figma-mcp-rs"] } } }
Docker
docker build -t figma-mcp-rs .
docker run -i --rm -p 1998:1998 figma-mcp-rs
.mcp.json with Docker:
{
"mcpServers": { "figma-mcp-rs": { "command": "docker", "args": ["run", "-i", "--rm", "-p", "1998:1998", "figma-mcp-rs"] } } }
The image listens on 0.0.0.0:1998 (baked into the default CMD), so the Figma plugin connects to ws://127.0.0.1:1998 as usual through the port mapping — keep the host port at 1998 or update the host in the plugin UI. Run one container per plugin connection; for multiple simultaneous MCP clients on one machine prefer the native binary, whose leader election shares a single plugin connection. The self-installed plugin path inside the container is not host-accessible — import the plugin from this repo's plugin/ directory or the release plugin.zip instead.
Server flags: --ip (default 127.0.0.1), --port (default 1998).
The plugin is bundled inside the server binary — no download or build step.
manifest.json, dist/code.js, and dist/index.html to ~/.figma-mcp-rs/plugin/ (Windows: %USERPROFILE%\.figma-mcp-rs\plugin\) and logs the path.~/.figma-mcp-rs/plugin/manifest.jsonws://127.0.0.1:1998 (host/port configurable in the plugin UI)If a tool fails with plugin not connected, call get_status — it diagnoses the bridge and returns setup instructions.
Multiple server instances are safe: the first to bind the port becomes leader and owns the plugin connection; others become followers that proxy tool calls and take over automatically if the leader dies.
The plugin loads in every editor (editorType: ["figma", "figjam", "slides", "dev"]):
get_document/get_design_context serialize FigJam node types (STICKER, CONNECTOR, MARKER, WIDGET, EMBED, MEDIA…)create_sticky, create_stickies, create_connector, create_shape_with_text, create_table, create_code_block, auto_arrange, get_board_contentsfigma.teamLibrary.*, importVariableByKeyAsync), and anything else unwrapped: use use_figma| Tool | Description |
|---|---|
get_status | Check whether the plugin bridge is connected; returns setup instructions when it is not. Call this first if any tool fails with plugin not connected. |
| Tool | Description |
|---|---|
use_figma | Run Plugin API JavaScript inside the file. The code is the body of async () => { … }: top-level await works and only the return value comes back (console.log is discarded; the value must be JSON-serializable, so return IDs/counts/names, not node objects). Covers what the named tools don't wrap: Slides, component variants and properties, vector networks, styled text ranges, variable scopes, bulk edits in one round-trip. |
execute_code | Run arbitrary Plugin API code in the same sandbox — the code runs as an async function body, with an optional timeoutMs (1–25000 ms, default 5000) for long-running operations. Runs in the user's open file and is undoable with Cmd/Ctrl+Z. Use only for operations the dedicated tools don't cover; prefer the specific tool when one exists. |
| Tool | Description |
|---|---|
create_frame | Create a frame with optional auto-layout, fill, and parent |
create_rectangle | Create a rectangle with optional fill and corner radius |
create_ellipse | Create an ellipse or circle |
create_text | Create a text node (font loaded automatically) |
import_image | Decode base64 image and place it as a rectangle fill |
create_component | Convert an existing FRAME node into a reusable component |
create_section | Create a Figma Section node to organise frames on a page |
| Tool | Description |
|---|---|
set_text | Update text content of an existing TEXT or STICKER node |
set_fills | Set solid fill color (hex) on a node |
set_strokes | Set solid stroke color and weight on a node |
set_opacity | Set opacity of one or more nodes (0 = transparent, 1 = opaque) |
set_corner_radius | Set corner radius — uniform or per-corner |
set_auto_layout | Set auto-layout properties on one or more nodes — direction, padding, gap, alignment, wrap, HUG/FILL sizing, absolute positioning (Figma only) |
set_visible | Show or hide one or more nodes |
lock_nodes / unlock_nodes | Lock/unlock one or more nodes |
rotate_nodes | Set absolute rotation in degrees on one or more nodes |
reorder_nodes | Change z-order: bringToFront, sendToBack, bringForward, sendBackward |
set_blend_mode | Set blend mode (MULTIPLY, SCREEN, OVERLAY, …) |
set_constraints | Set responsive constraints on one or more nodes |
move_nodes | Move nodes to an absolute x/y position |
resize_nodes | Resize nodes by width and/or height |
rename_node | Rename a node |
clone_node | Clone a node, optionally repositioning or reparenting |
reparent_nodes | Move nodes to a different parent frame, group, or section |
group_nodes / ungroup_nodes | Group nodes into a GROUP / dissolve groups |
batch_rename_nodes | Bulk rename via find/replace, regex, or prefix/suffix |
find_replace_text | Find and replace text across TEXT nodes in a subtree or page; supports regex |
delete_nodes | Delete one or more nodes permanently |
| Tool | Description |
|---|---|
set_reactions | Set prototype reactions (triggers + actions); mode replace or append |
remove_reactions | Remove all or specific reactions by index |
| Tool | Description |
|---|---|
set_effects | Apply drop shadow / blur effects directly on a node |
create_paint_style / create_text_style / create_effect_style / create_grid_style | Create named local styles |
update_style | Update any style in place — paint color, text font/size/spacing, effects, grid — plus name and description |
bind_variable_to_style | Bind a variable to a style so the style itself is token-driven |
apply_style_to_node | Apply an existing local style to a node |
delete_style | Delete any style by ID |
| Tool | Description |
|---|---|
create_variable_collection | Create a new local variable collection with an optional initial mode |
add_variable_mode | Add a new mode to an existing collection (e.g. Light/Dark) |
create_variable | Create a variable (COLOR/FLOAT/STRING/BOOLEAN) in a collection |
set_variable_value | Set a variable's value for a mode — a literal or an alias to another variable |
update_variable | Rename a variable or collection; set description, scopes, Dev Mode code syntax; rename a mode |
set_variable_mode | Apply or clear a collection's mode override on a node or the current page |
bind_variable_to_node | Bind a variable to a node property (fills, strokes, size, spacing, …); omit variableId to unbind |
delete_variable | Delete a variable, an entire collection, or a single mode |
| Tool | Description |
|---|---|
add_page | Add a new page (optional name and index) |
delete_page | Delete a page by ID or name |
rename_page | Rename a page by ID or current name |
| Tool | Description |
|---|---|
navigate_to_page | Switch the active page by ID or name |
swap_component | Swap the main component of an INSTANCE node |
detach_instance | Detach component instances to plain frames |
| Tool | Description |
|---|---|
get_document | Full current page tree |
get_metadata | File name, pages, current page |
get_pages | All pages (IDs + names) — lightweight |
get_selection | Currently selected nodes |
get_node / get_nodes_info | One node / multiple nodes by ID |
get_design_context | Depth-limited tree with detail level (minimal/compact/full) |
search_nodes | Find nodes by name substring and/or type |
scan_text_nodes | All text nodes in a subtree |
scan_nodes_by_types | Nodes matching a type list |
get_viewport | Current viewport center, zoom, visible bounds |
| `get_reactio