Content
<div align="center">
# Claude to Figma MCP
[](https://www.python.org/)
[](https://nodejs.org/)
[](https://modelcontextprotocol.io/)
[](https://www.figma.com/)
[](LICENSE)
An MCP (Model Context Protocol) server that enables Claude to create and manipulate designs in Figma programmatically.
</div>
## 📖 Overview
Figma's REST API is read-only for design content, the only way to programmatically create shapes, text, and frames is through a plugin running inside Figma. This project bridges that gap by connecting Claude to Figma through a three-component system:
1. **MCP Server** - Exposes design tools to Claude via the MCP protocol
2. **WebSocket Bridge** - Enables real-time communication between the server and Figma
3. **Figma Plugin** - Executes commands inside Figma using the Plugin API
## 💡 Inspiration
I love Figma, but creating wireframes or kickstarting a new design can be tedious. Unlike code editors with AI assistants, Figma lacks a copilot or design assistant that can help bring ideas to life based on natural language. This project was born from that gap, the desire to simply describe what I want and have it appear on the canvas.
## 🚀 Installation
### Prerequisites
- Python 3.12+
- Node.js 18+
- [uv](https://github.com/astral-sh/uv) (Python package manager)
- Figma Desktop App
- Claude Desktop
### Setup
**1. Clone the repository**
```bash
git clone git@github.com:Akirachang/claude-to-figma-mcp.git
cd figma-mcp
```
**2. Install server dependencies**
```bash
cd server
uv sync
```
**3. Install plugin dependencies and compile**
```bash
cd ../plugin
npm install
npm run build
```
**4. Install the plugin in Figma**
- Open Figma Desktop
- Go to **Plugins → Development → Import plugin from manifest**
- Select `plugin/manifest.json`
**5. Configure Claude Desktop**
Add to your Claude Desktop config:
**macOS**: `~/Library/Application\ Support/Claude/claude_desktop_config.json`
**Windows**: `%APPDATA%\Claude\claude_desktop_config.json`
```json
{
"mcpServers": {
"figma": {
"command": "uv",
"args": [
"run",
"--directory",
"/absolute/path/to/figma-mcp/server",
"python",
"server.py"
]
}
}
}
```
## 💻 Usage
**1. Start the system**
- Restart Claude Desktop (this automatically starts the MCP server)
- Open a Figma file
- Run **Plugins → Development → MCP Bridge**
- Click "Connect" in the plugin panel (status should turn green)
**2. Ask Claude to design**
Example prompts:
```
"Create a mobile app design"
"Create a e-commerce platform landing page"
"Create a poster for an event"
```
## ⚙️ Configuration
### WebSocket Port
The server listens on port `9222` by default. To change it, modify both:
- `server/server.py` - `websockets.serve(..., port=9222)`
- `plugin/ui.html` - Default URL input value
### Command Timeout
Commands timeout after 30 seconds. Adjust in `server/server.py`:
```python
async def send_command(command_type: str, params: dict, timeout: float = 30.0):
```
### Plugin Network Access
The plugin requires network access for WebSocket connections. This is configured in `plugin/manifest.json`:
```json
{
"networkAccess": {
"allowedDomains": ["*"],
"reasoning": "Required for WebSocket connection to local MCP server"
}
}
```
## 🏗️ Architecture
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ │ stdio │ │ WS │ │
│ Claude Desktop │◄───────►│ MCP Server │◄───────►│ Figma Plugin │
│ │ MCP │ (Python) │ :9222 │ (TypeScript) │
└─────────────────┘ └─────────────────┘ └────────┬────────┘
│
│ Figma Plugin API
▼
┌─────────────────┐
│ Figma Canvas │
└─────────────────┘
```
### Data Flow
1. **User** sends natural language request to Claude
2. **Claude** interprets request and calls MCP tools (e.g., `create_rectangle`)
3. **MCP Server** receives tool call via stdio, sends command via WebSocket
4. **Plugin UI** receives WebSocket message, forwards to plugin backend
5. **Plugin Backend** executes Figma Plugin API calls
6. **Response** travels back: Plugin → WebSocket → MCP Server → Claude
7. **Claude** continues with next action or responds to user
### Communication Protocols
| Connection | Protocol | Transport | Purpose |
| -------------------------- | ----------- | --------------- | ---------------------------- |
| Claude ↔ MCP Server | MCP | stdio | Tool discovery and execution |
| MCP Server ↔ Plugin | JSON | WebSocket :9222 | Real-time command/response |
| Plugin UI ↔ Plugin Backend | postMessage | Figma sandbox | Bridge to Plugin API |
