Figma Vector MCP

io.github.workingmodelPublished by GitHub account workingmodelv0.3.3Updated Oct 30, 2026

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

The publisher's own server: Figma MCP Server

VerifiedSTDIODesktop onlyDeveloper Tools Media & Design

Server details

Identifier: io.github.workingmodel/figma-vector-mcp
Transport: STDIO
Runtime: Desktop only
Trust: Verified
Published: Oct 22, 2026

Security note

MCP servers receive tool arguments from a conversation and may perform external actions. Review what a server can do before you enable it, and give it only the access it needs.

The registry verified the GitHub account workingmodel for this listing. That does not show the account is the product's maker.

SourceWeft's checks cover whether the listing is complete and the endpoint answered; they do not review the server's code or what its tools do.

Add a badge to your README

Show readers this MCP server is listed on SourceWeft. The badge links to this page.

[![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)

Overview

AI-generated overview

Local MCP server plus Figma plugin that lets an assistant create and edit fully editable vector nodes, shapes, text and components on the Figma canvas.

What you can do: Create vectors and shapes: SVG strings, path data, polylines, frames, rectangles, ellipses and text
Style nodes: solid, gradient and image fills, strokes, effects, blend modes, corner radius, opacity and text styles
Arrange the canvas: move, resize, clone, rename, hide, reorder, group, ungroup, boolean operations and masks
Build layout and components: auto-layout, layout grids, components, instances, document styles and fonts
Inspect and navigate: document info, selection, node details, node search, pages and viewport focus
Export and batch: SVG or PNG export, page screenshots, and multi-command batches in one round-trip
When to use it: Useful when you want an assistant to draw or modify real Figma designs rather than just read them — generating vector artwork, building UI frames and components, or round-tripping SVG in and out of a Figma file.
Requirements: Runs locally over stdio via npm (figma-vector-mcp, or bunx/npx). Needs the Figma desktop app with the companion plugin imported and its panel kept open, plus a local socket relay listening on ws://localhost:3055. Optional FVMCP_CHANNEL, FVMCP_PORT and FVMCP_TIMEOUT_MS must match the plugin settings.

Before you install

The assistant writes directly to the open Figma document: it can create, restyle, move, group and delete nodes, so work on a copy or version you can restore. The plugin panel must stay open and the relay port is reachable by any local process. SVG gradients, filters, masks and scripts are stripped on import.

Installation

In SourceWeft

Open Figma Vector MCP in the dashboard and add it to a workspace.
Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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

Source: README.md at commit ec9dccc

Tools

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.

Parameterschannelrequired

health_check

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

Takes no parameters.

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.

ParametersxysvgrequirednameparentId

create_path

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

ParametersdrequiredxynameparentIdfillColorstrokeColorstrokeWeight

create_polyline

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

ParametersxynameclosedpointsrequiredparentIdstrokeColorstrokeWeight

create_frame

Create a Figma frame (container) on the canvas.

ParametersxynamewidthrequiredheightrequiredparentIdfillColor

create_rectangle

Create a rectangle on the Figma canvas.

ParametersxynamewidthrequiredheightrequiredparentIdfillColor

create_ellipse

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

ParametersxynamewidthrequiredheightrequiredparentIdfillColor

create_text

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

ParametersxynametextrequiredwidthheightfontSizeparentIdfillColorfontStylefontFamilytextAutoResize

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

ParameterstypeanglestopsrequiredcenternodeIdrequiredgradientTransform

set_auto_layout

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

ParameterswrapnodeIdrequiredpaddingspacingdirectioncounterAxisAlignprimaryAxisAligncounterAxisSizingModeprimaryAxisSizingMode

create_component

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

ParametersnamenodeIdrequired

create_instance

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

ParametersxynameparentIdcomponentIdrequired

set_fill_color

Set the fill color of a Figma node.

ParametersabrequiredgrequiredrrequirednodeIdrequired

set_stroke_color

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

ParametersabrequiredgrequiredrrequirednodeIdrequiredweight

set_stroke

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

ParameterscolornodeIdrequiredweightlineCaplineJoinpositiondashPattern

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.

ParameterswidthheightnodeIdrequiredfontSizefillColorfontStyletextAlignfontFamilylineHeightletterSpacingtextAutoResize

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

ParametersnodeIdrequiredradiustopLefttopRightbottomLeftbottomRight

set_opacity

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

ParametersnodeIdrequiredopacityrequired

move_node

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

ParametersxrequiredyrequirednodeIdrequired

resize_node

Resize a Figma node to the given width and height.

ParameterswidthrequiredheightrequirednodeIdrequired

delete_node

Delete a node from the Figma canvas.

ParametersnodeIdrequired

clone_node

Duplicate a Figma node, optionally repositioning the clone.

ParametersxynodeIdrequiredparentId

rename_node

Rename a Figma node.

ParametersnamerequirednodeIdrequired

set_visibility

Show or hide a Figma node.

ParametersnodeIdrequiredvisiblerequired

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

ParametersindexactionnodeIdrequired

group_nodes

Group multiple Figma nodes into a group layer.

ParametersnamenodeIdsrequiredparentId

ungroup_nodes

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

ParametersnodeIdrequired

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.

Parameterscommandsrequired

get_document_info

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

Takes no parameters.

get_selection

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

Takes no parameters.

get_node_info

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

ParametersnodeIdrequired

set_focus

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

ParametersnodeIdrequired

get_page_list

List all pages in the current Figma document.

Takes no parameters.

switch_page

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

ParameterspageIdpageName

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.

Takes no parameters.

apply_style

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

ParametersnodeIdrequiredstyleIdrequiredstyleType

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.

Parametersquery

get_components

List all local components in the Figma document.

Takes no parameters.

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.

ParametersnodeIdrequired

export_node_as_png

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

ParametersscalenodeIdrequired

find_nodes

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

ParameterstypequerypageIdrecursive

create_page

Create a new page in the Figma document.

Parametersnamerequired

duplicate_frame_to_page

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

ParametersxynodeIdrequiredtargetPageIdrequired

batch_set_properties

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

Parametersoperationsrequired

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.

ParametersmodenodeIdrequiredeffectsrequired

set_blend_mode

Set the blend mode of a node layer.

ParametersmoderequirednodeIdrequired

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.

Parametersbase64requirednodeIdrequiredopacitymimeTypescaleMode

boolean_operation

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

ParametersnamenodeIdsrequiredoperationrequired

set_layout_grid

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

ParametersgridsrequirednodeIdrequired

register_node

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

ParametersaliasrequirednodeIdrequired

resolve_node

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

Parametersaliasrequired

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.

Parametersabrequiredgrequiredrrequiredaliasrequired

resolve_color

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

Parametersaliasrequired

list_colors

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

Takes no parameters.

screenshot_current_page

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

Parametersscale

get_library_components

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

Parametersquery

create_mask

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

ParametersnamemaskNodeIdrequiredtargetNodeIdrequired

Version history

v0.3.3LatestOct 22, 2026

Score

90% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

Reached in the last 30 days25 pts
Auth declared10 pts
Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.
Tools listedRequired15 pts
DescriptionRequired15 pts
Logo10 pts
Documentation15 pts
License10 pts

Other Figma integrations

Figma MCP Server

com.figma.mcpOfficial publisher

Figma's remote MCP server that gives AI coding agents design context from Figma files so they can generate and update code.

Streamable HTTPWeb executableAuth

Developer ToolsCredential requiredOct 24, 2026

Figma CodeKit MCP

Published by GitHub account Mehmoodqureshi

Converts a Figma frame into HTML, React or Next.js code and pixel-diffs the rendered result against the design until it converges.

STDIODesktop only

Developer Tools3 toolsNov 7, 2026

figma-mcp

Published by GitHub account Mehmoodqureshi

Converts a Figma frame into deterministic HTML, React or Next.js code, then renders it in Chromium and pixel-diffs it against the design until it matches.

STDIODesktop only

Developer ToolsNot validated yetOct 24, 2026

figma-vault

Published by GitHub account NBhey

A local MCP server that lets an assistant read Figma designs pulled once into a vault, offline and without a Figma token or rate limits.

STDIODesktop only

Knowledge & MemoryNot validated yetOct 25, 2026

Figma MCP

io.scalably

Local MCP server for the Figma REST API that lets an assistant list a file's top-level frames and download one frame's PNG, node JSON and image-fill map.

STDIODesktop only

Files & StorageNot validated yetOct 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

Overview

Installation

In SourceWeft

Other MCP clients

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

Tools

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