io.github.a1245582339/figma-designer
Give AI agents full read & write access to Figma β 50+ tools for design automation
Ask AI about io.github.a1245582339/figma-designer
Powered by Claude Β· Grounded in docs
I know everything about io.github.a1245582339/figma-designer. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
figma-designer-mcp
MCP server that gives AI agents full read and write access to Figma β 50+ tools for creating frames, placing components, styling, auto layout, and more.
Works with any MCP-compatible client (Claude Desktop, Cursor, Continue, etc.) and also as an OpenClaw extension.
English | δΈζ

- Read β powered by the Figma REST API (no plugin required).
- Write β powered by a lightweight Figma plugin that connects via WebSocket and executes Plugin API operations in real time.
vs. Figma Official MCP
Figma's official MCP server is designed for the Design β Code direction: it helps developers read existing designs and generate code. figma-designer-mcp is built for the opposite direction β Code/AI β Design: it lets AI agents create and modify designs directly on the Figma canvas.
| figma-designer-mcp | Figma Official MCP | |
|---|---|---|
| Direction | AI β Design (create & edit designs) | Design β Code (read designs, generate code) |
| Write tools | 44+ write tools β create frames, shapes, text, place components, set styles, auto layout, etc. | Virtually none β generate_figma_design captures live UI but cannot create or edit design elements |
| Read tools | 6 REST API tools β read nodes, screenshot, list components/styles, comments | ~13 tools β design context, variables, metadata, screenshots, Code Connect |
| Component manipulation | Search, instantiate, configure variant properties, duplicate, reparent | Read-only β extract component info for code generation |
| Page & node management | Create/switch pages, rename/delete/duplicate/group/resize/rotate nodes | No page or node manipulation |
| Styling control | Fill, stroke, corner radius, opacity, blend mode, effects (shadow/blur) | No direct styling β returns style data for code output |
| Auto layout | Full auto layout configuration (direction, spacing, padding, alignment, wrap) | No layout editing |
| Client support | All MCP clients equally β no feature restrictions | Some features limited to specific clients (e.g. generate_figma_design requires Claude Code or Codex) |
| Hosting | Self-hosted, open source (MIT) | Remote (Figma-hosted) or desktop app |
| Pricing | Free | Requires paid Figma plan for desktop server |
In short: Figma's official MCP helps you turn designs into code. figma-designer-mcp helps AI turn ideas into designs. They are complementary β you can use both together in the same project.
Best Practices
Check out the Best Practices Guide for proven strategies to get the most out of this tool:
- Use a component library file (e.g. Ant Design) as your workspace β search & reuse 3β5x faster than drawing from scratch
- Create a template frame for consistent page layout across multi-page designs
- Duplicate instead of redraw β for tables, lists, and grids, create one item then copy it
- Configure variant properties instead of manually editing component internals
- Use the icon library β search and instantiate, don't draw icons by hand
These techniques compound to reduce tool calls by 60β80%, saving both time and tokens.
Quick Start
FIGMA_TOKEN=figd_xxxxxxxxxxxx npx figma-designer-mcp
Or install globally:
npm install -g figma-designer-mcp
FIGMA_TOKEN=figd_xxxxxxxxxxxx figma-designer-mcp
Environment Variables
| Variable | Required | Description |
|---|---|---|
FIGMA_TOKEN | Yes | Figma Personal Access Token (generate here) |
FIGMA_BRIDGE_PORT | No | WebSocket bridge port (default: 3055) |
Claude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["figma-designer-mcp"],
"env": {
"FIGMA_TOKEN": "figd_xxxxxxxxxxxx"
}
}
}
}
Cursor
Add to .cursor/mcp.json:
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["figma-designer-mcp"],
"env": {
"FIGMA_TOKEN": "figd_xxxxxxxxxxxx"
}
}
}
}
Other MCP Clients
Any client that supports the MCP stdio transport:
{
"command": "npx",
"args": ["figma-designer-mcp"],
"env": { "FIGMA_TOKEN": "figd_xxxxxxxxxxxx" }
}
Figma Plugin Setup (for Write Tools)
Read tools work out of the box. Write tools (creating nodes, styling, auto layout, etc.) require a companion Figma plugin that acts as the execution bridge.
1. Build the plugin
cd /path/to/figma-designer-mcp # or: npx figma-designer-mcp --help to find install location
npm run build:plugin
This compiles figma-plugin/src/plugin.ts β figma-plugin/plugin.js using esbuild.
2. Import into Figma
- Open Figma (desktop app or browser).
- Go to Plugins β Development β Import plugin from manifestβ¦
- Select
figma-plugin/manifest.jsonfrom the package directory. - Open the Figma file you want to design in.
- Run the plugin: Plugins β Development β AI Figma Designer.
The plugin opens a UI where you enter the MCP server address and port, then click Connect. Configuration is persisted via Figma's clientStorage. The plugin auto-reconnects on disconnection.
Tip: Duplicate a design system community file (e.g. Ant Design Open Source), open the duplicate, and run the plugin. The agent can then use
figma_search_componentsto find components andfigma_create_instanceto place them.
Architecture
AI Client (Claude, Cursor, etc.)
β MCP stdio transport
βΌ
figma-designer-mcp
βββ REST API client β Figma API (read, screenshot, components, styles, comments)
βββ WebSocket server (FigmaBridge, default port 3055)
βΌ
Figma Client (Desktop or Browser)
βββ "AI Figma Designer" plugin
βββ Executes Plugin API calls (create nodes, set styles, auto layout β¦)
Read path
Agent calls figma_read / figma_screenshot / etc. β MCP server makes an HTTP request to https://api.figma.com/v1/... using FIGMA_TOKEN β returns structured data.
Write path
- MCP server starts a WebSocket server on port
FIGMA_BRIDGE_PORT(default3055). - The Figma plugin connects to this WebSocket server.
- When an agent calls a write tool (e.g.
figma_create_frame), the server sends a JSON message:{ "id": "req_1", "action": "create_frame", "args": { "name": "Login Page", "width": 1440, "height": 900 } } - The plugin executes
figma.createFrame()via the Plugin API and replies:{ "replyTo": "req_1", "result": { "ok": true, "nodeId": "123:456", "type": "FRAME", "name": "Login Page" } } - The server resolves the promise and returns the result to the agent.
Each request has a 30-second timeout. If the plugin disconnects mid-operation, pending requests are rejected immediately.
Auto-positioning
All creation tools automatically place new top-level elements to the right of existing content when:
- No
parentIdis specified (placed at page root level) - No explicit
xoryis provided
This prevents overlapping. Elements placed inside a Frame (with parentId) are not affected.
Available Tools
Read Tools (REST API β no plugin needed)
| Tool | Description |
|---|---|
figma_read | Read a Figma file or specific nodes. Returns node tree with layout, style, and text info. |
figma_screenshot | Export nodes as images (PNG, JPG, SVG, PDF). Returns download URLs. |
figma_components | List all components in a file (name, description, key, node ID). |
figma_styles | List all styles in a file (colors, text styles, effects, grids). |
figma_comment | Post a comment on a file, optionally attached to a specific node. |
figma_get_comments | Read all comments on a file. Returns text, author, timestamp. |
Write Tools (WebSocket bridge β plugin required)
Creation
| Tool | Description |
|---|---|
figma_create_frame | Create a frame (artboard). Params: name, width, height, x, y, parentId. |
figma_create_rectangle | Create a rectangle. Params: width, height, x, y, cornerRadius, hex, parentId. |
figma_create_ellipse | Create an ellipse / circle. Params: width, height, x, y, hex, parentId. |
figma_create_line | Create a line. Params: length, x, y, rotation, strokeHex, strokeWeight, parentId. |
figma_create_polygon | Create a polygon. Params: sides, width, height, x, y, hex, parentId. |
figma_create_star | Create a star shape. Params: points, width, height, x, y, hex, parentId. |
figma_add_text | Add a text node. Params: text, x, y, fontFamily, fontStyle, fontSize, hex, parentId. |
figma_place_image | Place an image from base64 data. Params: base64, width, height, x, y, parentId. |
Find & Select
| Tool | Description |
|---|---|
figma_find_nodes | Find nodes in the current page by type or name substring. Params: type, nameContains, within. |
figma_find_nodes_all_pages | Search nodes across all pages by type and/or name. Returns node ID, type, name, and page. Params: type, nameContains, nameEquals, limit. |
figma_select_nodes | Select nodes by ID. Params: nodeIds. |
figma_get_selection | Get the current selection. |
Page Management
| Tool | Description |
|---|---|
figma_list_pages | List all pages in the file with IDs and names, and show the current active page. |
figma_create_page | Create a new page. Params: name, makeCurrent. |
figma_set_current_page | Switch to a page. Params: pageId. |
figma_get_page_bounds | Get the bounding box of all content on the current page, plus a suggested position for placing new elements without overlap. |
Node Management
| Tool | Description |
|---|---|
figma_rename_node | Rename a node. Params: nodeId, name. |
figma_delete_node | Delete a node. Params: nodeId. |
figma_duplicate_node | Duplicate a node. Params: nodeId, x, y. |
figma_resize_node | Resize a node. Params: nodeId, width, height. |
figma_rotate_node | Rotate a node. Params: nodeId, rotation. |
figma_set_position | Set absolute position. Params: nodeId, x, y. |
figma_group_nodes | Group nodes. Params: nodeIds, name. |
figma_ungroup | Ungroup. Params: groupId. |
figma_reparent_node | Move a node into a different container (frame, group, page). Params: nodeId, newParentId, index. |
Styling
| Tool | Description |
|---|---|
figma_set_fill | Set fill color. Params: nodeId, hex, opacity. |
figma_set_stroke | Set stroke. Params: nodeId, hex, opacity, strokeWeight, strokeAlign, dashPattern, cap, join. |
figma_set_corner_radius | Set corner radius (uniform or per-corner). Params: nodeId, radius, topLeft, topRight, bottomRight, bottomLeft. |
figma_set_opacity | Set opacity (0β1). Params: nodeId, opacity. |
figma_set_blend_mode | Set blend mode. Params: nodeId, mode. |
figma_add_effect | Add shadow or blur. Params: nodeId, type, radius, spread, hex, opacity, offsetX, offsetY. |
figma_clear_effects | Remove all effects. Params: nodeId. |
Layout
| Tool | Description |
|---|---|
figma_set_auto_layout | Configure Auto Layout on a frame. Params: nodeId, layoutMode, itemSpacing, padding*, primaryAxisAlignItems, counterAxisAlignItems, layoutWrap, etc. |
figma_set_constraints | Set constraints. Params: nodeId, horizontal, vertical. |
figma_layout_grid_add | Add a layout grid. Params: nodeId, pattern, count, gutterSize, sectionSize, hex, opacity. |
figma_layout_grid_clear | Remove all layout grids. Params: nodeId. |
Text Editing
| Tool | Description |
|---|---|
figma_set_text_content | Change text content. Params: nodeId, text. |
figma_set_text_style | Apply text styling. Params: nodeId, fontFamily, fontStyle, fontSize, lineHeight, letterSpacing, textAlignHorizontal, textAutoResize. |
figma_set_text_color | Set text color. Params: nodeId, hex, opacity. |
Components & Boolean
| Tool | Description |
|---|---|
figma_create_component | Create a reusable component. Params: name, fromNodeIds. |
figma_create_instance | Instantiate a component. Params: componentId, x, y, parentId. |
figma_detach_instance | Detach an instance to a regular frame. Params: nodeId. |
figma_boolean_op | Boolean operation (UNION, SUBTRACT, INTERSECT, EXCLUDE). Params: op, nodeIds, name. |
Component Library
| Tool | Description |
|---|---|
figma_list_local_components | List all components in the file. Params: pageFilter (optional, filter by page name), limit (default 200). Returns component name, ID, variant properties, and page location. |
figma_search_components | Search components by name, component set name, or description. Params: query, limit (default 50). |
figma_get_component_properties | Read all configurable properties (variants, booleans, text overrides) of a component instance. Returns property names, types, current values, and available options. Params: nodeId. |
figma_set_component_properties | Set variant properties on a component instance (e.g. Table rows/columns, Button type/size). Supports fuzzy matching on property names. Params: nodeId, properties. |
Export & Utilities
| Tool | Description |
|---|---|
figma_export_node | Export a node as PNG/JPG/SVG via the plugin. Params: nodeId, format, scale. |
figma_set_properties | Batch-set multiple properties. Params: nodeId, props. |
figma_bridge_status | Check if the Figma plugin is connected. |
Dynamic Tool Loading
Instead of exposing all 50+ tools at once (~4000 tokens in tool definitions), the server uses dynamic tool loading by default. Only a small set of core tools (~9) plus meta-tools are loaded initially. The LLM loads additional tool groups on demand as needed.
How It Works
Tools are organized into 8 categories:
| Category | Tools | Description |
|---|---|---|
core | 7 | Read files, screenshot, find/select nodes, list pages, bridge status (always loaded) |
create | 9 | Create frames, rectangles, ellipses, lines, polygons, stars, text, images, pages |
modify | 10 | Rename, delete, duplicate, resize, rotate, reposition, group/ungroup, reparent nodes |
style | 7 | Fill, stroke, corner radius, opacity, blend mode, effects |
layout | 5 | Auto layout, constraints, layout grids, page bounds |
text | 3 | Text content, style, color |
component | 9 | Components, instances, boolean ops, properties, library search |
export | 6 | Export, batch properties, REST components/styles, comments |
Two meta-tools manage loading:
figma_load_toolsetβ Load one or more tool categories (e.g."create,style"or"all").figma_unload_toolset(MCP) /figma_list_toolsets(OpenClaw) β Unload categories or list their status.
The LLM sees the category descriptions in figma_load_toolset and loads what it needs. For example, when asked to "create a login page", it calls figma_load_toolset("create,style,text,layout") to load 24 relevant tools.
Token Savings
| Mode | Tool tokens (approx.) |
|---|---|
| All tools (default) | ~4000 tokens |
| Dynamic β initial load | ~500 tokens (core + meta-tools) |
| Dynamic β typical task | ~1500β2500 tokens (core + 2β3 categories) |
Typical savings: 60β80% of tool definition tokens.
Development
Building
npm run build # Build everything (plugin + MCP server)
npm run build:plugin # Build Figma plugin only
npm run build:mcp # Build MCP server only
build:plugincompilesfigma-plugin/src/plugin.tsβfigma-plugin/plugin.js(IIFE, ES2015, browser)build:mcpcompilesmcp-server.tsβdist/mcp-server.js(ESM, Node 18+)
After modifying plugin.ts, rebuild and restart the Figma plugin to pick up changes.
Adding new tools
- Add the tool definition in
src/tool-defs.ts(single source of truth for both OpenClaw and MCP modes). - Bridge-based tools (write): Add a new action handler in
figma-plugin/src/plugin.ts. Use thebt()helper intool-defs.tsfor the tool definition. - REST API tools (read): Add a client method in
src/client.ts. Write a custom execute function intool-defs.ts.
File Structure
figma-designer-mcp/
βββ mcp-server.ts # MCP server entry point
βββ index.ts # OpenClaw plugin entry (alternative mode)
βββ openclaw.plugin.json # OpenClaw plugin manifest
βββ package.json
βββ LICENSE
βββ src/
β βββ tool-defs.ts # Shared tool definitions (single source of truth)
β βββ tool-registry.ts # Tool categories & dynamic loading registry
β βββ client.ts # Figma REST API client (read operations)
β βββ tools.ts # OpenClaw adapter β read tools
β βββ write-tools.ts # OpenClaw adapter β write tools
β βββ bridge.ts # WebSocket server β accepts Figma plugin connections
βββ dist/ # Build output
β βββ mcp-server.js # Compiled MCP server (generated by npm run build:mcp)
βββ figma-plugin/ # Figma plugin (import into Figma for write operations)
β βββ manifest.json
β βββ ui.html # Plugin UI β server config & WebSocket client
β βββ src/
β β βββ plugin.ts # TypeScript source (action dispatcher)
β βββ plugin.js # Compiled output (generated by npm run build:plugin)
β βββ tsconfig.json
β βββ assets/
β βββ logo.jpeg
βββ .gitignore
Troubleshooting
"Figma plugin not connected"
- Make sure the Figma plugin is running (Plugins β Development β AI Figma Designer).
- Check that the WebSocket address in the plugin UI matches the server IP and port.
- Verify no firewall is blocking the bridge port.
Plugin connects but operations fail
- Open the Figma plugin console (Plugins β Development β Open Console) to see error messages.
- Ensure you have a file open in Figma β the plugin operates on the current page.
Read tools work but write tools don't
- Read tools use the REST API and don't need the plugin. Write tools require the plugin to be running and connected. Check
figma_bridge_statusto verify connectivity.
Font errors on figma_add_text
- The font must be available in Figma. Default is
Interwhich is always available. - For custom fonts, ensure they are installed or available in your Figma account.
OpenClaw Mode
This package also works as an OpenClaw extension. To use it in OpenClaw instead of as a standalone MCP server:
Prerequisites
| Requirement | Details |
|---|---|
| OpenClaw | Gateway running with the figma-designer plugin enabled |
| Figma Personal Access Token | Generate at https://www.figma.com/developers/api#access-tokens |
| Figma Desktop or Browser | Required for write operations |
Configuration
Add to openclaw.json:
{
"plugins": {
"entries": {
"figma-designer": {
"enabled": true,
"config": {
"personalAccessToken": "figd_xxxxxxxxxxxx",
"bridgePort": 3055 // optional, default 3055
}
}
}
}
}
Restart the OpenClaw gateway after updating configuration.
License
MIT β see LICENSE.
