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: 39 write-side tools so an LLM can actually build and edit your designs.

No API key required. Your agent (Claude Code, Cursor, …) is the LLM — it drives the canvas through these tools. You don't configure or pay for any model key inside the plugin.

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 39 tools focused on the write side:

• Tree creation — build complete subtrees with JSX-like markup (jsx), vector primitives (create_vector), incremental JSX edits (read_jsx, edit_jsx)
• Property edits — text, fills, strokes, layout, all auto-layout aware (set_text, set_fill, set_layout, set_stroke, edit, replace_props)
• Structure — delete_node, move_node, clone_node
• Variables / tokens — collections, modes, bindings (create_variable, bind_variable, set_variable_mode, etc.)
• Components — create, combine, props, instances (create_component, add_component_prop, create_instance, expose_nested_instances)
• Pages — create_page, delete_page, switch_page (cross-page nav is officially a painful gap)
• Declarative edits — preview then apply a diff (reconcile_preview, reconcile_apply)
• Search & inspect — find_nodes, inspect, discover_props, get_selection
• Visual verification — get_screenshot returns PNG as MCP image content for vision-capable models

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.

Do I need an AI API key? No. The external agent you connect (Claude Code, Cursor, etc.) is the LLM — it does all the reasoning and calls these tools. The plugin just executes them against figma.*. You never enter a Gemini/Anthropic/OpenAI key into the plugin for this path. (The Genable plugin also has a built-in agent you can use with your own model key — that's a separate, optional mode.)

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 39-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 of all 39 tools.

Tree creation / JSX

• jsx — Build a complete subtree with JSX-like markup. Single-call atomicity.
• create_vector — Create vector primitives from SVG path data.
• read_jsx — Read a subtree back as JSX markup.
• edit_jsx — Apply a string edit to a subtree's JSX.

Read & inspect

• inspect — Read a node with selectable property facets (layout, paint, typography, etc.).
• find_nodes — Search by name/type within the current page.
• discover_props — Unique property values across a subtree.
• get_selection — The 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 node(s) to a component / variant set.
• add_component_prop, edit_component_prop, delete_component_prop, list_component_props — Variant / boolean / instance-swap props.
• create_instance — Instantiate a component.
• expose_nested_instances — Surface nested instance swaps on a component.

Variables / tokens

• list_variables — Inventory of collections + variables in the file.
• create_collection, delete_collection — Token collections.
• create_variable, delete_variable, set_variable_value, set_variable_mode — Variable lifecycle.
• bind_variable — Bind a variable to a node property.

Pages

• create_page, delete_page — Page lifecycle.
• switch_page — Switch active page by ID or name. Returns the full page roster.

Declarative reconcile

• reconcile_preview — Diff a declarative spec against the current tree (dry run).
• reconcile_apply — Apply that diff.

Visual verification

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

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,…
• No in-plugin write without the plugin runtime — Figma's REST API can't write to the canvas; all edits go through the plugin, so it must be open in Figma desktop (localhost only).
• Sandbox quirks — Some Figma plugin-API edges are sharp (font loading, frozen fills arrays, stale node IDs after reload). The high-level tools wrap most of these.

License

MIT.

Repo

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