AI导哈

Figma设计自动化工具

通过MCP协议连接Claude与Figma，实现自然语言驱动的设计创建与编辑功能。

  • by Akirachang
  • Python
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 Akirachang/claude-to-figma-mcp

使用说明

克劳德到菲格玛MCP

MCP（模型上下文协议）服务器，使Claude能够以编程方式在Figma中创建和操纵设计。

📖 概述

Figma的REST API对设计内容是只读的，以编程方式创建形状、文本和框架的唯一方法是通过Figma内部运行的插件。该项目通过一个由三个部分组成的系统将克劳德与菲格玛连接起来，弥合了这一差距：

  1. MCP服务器 -通过MCP协议向Claude公开设计工具
  2. WebSocket网桥 -实现服务器和Figma之间的实时通信
  3. Figma插件 -使用插件API在Figma内部执行命令

💡 灵感

我喜欢Figma，但创建线框或启动新设计可能会很乏味。与配备人工智能助手的代码编辑器不同，Figma缺乏一个副驾驶或设计助手，可以帮助将基于自然语言的想法变为现实。这个项目诞生于这个空白，即简单地描述我想要的东西并将其出现在画布上的愿望。

🚀 安装

先决条件

  • Python 3.12+
  • Node.js 18+
  • 紫外线 （Python包管理器）
  • Figma桌面应用程序
  • 克劳德桌面版

设置

1.克隆存储库

git clone git@github.com:Akirachang/claude-to-figma-mcp.git
cd figma-mcp

2.安装服务器依赖项

cd server
uv sync

3.安装插件依赖项并编译

cd ../plugin
npm install
npm run build

4.在Figma中安装插件

  • 打开Figma桌面
  • 首选 插件→ 发展→ 从清单导入插件
  • 选择 plugin/manifest.json

5.配置克劳德桌面

添加到您的Claude Desktop配置中：

macOS: ~/Library/Application\ Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "/absolute/path/to/figma-mcp/server",
        "python",
        "server.py"
      ]
    }
  }
}

💻 用法

1.启动系统

  • 重新启动Claude Desktop（这会自动启动MCP服务器）
  • 打开Figma文件
  • 跑 插件→ 发展→ MCP电桥
  • 点击插件面板中的“连接”（状态应变为绿色）

2.请克劳德设计

示例提示：

"Create a mobile app design"
"Create a e-commerce platform landing page"
"Create a poster for an event"

⚙️ 配置

WebSocket端口

服务器监听端口 9222 默认情况下。要更改它，请同时修改以下两项：

  • server/server.py - websockets.serve(..., port=9222)
  • plugin/ui.html -默认URL输入值

命令超时

命令在30秒后超时。调整 server/server.py:

async def send_command(command_type: str, params: dict, timeout: float = 30.0):

插件网络访问

该插件需要网络访问才能进行WebSocket连接。这是在中配置的 plugin/manifest.json:

{
  "networkAccess": {
    "allowedDomains": ["*"],
    "reasoning": "Required for WebSocket connection to local MCP server"
  }
}

🏗️ 建筑

┌─────────────────┐         ┌─────────────────┐         ┌─────────────────┐
│                 │  stdio  │                 │   WS    │                 │
│  Claude Desktop │◄───────►│   MCP Server    │◄───────►│  Figma Plugin   │
│                 │   MCP   │    (Python)     │  :9222  │  (TypeScript)   │
└─────────────────┘         └─────────────────┘         └────────┬────────┘
                                                                 │
                                                                 │ Figma Plugin API
                                                                 ▼
                                                        ┌─────────────────┐
                                                        │  Figma Canvas   │
                                                        └─────────────────┘

数据流

  1. 用户 向Claude发送自然语言请求
  2. 克劳德 解释请求并调用MCP工具（例如。， create_rectangle)
  3. MCP服务器 通过stdio接收工具调用，通过WebSocket发送命令
  4. 插件UI 接收WebSocket消息，转发到插件后端
  5. 插件后端 执行Figma插件API调用
  6. 回应 返回：插件→ 网络套接字→ MCP服务器→ 克劳德
  7. 克劳德 继续执行下一个操作或响应用户

通信协议

连接 协议 传输 目的
克劳德↔ MCP服务器 MCP stdio 工具发现和执行
MCP服务器↔ 插件 JSON WebSocket：9222 实时命令/响应
插件UI↔ 插件后端 postMessage Figma沙盒 桥接到插件API

相关 MCP