figma-capture-mcp

An MCP server for capturing webpages directly into Figma using HTML-to-design.

Features

• Capture any webpage to Figma designs via MCP protocol
• Supports both history and hash router modes
• CSS selector targeting for specific elements
• Customizable capture delay

Installation

Using npx (recommended)

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

Global Installation

npm install -g figma-capture-mcp

Then configure:

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

Usage

After configuration, use the capture_webpage tool in Claude Code:

Capture http://localhost:5173

Parameters

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | url | string | required | The URL of the webpage to capture | | selector | string | "body" | CSS selector of the element to capture | | delay | number | 1000 | Delay in milliseconds before triggering capture |

How It Works

1. Launches a browser with the specified URL
2. Injects Figma's HTML-to-design capture script
3. Triggers the capture when the page is ready
4. Browser stays open until you manually close it

Requirements

• Node.js >= 18.0.0
• Playwright browser dependencies
• Figma desktop app with HTML-to-design plugin

License

ISC