figmad-mcp
Figma Design MCP Server - Create, capture, and manage Figma designs via AI agents.
Features
- Read Operations: Get files, nodes, components, styles, variables, export images
- Write Operations: Create frames, shapes, text; apply auto-layout; update nodes (requires plugin)
- Capture & Reconstruct: Screenshot webpages and recreate them in Figma
- Generate UI: Create UI designs from text prompts
Setup
1. Install Dependencies
npm install
2. Configure Environment
cp .env.example .env
# Edit .env and add your FIGMA_ACCESS_TOKEN
Get your token at: https://www.figma.com/developers/api#access-tokens
3. Build
npm run build
4. Install Plugin (for write operations)
cd plugin
npm install
npm run build
Then in Figma:
- Menu → Plugins → Development → Import plugin from manifest
- Select
plugin/manifest.json
Usage
With Claude Desktop
Add to claude_desktop_config.json:
{
"mcpServers": {
"figmad": {
"command": "node",
"args": ["/path/to/figmad-mcp/dist/index.js"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-token-here"
}
}
}
}
Available Tools
Read Operations (REST API - always available)
| Tool | Description |
|---|---|
get_file | Get Figma file structure |
get_node | Get specific nodes by ID |
get_components | List components in a file |
get_styles | Get color/text/effect styles |
get_variables | Get design tokens/variables |
export_image | Export node as PNG/SVG/PDF |
Write Operations (Plugin required)
| Tool | Description |
|---|---|
create_frame | Create a new frame |
create_rectangle | Create a rectangle shape |
create_text | Create text node |
update_node | Modify node properties |
apply_auto_layout | Apply auto-layout to frame |
set_fills | Set fill colors |
delete_node | Delete a node |
get_selection | Get current selection |
plugin_status | Check if plugin is connected |
Orchestrated Tools
| Tool | Description |
|---|---|
capture_webpage | Screenshot and analyze a webpage |
reconstruct_page | Recreate captured page in Figma |
generate_ui | Generate UI from text description |
analyze_codebase | Extract components and design tokens from code |
sync_design_tokens | Compare/sync tokens between Figma and code |
Example Prompts
Get the structure of my Figma file: [paste figma URL]
Create a landing page with a header, hero section with headline and CTA button, three feature cards, and a footer
Capture https://example.com and recreate it in Figma
Export the frame "Hero Section" as a PNG
Analyze my React codebase at /path/to/project and extract design tokens
Compare design tokens between my Figma file and codebase
Architecture
┌─────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ AI Agent │────▶│ figmad-mcp │────▶│ Figma Plugin │
│ (Claude) │stdio│ (MCP Server) │ ws │ (runs in Figma) │
└─────────────┘ └────────┬────────┘ └──────────────────┘
│
├──▶ Figma REST API (read operations)
└──▶ Playwright (web capture)
Development
npm run dev # Watch mode
npm run typecheck # Type checking
npm run lint # Linting
cd plugin
npm run watch # Watch plugin changes
License
MIT