figma-code-agent-mcp

AI agents design in Figma through code execution. Works with Claude Code, Cursor, Codex, Gemini, and any MCP-compatible client.

Instead of dozens of individual tools (which bloat the context window), this MCP server exposes 4 focused tools and a 26-method JavaScript sandbox — the AI writes code, Figma executes it.

| Tool | Description | |------|-------------| | execute | Run JavaScript with 26 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"

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
Check accessibility of the current page
Export the hero section as PNG
Generate React code from this design

Example: what the AI generates

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 / getSelection / getCurrentPage / getStyles / getLocalComponents
figma.getVariables / searchNodes / captureScreenshot

// Update
figma.updateNode / moveNode / swapComponent

// Delete
figma.deleteNode

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

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

Use search_tools to discover full parameter details for any method.

Architecture

AI Client  ←— stdio —→  MCP Server  ←— WebSocket —→  Figma Plugin
(Claude,                 (Node.js)      port 3001
 Cursor…)               VM Sandbox
                         26 figma.* methods

Troubleshooting

• Plugin not connecting? Make sure the MCP server is running and port 3001 is free
• Timeout errors? The sandbox has a 60s limit — break large operations into batches
• 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