内容
<div align="center">
# 克劳德到 Figma 的 MCP
[](https://www.python.org/)
[](https://nodejs.org/)
[](https://modelcontextprotocol.io/)
[](https://www.figma.com/)
[](LICENSE)
一个 MCP（模型上下文协议）服务器，允许克劳德（Claude）以编程方式在 Figma 中创建和操作设计。
</div>
## 📖 概述
Figma 的 REST API 仅限于读取设计内容，唯一可以通过插件在 Figma 中编程创建形状、文本和框架的方法是运行在 Figma 内部的插件。该项目通过三部分系统连接克劳德（Claude）到 Figma：
1. **MCP 服务器** - 通过 MCP 协议向克劳德（Claude）公开设计工具
2. **WebSocket 桥接** - 实现服务器和 Figma 之间的实时通信
3. **Figma 插件** - 使用插件 API 在 Figma 中执行命令
## 💡 灵感
我爱 Figma，但创建线框图或启动新设计可能很乏味。与具有 AI 助手的代码编辑器不同，Figma 缺乏可以帮助根据自然语言实现想法 copiloting 或设计助手。该项目源于这种需求，希望简单描述所需的内容并将其显示在画布上。
## 🚀 安装
### 前提条件
- Python 3.12+
- Node.js 18+
- [uv](https://github.com/astral-sh/uv)（Python 包管理器）
- Figma 桌面应用程序
- 克劳德（Claude）桌面应用程序
### 设置
**1. 克隆仓库**
```bash
git clone git@github.com:Akirachang/claude-to-figma-mcp.git
cd figma-mcp
```
**2. 安装服务器依赖项**
```bash
cd server
uv sync
```
**3. 安装插件依赖项并编译**
```bash
cd ../plugin
npm install
npm run build
```
**4. 在 Figma 中安装插件**
- 打开 Figma 桌面应用程序
- 进入 **插件 → 开发 → 从清单导入插件**
- 选择 `plugin/manifest.json`
**5. 配置克劳德（Claude）桌面应用程序**
添加到您的克劳德（Claude）桌面应用程序配置中：
**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"
]
}
}
}
```
## 💻 使用
**1. 启动系统**
- 重启克劳德（Claude）桌面应用程序（这会自动启动 MCP 服务器）
- 打开 Figma 文件
- 运行 **插件 → 开发 → MCP 桥接**
- 在插件面板中点击“连接”（状态应变为绿色）
**2. 请求克劳德（Claude）设计**
示例提示：
```
"创建一个移动应用设计"
"创建一个电子商务平台着陆页"
"为活动创建海报"
```
## ⚙️ 配置
### WebSocket 端口
服务器默认监听端口 `9222`。要更改它，请修改以下内容：
- `server/server.py` - `websockets.serve(..., port=9222)`
- `plugin/ui.html` - 默认 URL 输入值
### 命令超时
命令在 30 秒后超时。在 `server/server.py` 中调整：
```python
async def send_command(command_type: str, params: dict, timeout: float = 30.0):
```
### 插件网络访问
插件需要网络访问 WebSocket 连接。在 `plugin/manifest.json` 中配置：
```json
{
"networkAccess": {
"allowedDomains": ["*"],
"reasoning": "连接到本地 MCP 服务器所需的 WebSocket 连接"
}
}
```
## 🏗️ 架构
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ │ stdio │ │ WS │ │
│ 克劳德（Claude）桌面应用程序 │◄───────►│ MCP 服务器 │◄───────►│ Figma 插件 │
│ │ MCP │ （Python） │ :9222 │ （TypeScript） │
└─────────────────┘ └─────────────────┘ └────────┬────────┘
│
│ Figma 插件 API
▼
┌─────────────────┐
│ Figma 画布 │
└─────────────────┘
```
### 数据流
1. **用户** 向克劳德（Claude）发送自然语言请求
2. **克劳德（Claude）** 解释请求并调用 MCP 工具（例如，`create_rectangle`）
3. **MCP 服务器** 通过 stdio 接收工具调用，通过 WebSocket 发送命令
4. **插件 UI** 接收 WebSocket 消息，转发到插件后端
5. **插件后端** 执行 Figma 插件 API 调用
6. **响应** 返回：插件 → WebSocket → MCP 服务器 → 克劳德（Claude）
7. **克劳德（Claude）** 继续执行下一个操作或响应用户
### 通信协议
| 连接 | 协议 | 传输 | 目的 |
| -------------------------- | ----------- | --------------- | ---------------------------- |
| 克劳德（Claude）↔ MCP 服务器 | MCP | stdio | 工具发现和执行 |
| MCP 服务器↔ 插件 | JSON | WebSocket :9222 | 实时命令/响应 |
| 插件 UI↔ 插件后端 | postMessage | Figma 沙盒 | 桥接到插件 API |
