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:

1. Menu → Plugins → Development → Import plugin from manifest
2. 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