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`)