figma-code-agent-mcp

AI agents design in Figma through code execution. 4 MCP tools, 30+ sandbox methods, multi-agent hub. Works with Claude Code, Cursor, Codex, Gemini, and any MCP-compatible client.

What makes this different?

Most Figma MCPs are read-only or expose dozens of individual tools that bloat the AI's context window. This one gives the AI a JavaScript sandbox — it writes code, Figma executes it. One execute tool replaces 30+ individual tools, supports batch operations, loops, conditionals, and data filtering. A built-in hub lets multiple AI agents collaborate on the same file simultaneously.

| Tool | Description | |------|-------------| | execute | Run JavaScript with 30+ figma.* API methods | | search_tools | Discover available methods and parameters | | capture_screenshot | Export nodes as PNG, JPG, SVG, or PDF | | get_design_context | Generate React + Tailwind code from a design |

Setup

1. Add MCP Server to your AI client

Claude Code

claude mcp add figma -- npx figma-code-agent-mcp

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["figma-code-agent-mcp"]
    }
  }
}

Codex

codex mcp add npx figma-code-agent-mcp figma

Gemini CLI

Add to ~/.gemini/settings.json:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["figma-code-agent-mcp"]
    }
  }
}

2. Install Figma Plugin

1. Download figma-plugin.zip from Releases (or clone the repo and use figma-plugin/)
2. In Figma: Plugins > Development > Import plugin from manifest...
3. Select manifest.json from the plugin folder
4. Run the plugin — it should show "Connected"

The hub auto-discovers on ports 40001-40010. No configuration needed.

3. Verify

Ask your AI agent:

Check the Figma connection status

What it can do

Create a card with a profile picture, name, and bio
Redesign the selected button to match our design system
Find existing button components and use them
Check accessibility of the current page
Export the hero section as PNG
Generate React code from this design

Example: what the AI generates

// Reuse existing design system components
const matches = await figma.suggestComponent({ query: "button" });
if (matches.count > 0) {
  const btn = await figma.createInstance({ componentId: matches.results[0].id });
}

// Or build from scratch
await figma.create({
  type: 'card',
  name: 'Profile Card',
  children: [
    { type: 'rectangle', width: 64, height: 64, cornerRadius: 32, fill: '#E2E8F0' },
    { type: 'text', content: 'Jane Doe', fontSize: 18, fontWeight: 'Bold' },
    { type: 'text', content: 'Product Designer', fontSize: 14, fill: '#64748B' }
  ]
});

API at a glance

// Create
figma.create({ type, ... })          // Unified create with presets (card, button, nav, input, form)
figma.createFrame / createRectangle / createText / createInstance / cloneNode

// Read
figma.getNode / getChildren / getSelection / getCurrentPage / getStyles
figma.getLocalComponents / getVariables / searchNodes / captureScreenshot
figma.suggestComponent({ query })    // Find matching design system components

// Update
figma.updateNode / moveNode / swapComponent / replaceWithInstance

// Delete
figma.deleteNode

// Components & Tokens
figma.toComponent / createVariants / addComponentProperty / setInstanceOverride
figma.createToken / bindToken

// Accessibility
figma.checkAccessibility   // WCAG contrast & touch target checks

// Batch & FigJam
figma.batch([...])         // Multiple operations in one round-trip
figma.createSection / createSticky / createShape / createConnector

Use search_tools to discover full parameter details for any method.

Architecture

AI Client  <-- stdio -->  MCP Server  <-- WebSocket -->  Figma Plugin
(Claude,                  (Node.js)      hub (ports
 Cursor...)              VM Sandbox      40001-40010)
                          30+ figma.* methods

Multiple AI agents connect through the hub simultaneously — each gets its own session.

Troubleshooting

• Plugin not connecting? Make sure the MCP server is running; the hub scans ports 40001-40010
• Timeout errors? Commands auto-retry once; for large operations, use batches
• Large designs? Use maxNodes in get_design_context to limit response size
• Plugin doesn't appear? Import via Plugins > Development > Import plugin from manifest

Links

• GitHub — full source, issues, contributing
• Figma Plugin — download from releases

License

MIT