genable-mcp

genable-mcp

The write-side MCP server for Figma. Build, edit, restructure, and search Figma designs from Claude Code, Cursor, Cline, or any MCP-compatible client.

Figma's official MCP is read-only — perfect for code generation. genable-mcp is the complement: 42 write-side tools so an LLM can actually build and edit your designs.

What this is

Figma's official MCP is excellent for reading designs (get_design_context, code generation). But it's mostly read-only — there's no first-class way to write to the canvas, navigate across pages, or run plugin-API code from your MCP client.

genable-mcp fills that gap. It exposes 42 tools focused on the write side:

• Tree creation — build complete subtrees with JSX-like markup (jsx), vector primitives (create_vector)
• Property edits — text, fills, strokes, layout, all auto-layout aware (set_text, set_fill, set_layout, set_stroke, edit)
• Variables / tokens — collections, modes, bindings (create_variable, bind_variable, set_variable_mode, etc.)
• Components — create, combine, expose props, instance (create_component, add_component_prop, create_instance)
• Cross-page navigation — switch_page (officially the painful gap)
• Search & inspect — find_nodes, inspect, describe, find_references, discover_props
• Visual verification — get_screenshot returns PNG as MCP image content for vision-capable models
• Curated knowledge — design skill / style / guideline readers built into the plugin
• Agent ergonomics — session_note scratchpad, subtask delegation, ask_user interactive pause

We recommend pairing with Figma's official MCP. They cover read-for-codegen; we cover write-and-edit. The two MCPs together give an LLM full read+write access to a Figma file.

FAQ

Is this an alternative to Figma's official MCP? No — it's a complement. Use both. Official MCP for "read this design → give me code". genable-mcp for "build / edit / restructure this design".

What MCP clients does it work with? Any client that supports STDIO MCP servers: Claude Code, Claude Desktop, Cursor, Cline, Continue, Zed, and others.

Does it need a Figma plugin? Yes. The plugin runs inside Figma desktop and is the only way to actually call figma.* API. genable-mcp is the bridge between your MCP client (outside Figma) and the plugin (inside Figma).

How is this different from "Figma to code" plugins? Those plugins are one-shot exporters (Figma → React/Vue/HTML). genable-mcp is bidirectional and interactive — your AI agent can read, edit, verify visually, and iterate inside Figma.

Can it build a full design from a prompt? Yes. The jsx tool accepts JSX-like markup and creates an entire subtree atomically. Pair with bind_variable for token-driven designs.

Is it free? Yes. MIT license. The MCP server is free; the Genable plugin in Figma Community is free.

How it works

MCP client (Claude Code / Cursor / etc.)
    ↓ stdio JSON-RPC
genable-mcp (this package, Node.js)
    ↓ WebSocket :3458
Genable plugin (running inside Figma)
    ↓ Figma Plugin API
Figma file

The plugin runs in your Figma desktop app. genable-mcp is the bridge that lets external MCP clients call into it.

Requirements

You need both halves working together:

• The Genable Figma plugin from Figma Community — must be a recent build that whitelists ws://localhost:3458 in networkAccess.allowedDomains. Plugin versions older than v1.0.1 (the marketplace-version pre-May-2026) cannot reach this MCP server because Figma's CSP blocks the localhost connection. If your plugin was installed before May 2026, re-open it from Figma Community to get the update.
• This npm package (genable-mcp ≥ 0.2.0) configured in your MCP client. Older 0.1.x snapshots ship a slightly older tool list — bump to 0.2.0 to get the current 42-tool surface.

Setup

1. Install the Genable plugin in Figma

Search "Genable" in the Figma Community and install. Open it once in any file — it auto-connects to localhost:3458.

(One-time. Plugin keeps connecting silently after the first run.)

2. Add genable-mcp to your MCP client config

Claude Code

// .mcp.json (project) or ~/.claude.json (global)
{
  "mcpServers": {
    "genable": {
      "command": "npx",
      "args": ["-y", "genable-mcp"]
    }
  }
}

Cursor / Cline / other MCP clients

Same idea — configure a STDIO server with command: npx, args: ["-y", "genable-mcp"].

3. Verify

In your MCP client, ask: "List the pages in my Figma file." If the plugin is running, you'll see the page roster.

Pair with the official Figma MCP (recommended)

{
  "mcpServers": {
    "figma": { /* official, read */ },
    "genable": {
      "command": "npx",
      "args": ["-y", "genable-mcp"]
    }
  }
}

Rule of thumb:

• Figma official → "read this design and give me code" workflows
• Genable → "build / edit / restructure this design" workflows
• Both together → end-to-end "code ↔ Figma" round-trips

Configuration

Env var	Default	Purpose
MCP_WS_PORT	3458	Port the WebSocket relay listens on
RELAY_SECRET	(empty)	If set, plugin must send matching secret in identify handshake. Use when sharing a host between multiple users.

Tool reference

Each tool's full description (parameters, examples, sandbox limits) is exposed via ListTools in the MCP protocol — your client surfaces them automatically. Below is a one-line index.

Tree creation

• jsx — Build a complete subtree with JSX-like markup. Single-call atomicity.
• create_vector — Create vector primitives from SVG path data.

Read

• inspect — Read a node with selectable property facets (layout, paint, typography, etc.).
• describe — Lint-style summary of a subtree.
• find_nodes — Search by name/type within current page.
• discover_props — Unique property values across a subtree.
• find_references — Reverse lookup: who binds this variable?
• get_selection — User's current Figma selection.

Write — properties

• edit — Generic property updates on existing nodes.
• set_text, set_fill, set_stroke, set_layout — Single-intent setters (font load + fallback included).
• replace_props — Bulk find/replace of property values across a subtree.

Write — structure

• delete_node, move_node, clone_node — Tree mutations.

Components

• create_component, combine_components — Promote nodes to components.
• add_component_prop, list_component_props — Variant / boolean / instance-swap props.
• create_instance — Instantiate a component.

Variables / tokens

• list_variables — Inventory of collections + variables in the file.
• create_collection, ensure_collection — Token collections (idempotent ensure).
• create_variable, ensure_variable, set_variable_value, set_variable_mode — Variable lifecycle.
• bind_variable — Bind a variable to a node property.

Knowledge readers

• skill, style, guideline, help — Curated design knowledge baked into the plugin.

Page navigation

• switch_page — Switch active page by ID or name. Returns the full page roster.

Visual verification

• get_screenshot — Export a node as PNG, embedded as MCP image content.

Interaction

• ask_user — Pause and ask the user a question (interactive client only).
• subtask — Delegate a sub-prompt to a focused agent.
• session_note — Scratchpad for the agent to record findings across a session.

Plugin data

• read_plugin_data, write_plugin_data — Persist key/value metadata on nodes via Figma's plugin-data API.

Limitations

• Plugin must be open — Figma writes require the plugin runtime. The plugin reconnects silently across files; you only need to launch it once per Figma session.
• One file at a time per port — Multi-file workflows: spawn additional relay ports via MCP_WS_PORTS=3458,3459,…
• Sandbox quirks — Some Figma plugin-API edges are sharp (font loading, frozen fills arrays, stale node IDs after reload). High-level tools wrap most of these; the js escape hatch description lists the rest.

License

MIT.

Repo

Source + issues: github.com/muse40007/figma-ai-generator-dogfood (subdir tools/mcp-server).