Figma Vector MCP

io.github.workingmodel由 GitHub 帳號 workingmodel 發布v0.3.3更新於 Oct 30, 2026

Let Claude create and edit fully editable vector nodes on the Figma canvas.

發布方自己的服務：Figma MCP Server

已驗證STDIO僅桌面開發者工具媒體與設計

服務詳細資訊

識別碼: io.github.workingmodel/figma-vector-mcp
傳輸: STDIO
執行環境: Desktop only
信任: Verified
發布於: Oct 22, 2026

安全提示

MCP 服務會接收對話中的工具呼叫請求，並可能執行外部操作。啟用前請先了解該服務能做什麼，並只授予它所需的權限。

註冊中心已驗證此條目所屬的 GitHub 帳號 workingmodel。這並不表明該帳號就是產品方。

SourceWeft 的檢查只涵蓋條目是否完整、端點是否回應；不審查伺服器的程式碼，也不審查其工具的行為。

在 README 中新增徽章

向讀者展示該 MCP 服務已收錄於 SourceWeft，徽章連結到本頁。

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.workingmodel%2Ffigma-vector-mcp.svg)](https://sourceweft.com/mcp/io.github.workingmodel%2Ffigma-vector-mcp?utm_source=readme&utm_medium=badge)

概覽

AI 產生的概覽

本機 MCP 伺服器加 Figma 外掛，讓助理在 Figma 畫布上建立與編輯可完整編輯的向量節點、形狀、文字與元件。

可以做什麼: 建立向量與形狀：SVG 字串、路徑資料、折線、畫框、矩形、橢圓與文字
設定節點樣式：純色、漸層與圖片填色，描邊、效果、混合模式、圓角、不透明度與文字樣式
整理畫布：移動、縮放、複製、重新命名、隱藏、調整層級、群組、取消群組、布林運算與遮罩
版面與元件：自動版面、版面格線、元件、實例、文件樣式與字型
檢視與導覽：文件資訊、目前選取範圍、節點詳情、節點搜尋、頁面與視窗聚焦
匯出與批次：匯出 SVG 或 PNG、頁面截圖，以及一次往返執行多道指令
適用情境: 適合讓助理真正繪製或修改 Figma 設計，而不只是讀取：產生向量圖形、建立介面畫框與元件，或在 Figma 檔案與 SVG 之間來回轉換。
執行需求: 透過 npm（figma-vector-mcp，或 bunx/npx）以 stdio 在本機執行。需要 Figma 桌面版並匯入搭配的外掛、保持外掛面板開啟，同時執行監聽 ws://localhost:3055 的本機 socket 中繼。選用的 FVMCP_CHANNEL、FVMCP_PORT、FVMCP_TIMEOUT_MS 需與外掛設定一致。

安裝前請注意

助理會直接寫入目前開啟的 Figma 文件：可建立、改樣式、移動、群組與刪除節點，建議在可還原的副本或版本上操作。外掛面板需保持開啟，中繼埠對本機其他程序可見。匯入 SVG 時漸層、濾鏡、遮罩與腳本會被移除。

安裝

在 SourceWeft 中

開啟儀表板中的 Figma Vector MCP，將其新增到工作區。
為需要使用其工具的對話啟用該服務。

Desktop only，透過 STDIO。 STDIO 服務會啟動本機處理程序，因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照儲存庫中的啟動說明。

README

Figma Vector MCP

A Figma plugin + MCP server that lets Claude (or any MCP client) create and manipulate fully-editable vector nodes on the Figma canvas — paths, shapes, gradients, text, effects, image fills, and more — via a local WebSocket relay.

Developed by Working Model Inc

[npm version] [npm downloads]

Version 0.3.3 — 58 tools across creation, styling, layout, components, effects, pages, and export.

Why This Exists

cursor-talk-to-figma-mcp is great for reading Figma state and creating basic primitives, but it has no vector path creation, gradient, effects, or compositing tools. This plugin fills that gap:

Capability	cursor-talk-to-figma-mcp	figma-vector-mcp
Create rectangle / ellipse / frame / text	✅	✅
Create from SVG string	❌	✅
Create from path `d` string	❌	✅
Create polyline / polygon	❌	✅
Gradient fills (linear, radial, angular, diamond)	❌	✅
Image fills (base64 → canvas)	❌	✅
Effects (shadow, blur)	❌	✅
Blend modes	❌	✅
Boolean operations (union, subtract, etc.)	❌	✅
Auto-layout	❌	✅
Components + instances	❌	✅
Font discovery	❌	✅
Node search	❌	✅
Multi-page management	❌	✅
Named node registry	❌	✅
Batch commands (single round-trip)	❌	✅
Auto-reconnect + command queue	❌	✅
Export SVG + PNG	❌	✅

Architecture

Claude (MCP client)  ↕ stdio (MCP protocol)server.ts (MCP server)  ↕ WebSocket (ws://localhost:3055)socket.ts (relay — channel-based routing)  ↕ WebSocketFigma plugin (ui.html ↔ code.js)  ↕ postMessageFigma Plugin API → canvas

Claude (MCP client)  ↕ stdio (MCP protocol)server.ts (MCP server)  ↕ WebSocket (ws://localhost:3055)socket.ts (relay — channel-based routing)  ↕ WebSocketFigma plugin (ui.html ↔ code.js)  ↕ postMessageFigma Plugin API → canvas

The socket relay runs locally. The Figma plugin connects and joins a named channel. The MCP server joins the same channel and sends commands. Results flow back the same path.

AI Agent Quickstart

For AI agents (Claude Code, Cursor, etc.) — the recommended call sequence to start any session:

1. health_check                    → confirm plugin is connected2. get_document_info               → get page IDs, current page, top-level nodes3. get_available_fonts             → discover loadable fonts before create_text4. get_styles                      → load brand colours/text styles if available

1. health_check                    → confirm plugin is connected2. get_document_info               → get page IDs, current page, top-level nodes3. get_available_fonts             → discover loadable fonts before create_text4. get_styles                      → load brand colours/text styles if available

Color convention: All RGB values are 0–1 throughout (matching Figma's internal format). r: 1, g: 0, b: 0 = red. Never use 0–255.

Gradient workflow:

1. create_frame({ width, height })          → get frameId2. set_gradient_fill({ nodeId: frameId, type: "LINEAR", angle: 135,     stops: [{ color: { r:0.2, g:0.1, b:0.9 }, position: 0 },             { color: { r:0.9, g:0.2, b:0.4 }, position: 1 }] })

1. create_frame({ width, height })          → get frameId2. set_gradient_fill({ nodeId: frameId, type: "LINEAR", angle: 135,     stops: [{ color: { r:0.2, g:0.1, b:0.9 }, position: 0 },             { color: { r:0.9, g:0.2, b:0.4 }, position: 1 }] })

Image fill workflow (with generative AI):

1. Generate image via Replicate/fal.ai → get base64 PNG2. create_frame({ width: 512, height: 512 })3. set_image_fill({ nodeId, base64, scaleMode: "FILL" })

1. Generate image via Replicate/fal.ai → get base64 PNG2. create_frame({ width: 512, height: 512 })3. set_image_fill({ nodeId, base64, scaleMode: "FILL" })

Batch compositions — use $prev.id to chain commands without extra round-trips:

json

{ "commands": [    { "command": "create_frame", "params": { "width": 400, "height": 300, "name": "Card" } },    { "command": "set_gradient_fill", "params": { "nodeId": "$prev.id", "type": "LINEAR",        "stops": [{"color":{"r":0.1,"g":0.1,"b":0.9},"position":0},                  {"color":{"r":0.8,"g":0.2,"b":0.5},"position":1}] } },    { "command": "create_text", "params": { "parentId": "$results.0.id",        "text": "Hello", "fontSize": 32, "x": 24, "y": 24 } }]}

{ "commands": [    { "command": "create_frame", "params": { "width": 400, "height": 300, "name": "Card" } },    { "command": "set_gradient_fill", "params": { "nodeId": "$prev.id", "type": "LINEAR",        "stops": [{"color":{"r":0.1,"g":0.1,"b":0.9},"position":0},                  {"color":{"r":0.8,"g":0.2,"b":0.5},"position":1}] } },    { "command": "create_text", "params": { "parentId": "$results.0.id",        "text": "Hello", "fontSize": 32, "x": 24, "y": 24 } }]}

Known SVG limits: figma.createNodeFromSvg() strips <defs>, gradients, filters, masks, and animations. Use set_gradient_fill for gradients instead of SVG <linearGradient>.

Reconnection: If the plugin disconnects, it auto-reconnects with exponential backoff (1s→30s max) and replays queued commands (up to 30s old). No manual intervention needed for short interruptions.

Setup

1 — Install the plugin

Clone this repo or download the source
In Figma desktop: Plugins → Development → Import plugin from manifest
Select src/figma-plugin/manifest.json

2 — Install the MCP server

3 — Start the socket relay

Listens on ws://localhost:3055. Auto-start on login (macOS):

4 — Configure the MCP server

bash

# Auto-detect Claude Code / Cursor and write config:./scripts/setup.sh
# Local build:./scripts/setup.sh --local
# Install git pre-commit sandbox lint hook:./scripts/setup.sh --hooks

# Auto-detect Claude Code / Cursor and write config:./scripts/setup.sh
# Local build:./scripts/setup.sh --local
# Install git pre-commit sandbox lint hook:./scripts/setup.sh --hooks

Manual config (~/.claude/settings.json or ~/.cursor/mcp.json):

json

{  "mcpServers": {    "FigmaVectorMCP": {      "command": "bunx",      "args": ["figma-vector-mcp@latest"],      "env": { "FVMCP_CHANNEL": "figma-vector-mcp" }    }  }}

{  "mcpServers": {    "FigmaVectorMCP": {      "command": "bunx",      "args": ["figma-vector-mcp@latest"],      "env": { "FVMCP_CHANNEL": "figma-vector-mcp" }    }  }}

5 — Connect the plugin

Open your Figma file
Plugins → Development → Figma Vector MCP
Enter server URL (ws://localhost:3055) → Connect
Enter channel name (figma-vector-mcp) → Join

The plugin saves your last URL and channel — pre-filled on next open. Keep the plugin panel open during your session — closing it terminates the WebSocket connection.

6 — Verify

Environment Variables

Per-tool timeout overrides: health_check → 3s, export_node_as_png → 30s, export_node_as_svg → 15s, create_batch → 60s.

Tool Reference

Connection & Health

Vector Creation

Tool	Description	Key Params
`create_vector_from_svg`	Place editable vector from SVG string	`svg`, `x`, `y`, `name`, `parentId`
`create_path`	Vector from SVG `d` path string	`d`, `x`, `y`, `fillColor`, `strokeColor`, `strokeWeight`
`create_polyline`	Vector from `[x,y][]` point pairs	`points`, `closed`, `strokeColor`, `strokeWeight`

Primitives

Tool	Description	Key Params
`create_frame`	Container frame	`width`, `height`, `x`, `y`, `fillColor`
`create_rectangle`	Rectangle	`width`, `height`, `x`, `y`, `fillColor`
`create_ellipse`	Ellipse / circle	`width`, `height`, `x`, `y`, `fillColor`
`create_text`	Text node with optional fixed-width column	`text`, `fontSize`, `fontFamily`, `fontStyle`, `fillColor`, `width`, `height`, `textAutoResize`

Fills & Colour

Tool	Description	Key Params
`set_fill_color`	Solid RGBA fill (0–1)	`nodeId`, `r`, `g`, `b`, `a`
`set_gradient_fill`	Gradient fill — LINEAR, RADIAL, ANGULAR, DIAMOND	`nodeId`, `type`, `stops`, `angle`, `center`, `gradientTransform`
`set_image_fill`	Base64 image as fill	`nodeId`, `base64`, `scaleMode`, `opacity`

Stroke

Effects & Compositing

Tool	Description	Key Params
`set_effect`	Drop shadow, inner shadow, blur, background blur	`nodeId`, `effects[]` (type, color, offset, blur, spread), `mode` (REPLACE \| APPEND)
`set_blend_mode`	Layer blend mode	`nodeId`, `mode` (NORMAL, MULTIPLY, SCREEN, OVERLAY…)

Node Manipulation

Tool	Description	Key Params
`set_corner_radius`	Corner radius — uniform or per-corner	`nodeId`, `radius` or `topLeft`, `topRight`, `bottomLeft`, `bottomRight`
`set_opacity`	Opacity 0–1	`nodeId`, `opacity`
`set_text_style`	Modify text properties + text box size	`nodeId`, `fontSize`, `fontFamily`, `fontStyle`, `letterSpacing`, `lineHeight`, `textAlign`, `fillColor`, `width`, `height`, `textAutoResize`
`rename_node`	Rename a node	`nodeId`, `name`
`set_visibility`	Show or hide a node	`nodeId`, `visible`
`reorder_node`	Change Z-order within parent	`nodeId`, `action` (BRING_TO_FRONT / SEND_TO_BACK / BRING_FORWARD / SEND_BACKWARD) or `index`
`move_node`	Reposition	`nodeId`, `x`, `y`
`resize_node`	Resize	`nodeId`, `width`, `height`
`delete_node`	Remove from canvas	`nodeId`
`clone_node`	Duplicate, optionally reposition	`nodeId`, `x`, `y`, `parentId`
`group_nodes`	Group nodes	`nodeIds[]`, `name`, `parentId`
`ungroup_nodes`	Ungroup	`nodeId`
`boolean_operation`	Union, subtract, intersect, exclude	`nodeIds[]`, `operation`, `name`
`create_mask`	Clip mask — maskNode clips targetNode	`maskNodeId`, `targetNodeId`, `name`

Layout

Tool	Description	Key Params
`set_auto_layout`	Enable / configure auto-layout	`nodeId`, `direction`, `spacing`, `padding`, `primaryAxisAlign`, `counterAxisAlign`, `primaryAxisSizingMode`, `counterAxisSizingMode`, `wrap`
`set_layout_grid`	Column / row / grid guides on a frame	`nodeId`, `grids[]` (pattern, count, gutterSize, sectionSize, alignment, color)
`batch_set_properties`	Bulk update fill/stroke/opacity/position/size	`operations[]` (nodeId + any subset of properties)

Components

Tool	Description	Key Params
`create_component`	Convert frame/group to component	`nodeId`, `name`
`create_instance`	Place component instance	`componentId`, `x`, `y`, `parentId`
`get_components`	List all local components	—
`get_library_components`	Search local components by name	`query`

Document & Pages

Tool	Description	Key Params
`get_document_info`	Document name, pages, current page children	—
`get_selection`	Currently selected nodes	—
`get_node_info`	Full node detail: fills, strokes, layout, text, constraints	`nodeId`
`set_focus`	Scroll viewport to node and select it	`nodeId`
`find_nodes`	Search by name and/or type	`query`, `type`, `pageId`, `recursive`
`get_page_list`	All pages	—
`switch_page`	Activate a page	`pageId` or `pageName`
`create_page`	Create a new page	`name`
`duplicate_frame_to_page`	Copy node to another page	`nodeId`, `targetPageId`, `x`, `y`

Node Registry

Color Registry

Tool	Description	Key Params
`register_color`	Save a named color to the document palette (0–1)	`alias`, `r`, `g`, `b`, `a`
`resolve_color`	Look up a color by alias	`alias`
`list_colors`	List all registered colors in the document	—

Styles & Fonts

Export

Batch

Sandbox Compatibility

The plugin main thread (code.js) runs in Figma's restricted QuickJS sandbox. The UI (ui.html) is a normal browser context and is not affected.

Run bun run lint:plugin to check code.src.js for violations before building. A pre-commit hook can be installed via ./scripts/install-hooks.sh.

Banned in `code.js`

API / Syntax	Safe replacement
`import` / `export`	Inline all deps
`x ?? y`	`(x != null) ? x : y`
`obj?.prop`	`obj && obj.prop`
`{ ...obj }` / `[ ...arr ]`	`Object.assign({}, obj)` / `Array.from(arr)`
`localStorage`	`figma.clientStorage`
`TextDecoder`	Chunked `String.fromCharCode`
`fetch()`	Not available in main thread
`figma.getNodeById()` (sync)	`await figma.getNodeByIdAsync()`
`figma.currentPage = x` (sync assign)	`await figma.setCurrentPageAsync(x)`
`figma.getLocalPaintStyles()` (sync)	`await figma.getLocalPaintStylesAsync()`
`figma.getLocalTextStyles()` (sync)	`await figma.getLocalTextStylesAsync()`
`figma.root.findAllWithCriteria()` without page load	`await figma.loadAllPagesAsync()` first

SVG compatibility (`create_vector_from_svg`)

Feature	Status
`<rect>`, `<polygon>`, `<polyline>`, `<path>`, `<circle>`, `<ellipse>`	✅
`fill`, `stroke`, `stroke-width`, `stroke-linecap`, `stroke-linejoin`	✅
`viewBox`, `width`, `height`	✅
`<linearGradient>` / `<radialGradient>` in `<defs>`	❌ Stripped — use `set_gradient_fill`
`<filter>`, `<mask>`, `<pattern>`	❌ Stripped
`<animate>`, `<animateTransform>`	❌ Stripped
`<script>`, `<foreignObject>`	❌ Stripped
`fill="url(#...)"` references	❌ Replaced with `fill="none"`

Development

bash

bun install              # install depsbun run socket           # start relay on :3055bun run build            # build MCP server → dist/server.jsbun run build:plugin     # build plugin: code.src.js → code.jsbun run lint:plugin      # check code.src.js for sandbox violations./scripts/install-hooks.sh  # install pre-commit lint hook

bun install              # install depsbun run socket           # start relay on :3055bun run build            # build MCP server → dist/server.jsbun run build:plugin     # build plugin: code.src.js → code.jsbun run lint:plugin      # check code.src.js for sandbox violations./scripts/install-hooks.sh  # install pre-commit lint hook

Plugin workflow

Edit src/figma-plugin/code.src.js
bun run lint:plugin — catch sandbox violations before building
bun run build:plugin — esbuild outputs code.js (ES2017)
Close and reopen the plugin panel in Figma to load the new code.js

Credits

Socket relay (src/socket.ts) adapted from cursor-talk-to-figma-mcp — Copyright (c) 2025 sonnylazuardi, MIT License
setCharacters helpers in code.src.js adapted from the same project — Copyright (c) 2025 sonnylazuardi, MIT License

License

MIT © Working Model — see LICENSE and THIRD_PARTY_NOTICES.md.

Developed by Working Model Inc

來源：README.md，提交 ec9dccc

工具

join_channel

Join a named channel on the Figma Vector MCP socket relay. Must be called before any drawing commands if the channel was not set via env/arg.

輸入參數channel必填

health_check

Ping the Figma plugin and confirm connectivity. Returns plugin version and current page.

無需輸入參數。

create_vector_from_svg

Place a fully editable vector node on the Figma canvas from an SVG string. Supports any valid SVG including paths, polylines, polygons, circles, and groups. The created node is fully editable in Figma.

輸入參數xysvg必填nameparentId

create_path

Create an editable vector from a single SVG path `d` attribute string. Shorthand for simple paths without a full SVG wrapper.

輸入參數d必填xynameparentIdfillColorstrokeColorstrokeWeight

create_polyline

Create an editable vector from an array of [x, y] point pairs. Use closed=true to produce a filled polygon.

輸入參數xynameclosedpoints必填parentIdstrokeColorstrokeWeight

create_frame

Create a Figma frame (container) on the canvas.

輸入參數xynamewidth必填height必填parentIdfillColor

create_rectangle

Create a rectangle on the Figma canvas.

輸入參數xynamewidth必填height必填parentIdfillColor

create_ellipse

Create an ellipse (or circle) on the Figma canvas.

輸入參數xynamewidth必填height必填parentIdfillColor

create_text

Create a text node on the Figma canvas. Use width to fix the column width and enable text wrapping.

輸入參數xynametext必填widthheightfontSizeparentIdfillColorfontStylefontFamilytextAutoResize

set_gradient_fill

Apply a gradient fill to a Figma node. Supports LINEAR, RADIAL, ANGULAR (conic), and DIAMOND types. Replaces any existing fills. Stops must be sorted by position (0 → 1).

輸入參數typeanglestops必填centernodeId必填gradientTransform

set_auto_layout

Enable auto-layout on a frame and configure direction, spacing, padding, and alignment. Set direction to NONE to disable auto-layout.

輸入參數wrapnodeId必填paddingspacingdirectioncounterAxisAlignprimaryAxisAligncounterAxisSizingModeprimaryAxisSizingMode

create_component

Convert an existing frame or group into a reusable Figma component.

輸入參數namenodeId必填

create_instance

Place an instance of a local component on the canvas by component ID.

輸入參數xynameparentIdcomponentId必填

set_fill_color

Set the fill color of a Figma node.

輸入參數ab必填g必填r必填nodeId必填

set_stroke_color

Set the stroke color (and optional weight) of a Figma node.

輸入參數ab必填g必填r必填nodeId必填weight

set_stroke

Set comprehensive stroke properties on a node: color, weight, position, dash pattern, line cap, and line join.

輸入參數colornodeId必填weightlineCaplineJoinpositiondashPattern

set_text_style

Modify typographic properties of an existing text node without replacing its content. Also use to set or update text box width and wrapping.

輸入參數widthheightnodeId必填fontSizefillColorfontStyletextAlignfontFamilylineHeightletterSpacingtextAutoResize

set_corner_radius

Set corner radius of a rectangle or frame. Use radius for uniform corners or topLeft/topRight/bottomLeft/bottomRight for individual corners (e.g. pill, tab, card shapes).

輸入參數nodeId必填radiustopLefttopRightbottomLeftbottomRight

set_opacity

Set the opacity of a Figma node (0 = invisible, 1 = fully opaque).

輸入參數nodeId必填opacity必填

move_node

Move a Figma node to a new position on the canvas.

輸入參數x必填y必填nodeId必填

resize_node

Resize a Figma node to the given width and height.

輸入參數width必填height必填nodeId必填

delete_node

Delete a node from the Figma canvas.

輸入參數nodeId必填

clone_node

Duplicate a Figma node, optionally repositioning the clone.

輸入參數xynodeId必填parentId

rename_node

Rename a Figma node.

輸入參數name必填nodeId必填

set_visibility

Show or hide a Figma node.

輸入參數nodeId必填visible必填

reorder_node

Change a node's Z-order within its parent. Use action for relative moves or index for an absolute position (0 = bottom of stack).

輸入參數indexactionnodeId必填

group_nodes

Group multiple Figma nodes into a group layer.

輸入參數namenodeIds必填parentId

ungroup_nodes

Ungroup a group node, returning its children to the parent.

輸入參數nodeId必填

create_batch

Execute multiple commands in a single round-trip. Commands run sequentially. Each result includes success/error status. Use this for complex compositions (e.g. place an SVG, add a label, group them) to avoid multiple round-trips.

輸入參數commands必填

get_document_info

Get information about the current Figma document: name, current page, all pages, and top-level nodes.

無需輸入參數。

get_selection

Get the currently selected nodes in Figma, including position and size.

無需輸入參數。

get_node_info

Get detailed information about a specific node by ID: type, position, size, opacity, children.

輸入參數nodeId必填

set_focus

Scroll the Figma viewport to focus on a node and select it.

輸入參數nodeId必填

get_page_list

List all pages in the current Figma document.

無需輸入參數。

switch_page

Switch to a different page in the Figma document by ID or name.

輸入參數pageIdpageName

get_styles

Get all local paint styles and text styles defined in the Figma document. Use these IDs with apply_style to keep output on-brand.

無需輸入參數。

apply_style

Apply a named document style (paint or text) to a node by style ID.

輸入參數nodeId必填styleId必填styleType

get_available_fonts

List all fonts available in this Figma environment (system fonts + Figma font agent). Use before create_text to verify a font is loadable. Optionally filter by family name substring.

輸入參數query

get_components

List all local components in the Figma document.

無需輸入參數。

export_node_as_svg

Export a Figma node as an SVG string. Useful for round-tripping: create a vector, modify it in Figma, export back.

輸入參數nodeId必填

export_node_as_png

Export a Figma node as a base64-encoded PNG at the specified pixel scale.

輸入參數scalenodeId必填

find_nodes

Search for nodes by name (case-insensitive contains) and/or type. Scoped to a page (defaults to current page). Recursive by default.

輸入參數typequerypageIdrecursive

create_page

Create a new page in the Figma document.

輸入參數name必填

duplicate_frame_to_page

Copy a node to a target page at an optional position.

輸入參數xynodeId必填targetPageId必填

batch_set_properties

Update fill color, stroke color, opacity, position, and/or size on multiple nodes in a single round-trip.

輸入參數operations必填

set_effect

Apply effects (drop shadow, inner shadow, layer blur, background blur) to a node. Use mode REPLACE (default) to overwrite all effects, or APPEND to add to existing ones.

輸入參數modenodeId必填effects必填

set_blend_mode

Set the blend mode of a node layer.

輸入參數mode必填nodeId必填

set_image_fill

Set a node's fill to a base64-encoded image. Use with image generation APIs (Replicate, fal.ai) to place rendered imagery directly on canvas.

輸入參數base64必填nodeId必填opacitymimeTypescaleMode

boolean_operation

Perform a boolean operation (union, subtract, intersect, exclude) on 2 or more vector nodes.

輸入參數namenodeIds必填operation必填

set_layout_grid

Apply column, row, or uniform grid guides to a frame.

輸入參數grids必填nodeId必填

register_node

Save a named alias for a node ID, persisted in the Figma document. Use resolve_node to retrieve it later.

輸入參數alias必填nodeId必填

resolve_node

Look up a node ID by its registered alias. Returns the node ID previously saved with register_node.

輸入參數alias必填

register_color

Save a named color alias to the document palette. All RGB values are 0–1. Use resolve_color or list_colors to retrieve.

輸入參數ab必填g必填r必填alias必填

resolve_color

Look up a color by its registered alias. Returns r, g, b, a values (0–1).

輸入參數alias必填

list_colors

List all color aliases registered in this document's palette.

無需輸入參數。

screenshot_current_page

Export the current Figma page as a base64-encoded PNG. Useful for visual verification of the canvas state.

輸入參數scale

get_library_components

List components available for use. Returns local document components. Filter by name with optional query.

輸入參數query

create_mask

Apply a clip mask — maskNode defines the shape, targetNode is clipped to it. Both nodes are grouped.

輸入參數namemaskNodeId必填targetNodeId必填

版本歷史

v0.3.3最新Oct 22, 2026

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

近 30 天內可連通25 分
已宣告認證方式10 分
請在註冊中心條目中宣告憑證請求標頭，或保持端點能夠回應探測，以便判定其認證方式。
已列出工具必需15 分
描述必需15 分
圖示10 分
文件15 分
授權條款10 分

其他 Figma 整合

Figma MCP Server

com.figma.mcp官方發布者

Figma 官方遠端 MCP 伺服器，為 AI 程式助理提供 Figma 設計脈絡，用來產生與更新程式碼。

Streamable HTTP可網頁執行驗證方式

開發者工具需要憑證Oct 24, 2026

Figma CodeKit MCP

由 GitHub 帳號 Mehmoodqureshi 發布

把 Figma 畫框轉換成 HTML、React 或 Next.js 程式碼，並將渲染結果與設計稿做像素比對，反覆迭代直到收斂。

STDIO僅桌面

開發者工具3 個工具Nov 7, 2026

figma-mcp

由 GitHub 帳號 Mehmoodqureshi 發布

把 Figma 畫框確定性地轉成 HTML、React 或 Next.js 程式碼，在 Chromium 中算繪並與設計稿做像素比對，直到一致。

STDIO僅桌面

開發者工具尚未驗證Oct 24, 2026

figma-vault

由 GitHub 帳號 NBhey 發布

本機 MCP 伺服器，讓助理讀取一次性拉取到本機儲存庫的 Figma 設計，可離線使用，不需 Figma 權杖，也不受速率限制。

STDIO僅桌面

知識與記憶尚未驗證Oct 25, 2026

Figma MCP

io.scalably

在本機執行的 Figma REST API MCP 伺服器，讓助理列出檔案中的頂層畫框，並下載某個畫框的 PNG、節點 JSON 與圖片填色對應表。

STDIO僅桌面

檔案與儲存尚未驗證Oct 24, 2026

Variable	Default	Description
`FVMCP_PORT`	`3055`	Socket relay port
`FVMCP_CHANNEL`	`figma-vector-mcp`	Channel name — must match the plugin
`FVMCP_TIMEOUT_MS`	`10000`	Default command timeout (ms)

Tool	Description	Key Params
`set_stroke`	Full stroke control	`nodeId`, `color`, `weight`, `position`, `dashPattern`, `lineCap`, `lineJoin`
`set_stroke_color`	Quick stroke colour + weight	`nodeId`, `r`, `g`, `b`, `a`, `weight`

Tool	Description	Key Params
`register_node`	Save named alias for a node ID (persists in document)	`alias`, `nodeId`
`resolve_node`	Look up node ID by alias	`alias`

Tool	Description	Key Params
`get_styles`	All local paint and text styles	—
`apply_style`	Apply document style to node	`nodeId`, `styleId`, `styleType`
`get_available_fonts`	List loadable fonts; filter by name	`query`

Figma Vector MCP

概覽

安裝

在 SourceWeft 中

其他 MCP 客戶端

README

Figma Vector MCP

Why This Exists

Architecture

AI Agent Quickstart

Setup

1 — Install the plugin

2 — Install the MCP server

3 — Start the socket relay

4 — Configure the MCP server

5 — Connect the plugin

6 — Verify

Environment Variables

Tool Reference

Connection & Health

Vector Creation

Primitives

Fills & Colour

Stroke

Effects & Compositing

Node Manipulation

Layout

Components

Document & Pages

Node Registry

Color Registry

Styles & Fonts

Export

Batch

Sandbox Compatibility

Banned in code.js

SVG compatibility (create_vector_from_svg)

Development

Plugin workflow

Credits

License

工具

join_channel

health_check

create_vector_from_svg

create_path

create_polyline

create_frame

create_rectangle

create_ellipse

create_text

set_gradient_fill

set_auto_layout

create_component

create_instance

set_fill_color

set_stroke_color

set_stroke

set_text_style

set_corner_radius

set_opacity

move_node

resize_node

delete_node

clone_node

rename_node

set_visibility

reorder_node

group_nodes

ungroup_nodes

create_batch

get_document_info

get_selection

get_node_info

set_focus

get_page_list

switch_page

get_styles

apply_style

get_available_fonts

Banned in `code.js`

SVG compatibility (`create_vector_from_svg`)