Figma Vector MCP server
io.github.workingmodel/figma-vector-mcp·v0.3.3Let Claude create and edit fully editable vector nodes on the Figma canvas.
0 stars166 downloads/wk
Reviews
Write oneNobody has reviewed Figma Vector MCP yet.
If you have run it, two minutes of your experience saves the next person an afternoon.
Figma Vector MCP tools (58, 14 write)
write = sends, deletes, buys or postsRead from the package source without running it. The installed server may list more.
apply_styleApply a named document style (paint or text) to a node by style ID.
batch_set_propertieswrite actionUpdate fill color, stroke color, opacity, position, and/or size on multiple nodes in a single round-trip.
boolean_operationPerform a boolean operation (union, subtract, intersect, exclude) on 2 or more vector nodes.
clone_nodeDuplicate a Figma node, optionally repositioning the clone.
create_batchwrite actionExecute 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.
create_componentwrite actionConvert an existing frame or group into a reusable Figma component.
create_ellipsewrite actionCreate an ellipse (or circle) on the Figma canvas.
create_framewrite actionCreate a Figma frame (container) on the canvas.
create_instancewrite actionPlace an instance of a local component on the canvas by component ID.
create_maskwrite actionApply a clip mask \u2014 maskNode defines the shape, targetNode is clipped to it. Both nodes are grouped.
create_pagewrite actionCreate a new page in the Figma document.
create_pathwrite actionCreate an editable vector from a single SVG path `d` attribute string. Shorthand for simple paths without a full SVG wrapper.
create_polylinewrite actionCreate an editable vector from an array of [x, y] point pairs. Use closed=true to produce a filled polygon.
create_rectanglewrite actionCreate a rectangle on the Figma canvas.
create_textwrite actionCreate a text node on the Figma canvas. Use width to fix the column width and enable text wrapping.
create_vector_from_svgwrite actionPlace 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.
delete_nodewrite actionDelete a node from the Figma canvas.
duplicate_frame_to_pageCopy a node to a target page at an optional position.
export_node_as_pngExport a Figma node as a base64-encoded PNG at the specified pixel scale.
export_node_as_svgExport a Figma node as an SVG string. Useful for round-tripping: create a vector, modify it in Figma, export back.
find_nodesSearch for nodes by name (case-insensitive contains) and/or type. Scoped to a page (defaults to current page). Recursive by default.
get_available_fontsList 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.
get_componentsList all local components in the Figma document.
get_document_infoGet information about the current Figma document: name, current page, all pages, and top-level nodes.
get_library_componentsList components available for use. Returns local document components. Filter by name with optional query.
get_node_infoGet detailed information about a specific node by ID: type, position, size, opacity, children.
get_page_listList all pages in the current Figma document.
get_selectionGet the currently selected nodes in Figma, including position and size.
get_stylesGet all local paint styles and text styles defined in the Figma document. Use these IDs with apply_style to keep output on-brand.
group_nodesGroup multiple Figma nodes into a group layer.
health_checkPing the Figma plugin and confirm connectivity. Returns plugin version and current page.
join_channelJoin 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.
list_colorsList all color aliases registered in this document's palette.
move_nodeMove a Figma node to a new position on the canvas.
register_colorSave a named color alias to the document palette. All RGB values are 0\u20131. Use resolve_color or list_colors to retrieve.
register_nodeSave a named alias for a node ID, persisted in the Figma document. Use resolve_node to retrieve it later.
rename_nodeRename a Figma node.
reorder_nodeChange a node's Z-order within its parent. Use action for relative moves or index for an absolute position (0 = bottom of stack).
resize_nodeResize a Figma node to the given width and height.
resolve_colorLook up a color by its registered alias. Returns r, g, b, a values (0\u20131).
resolve_nodeLook up a node ID by its registered alias. Returns the node ID previously saved with register_node.
screenshot_current_pageExport the current Figma page as a base64-encoded PNG. Useful for visual verification of the canvas state.
set_auto_layoutEnable auto-layout on a frame and configure direction, spacing, padding, and alignment. Set direction to NONE to disable auto-layout.
set_blend_modeSet the blend mode of a node layer.
set_corner_radiusSet 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).
set_effectApply 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.
set_fill_colorSet the fill color of a Figma node.
set_focusScroll the Figma viewport to focus on a node and select it.
set_gradient_fillApply 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 \u2192 1).
set_image_fillSet a node's fill to a base64-encoded image. Use with image generation APIs (Replicate, fal.ai) to place rendered imagery directly on canvas.
set_layout_gridApply column, row, or uniform grid guides to a frame.
set_opacitySet the opacity of a Figma node (0 = invisible, 1 = fully opaque).
set_strokeSet comprehensive stroke properties on a node: color, weight, position, dash pattern, line cap, and line join.
set_stroke_colorSet the stroke color (and optional weight) of a Figma node.
set_text_styleModify typographic properties of an existing text node without replacing its content. Also use to set or update text box width and wrapping.
set_visibilityShow or hide a Figma node.
switch_pageSwitch to a different page in the Figma document by ID or name.
ungroup_nodesUngroup a group node, returning its children to the parent.
Public scan report
scanner v0.1.10 · 2026-10-25 · same rubric, same numbers if you re-run it
- Code scan6 source files scanned25/25
- –Live reliabilityno gateway calls yet and no remote to proben/a
- –Tool poisoningtools not inspected (local package is not executed); not countedn/a
- Auth qualitylocal package, no credentials required12/15
- Maintenancelast push 2 days ago15/15
- Maintainer identityregistry namespace matches repository owner; GitHub account older than a year8/10
How Figma Vector MCP compares
Against every graded AI and agents MCP server, from our own scans and uptime checks. Updated after each scan run.
- Safety score
- 92/100
- higher than 90% of 4,460 AI and agents servers
- Tools
- 58
- the typical AI and agents server has 6
- Tools that change things
- 24%
- typical: 0%. Fewer write tools means less an agent can break
- Downloads a week
- 166
- more than 72% of 1,538 AI and agents servers with a package
What its tools let an agent do: 24 read · 15 create · 17 change · 1 delete · 1 run or deploy
Install Figma Vector MCP in Claude Code, Cursor or VS Code
Runs npx -y figma-vector-mcp on your machine. Read the scan report first; the gateway never runs local packages.
claude mcp add figma-vector-mcp -- npx -y figma-vector-mcp
What the publisher says
From the Figma Vector MCP repository's README, as published. We do not edit it. Read it on GitHub
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
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:
Architecture
Claude (MCP client)
↕ stdio (MCP protocol)
server.ts (MCP server)
↕ WebSocket (ws://localhost:3055)
socket.ts (relay — channel-based routing)
↕ WebSocket
Figma plugin (ui.html ↔ code.js)
↕ postMessage
Figma Plugin API → canvasThe 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 connected
2. get_document_info → get page IDs, current page, top-level nodes
3. get_available_fonts → discover loadable fonts before create_text
4. get_styles → load brand colours/text styles if availableColor 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 frameId
2. 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 PNG
2. 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:
{ "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 , gradients, filters, masks, and animations. Use setgradientfill for gradients instead of SVG .
Shortened. The full README is on GitHub.
Nothing above is checked by us. What we check is on the safety report.
Figma Vector MCP: common questions
- Is Figma Vector MCP server safe?
- Yes, by our scan: it is graded A (92/100). Read the Figma Vector MCP safety report
- How do I install Figma Vector MCP?
- It runs on your machine. Copy the Claude Code, Cursor, VS Code or Claude Desktop config from the install section.
- Does Figma Vector MCP need an API key?
- No secret keys are declared. It reads 2 settings from the environment.
- Is Figma Vector MCP maintained?
- The last commit was 12 days ago (2026-10-22). The latest release is v0.3.3.
- What can I use instead of Figma Vector MCP?
- Servers from other publishers that do the same job: Openflowkit MCP server, Figma Context MCP server and Agent-Native Slides MCP server.
- How does Figma Vector MCP compare with other AI and agents MCP servers?
- safety score 92/100 (higher than 90% of 4,460 AI and agents servers); tools 58 (the typical AI and agents server has 6); tools that change things 24% (typical: 0%. Fewer write tools means less an agent can break). Full comparison.
Alternatives to Figma Vector MCP
Same job from other publishers: the closest match first, then the best rated.
- OpenflowkitArchitecture diagrams for your agent: draw on the live OpenFlowKit canvas or edit diagram files.not reviewedEstablishedA
- Figma ContextGive your coding agent access to your Figma data. Implement designs in any framework in one-shot.not reviewedWidely usedB
- Agent-Native SlidesAgent-Native Google Slides - generate and edit React presentationsnot reviewedEstablishedA
- CHAP CoordinatorAuditable records of human decisions over AI agent work. Approvals, edits, overrides, escalations.not reviewedEstablishedA
- MCP AutoMemGraph-vector memory for AI assistants using FalkorDB and Qdrantnot reviewedEstablishedC