Figma Vector MCP

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](https://workingmodel.co)

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 → 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 connected

1. get_document_info → get page IDs, current page, top-level nodes
2. get_available_fonts → discover loadable fonts before create_text
3. 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 frameId

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

1. create_frame({ width: 512, height: 512 })
2. 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 set_gradient_fill for gradients instead of SVG .

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

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

2 — Install the MCP server

npm install -g figma-vector-mcp

or use without installing via npx / bunx (see MCP config below)

3 — Start the socket relay

bun run socket

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

./scripts/setup.sh --launchd

4 — Configure the MCP server

# 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):

{

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

5 — Connect the plugin

1. Open your Figma file
2. Plugins → Development → Figma Vector MCP
3. Enter server URL (ws://localhost:3055) → Connect
4. 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

health_check → { "status": "ok", "version": "0.3.3", "currentPage": { ... } }

---

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

Primitives

Fills & Colour

Stroke

Effects & Compositing

Node Manipulation

Layout

Components

Document & Pages

Node Registry

Color Registry

Styles & Fonts

Export

| export_node_as_png | Export as base64 PNG | nodeId, scale (default 2)