MCP Figma Toolkit

An MCP server that lets AI agents design in Figma. Create shapes, text, components, styles, variables, and more.

How It Works

Your AI Assistant ←→ MCP Server ←→ Figma Plugin ←→ Figma Document

The MCP server communicates with a Figma plugin via WebSocket. Your AI client (Claude Code, VS Code, Cursor) connects to the MCP server and can then create and manipulate designs in Figma.

Quick Start

# 1. Install globally
npm install -g mcp-figma-toolkit

# 2. Find where the plugin was installed
npm root -g
# Note the path, e.g., /Users/you/.nvm/versions/node/v20/lib/node_modules

Then:

1. Open Figma → Plugins → Development → Import plugin from manifest
2. Navigate to <path-from-above>/mcp-figma-toolkit/plugin/manifest.json
3. Add the MCP server to your AI client config (see Configuration)

Installation

Prerequisites

• Node.js 18+
• Figma Desktop App
• An MCP-compatible AI client (Claude Code, VS Code with Copilot, Cursor)

Step 1: Install the Package

npm install -g mcp-figma-toolkit

Step 2: Import the Figma Plugin

The plugin files are bundled with the npm package. You need to import them into Figma once.

Find the plugin location:

macOS / Linux:

echo "$(npm root -g)/mcp-figma-toolkit/plugin"

Windows (PowerShell):

echo "$(npm root -g)\mcp-figma-toolkit\plugin"

Import into Figma:

1. Open Figma Desktop
2. Click the Figma menu (top-left) → Plugins → Development → Import plugin from manifest...
3. Navigate to the plugin folder from above
4. Select manifest.json and click Open

The plugin "MCP Figma Toolkit" should now appear under Plugins → Development.

Alternative: Clone from Source

git clone https://github.com/dmytro-zemliak/Figma-MCP-Write-Bridge.git
cd mcp-figma-toolkit
npm install
npm run build

Then import the plugin from the plugin/ folder.

Configuration

Add the MCP server to your AI client's configuration file.

Claude Code

Edit ~/.claude.json (macOS/Linux) or %USERPROFILE%\.claude.json (Windows):

{
  "mcpServers": {
    "figma": {
      "command": "mcp-figma-toolkit"
    }
  }
}

VS Code / Cursor

Create .vscode/mcp.json in your project:

{
  "mcpServers": {
    "figma": {
      "command": "mcp-figma-toolkit"
    }
  }
}

Using npx (No Global Install)

If you prefer not to install globally:

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

Usage

Starting a Design Session

1. Open Figma and create or open a document

2. Run the plugin: Plugins → Development → MCP Figma Toolkit

   The plugin window is hidden but establishes the connection.

3. Start your AI client (Claude Code, VS Code, etc.)

   The MCP server starts automatically when your AI client launches.

4. Design with AI! Ask your assistant to create designs:

   "Create a blue button with rounded corners and white text saying 'Get Started'"

   "Design a card component with an image, title, and description"

   "Set up a color system with primary, secondary, and neutral colors"

   "Create a mobile login screen with email and password fields"

Session Workflow

┌─────────────────────────────────────────────────────────┐
│  1. Open Figma document                                 │
│  2. Run plugin (Plugins → Development → MCP Figma...)   │
│  3. Use your AI client to design                        │
│  4. Plugin stays connected until you close Figma        │
└─────────────────────────────────────────────────────────┘

Note: You need to run the Figma plugin each time you open a new Figma document.

Features

Creation

• Frames, rectangles, ellipses, lines, polygons, stars
• Text with custom fonts and styling
• Images from URL or base64
• Vector icons from SVG

Styling

• Solid and gradient fills/strokes
• Corner radius, opacity, blend modes
• Drop shadows, inner shadows, blurs
• Layout grids

Layout

• Auto Layout (direction, spacing, padding, alignment)
• Constraints

Variables (Design Tokens)

• Variable collections with modes (Light/Dark)
• COLOR, FLOAT, STRING, BOOLEAN types
• Bind variables to node properties

Styles

• Reusable text styles
• Reusable effect styles

Components

• Create components from nodes
• Component sets (variants)
• Component properties (text, boolean, instance swap)
• Instances

Other

• Boolean operations (union, subtract, intersect, exclude)
• Export as PNG, JPG, SVG
• Plugin data storage

Available Tools

| Tool | Description | |------|-------------| | create_frame | Create a frame with optional parent | | create_rectangle | Create a rectangle | | create_ellipse | Create an ellipse/circle | | create_line | Create a line | | create_polygon | Create a polygon | | create_star | Create a star | | add_text | Add text with font styling | | place_image_url | Place image from URL | | place_image_base64 | Place image from base64 | | create_vector | Create vector from SVG |

| Tool | Description | |------|-------------| | find_nodes | Find nodes by name/type | | select_nodes | Select nodes | | get_selection | Get current selection | | rename_node | Rename a node | | delete_node | Delete a node | | duplicate_node | Duplicate a node (optionally to different parent) | | resize_node | Resize a node | | rotate_node | Rotate a node | | set_position | Set position within current parent | | move_to_parent | Move node to a different parent container | | reorder_node | Change z-order/stacking among siblings | | get_node_info | Get detailed node info (parent, bounds, children) | | set_visibility | Show or hide a node | | set_locked | Lock or unlock a node | | flatten_node | Flatten to single vector shape | | group_nodes | Group nodes | | ungroup | Ungroup | | create_page | Create a page | | set_current_page | Switch page |

| Tool | Description | |------|-------------| | set_fill | Set solid fill | | set_gradient_fill | Set gradient fill | | set_stroke | Set stroke | | set_gradient_stroke | Set gradient stroke | | set_corner_radius | Set corner radius | | set_opacity | Set opacity | | set_blend_mode | Set blend mode | | add_effect | Add shadow/blur | | clear_effects | Remove effects |

| Tool | Description | |------|-------------| | set_auto_layout | Configure Auto Layout | | set_constraints | Set constraints | | layout_grid_add | Add layout grid | | layout_grid_clear | Clear grids |

| Tool | Description | |------|-------------| | set_text_content | Edit text | | set_text_style | Set font/size/spacing | | set_text_color | Set text color | | set_text_gradient | Set text gradient |

| Tool | Description | |------|-------------| | create_variable_collection | Create collection | | create_variable | Create variable | | get_local_variable_collections | List collections | | get_local_variables | List variables | | set_variable_value | Update value | | bind_variable | Bind to property | | unbind_variable | Remove binding | | delete_variable | Delete variable | | delete_variable_collection | Delete collection |

| Tool | Description | |------|-------------| | create_text_style | Create text style | | create_effect_style | Create effect style | | get_local_text_styles | List text styles | | get_local_effect_styles | List effect styles | | apply_text_style | Apply text style | | apply_effect_style | Apply effect style | | update_text_style | Update text style | | update_effect_style | Update effect style | | delete_style | Delete style |

| Tool | Description | |------|-------------| | create_component | Create empty component | | create_component_from_node | Convert to component | | create_component_set | Create variant set | | create_instance | Create instance | | detach_instance | Detach instance | | add_component_property | Add property | | set_instance_property | Set property | | get_component_properties | Get properties |

| Tool | Description | |------|-------------| | boolean_op | Boolean operations | | export_node | Export as image | | set_plugin_data | Store data | | get_plugin_data | Retrieve data | | set_properties | Batch set properties |

SVG Icons

The create_vector tool supports two modes:

Full SVG (Recommended)

Use svgString for any SVG, including those with arcs, circles, and complex shapes:

{
  "svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>",
  "width": 24,
  "height": 24,
  "name": "icon"
}

Path Data Only

Use pathData for simple paths (no arcs):

{
  "pathData": "M20 6L9 17l-5-5",
  "width": 24,
  "height": 24,
  "strokeHex": "#000000",
  "strokeWeight": 2
}

Icon Library Compatibility:

| Library | Recommended Mode | |---------|------------------| | Heroicons | pathData or svgString | | Lucide | svgString (uses arcs) | | Feather | svgString (uses circles) |

Troubleshooting

| Problem | Solution | |---------|----------| | "Figma plugin not connected" | Run the plugin in Figma: Plugins → Development → MCP Figma Toolkit | | mcp-figma-toolkit: command not found | Run npm install -g mcp-figma-toolkit | | Port 3055 in use | Kill existing process: lsof -ti:3055 \| xargs kill -9 (macOS) | | Plugin not in Figma menu | Re-import manifest.json via Plugins → Development → Import plugin from manifest | | Font errors | Ensure the font is installed on your system and available in Figma |

Development

Project Structure

mcp-figma-toolkit/
├── server.ts          # MCP server (TypeScript source)
├── dist/              # Compiled JavaScript
├── plugin/
│   ├── plugin.js      # Figma plugin
│   ├── ui.html        # WebSocket bridge
│   └── manifest.json  # Plugin manifest
├── package.json
└── tsconfig.json

Building

npm install
npm run build    # Compile TypeScript
npm run dev      # Run with tsx (development)
npm start        # Run compiled version

Adding Tools

1. Add action handler in plugin/plugin.js
2. Add case in handleAction() switch
3. Register tool in server.ts with Zod schema
4. Rebuild: npm run build

Limitations

• One Figma document connection at a time
• 20-second timeout per operation
• Multiple variable modes (Light/Dark) require Figma paid plan
• SVG pathData doesn't support arc commands (use svgString instead)

License

MIT

Acknowledgments

• Originally forked from firasmj/Figma-MCP-Write-Bridge
• Built with Model Context Protocol SDK
• Uses Figma Plugin API