Figma-Claude MCP模板
项目概述
此存储库提供 模型上下文协议（MCP）服务器模板 那座桥 克劳德桌面 和 Figma，通过WebSocket连接的Figma插件实现AI驱动的设计自动化和交互。
当前状态
开发阶段：前阿尔法（v0.1.0）
实现:
- ✓ 具有双传输（stdio+WebSocket）的基本MCP服务器架构
- ✓ 带有WebSocket连接的Figma插件框架
- ✓ 项目结构和构建体系
进行中:
- 🔄 核心Figma交互工具（见 docs/executionplan.md)
计划的:
- ⏳ 选择和导航工具（第一阶段）
- ⏳ 节点扫描和属性读取（第2阶段）
- ⏳ 文本操作（第3阶段）
- ⏳ 节点属性修改（第四阶段）
- ⏳ 事件监听器和实时同步（第5阶段）
详细实施计划见 docs/executionplan.md.
______________________________________________________________________
架构概述
┌──────────────────┐ stdio ┌──────────────────┐ WebSocket ┌──────────────────┐
│ │ (Standard I/O IPC) │ │ (ws://localhost:3000) │ │
│ Claude Desktop │◄───────────────────────►│ MCP Server │◄────────────────────────►│ Figma Plugin │
│ │ │ (Node.js/TS) │ │ (Sandbox) │
│ - Claude AI │ │ │ │ │
│ - MCP Client │ │ Dual Transport: │ │ - Figma API │
│ - Tool Calling │ │ • stdio mode │ │ - UI (HTML/JS) │
│ │ │ • WebSocket │ │ - Node Access │
└──────────────────┘ └──────────────────┘ └──────────────────┘关键组件
- MCP服务器 (
src/index.ts)
- 内置于 @modelcontextprotocol/sdk - 双模式操作：stdio（Claude）+WebSocket（Figma） - 工具注册表和请求处理程序 - 基于Express的WebSocket HTTP服务器
- Figma插件 (
figma-plugin/)
- 在Figma的沙盒环境中运行 - 用于MCP服务器通信的WebSocket客户端 - 访问Figma插件API - HTML/CSS/JavaScript用户界面
- Claude桌面集成
- 通过配置 claude_desktop_config.json - 在stdio模式下调用服务器 - 发现并调用MCP工具
______________________________________________________________________
技术实现细节
1.MCP服务器架构
传输层
标准传输（克劳德桌面）
// Activated when: No --websocket flag
// Communication: Standard input/output streams (IPC)
// Use case: Claude Desktop invokes server as subprocess
const transport = new StdioServerTransport();
await server.connect(transport);WebSocket传输（Figma插件）
// Activated when: --websocket flag present
// Communication: WebSocket protocol on port 3000
// Use case: Browser-based Figma plugin connectivity
const wss = new WebSocketServer({ server: httpServer });
httpServer.listen(3000);服务器配置
const server = new Server({
name: "figma-mcp-server",
version: "0.1.0"
}, {
capabilities: {
tools: {} // Tool calling enabled
}
});请求处理程序
- 列表工具请求架构：将可用工具归还给Claude
- CallToolRequestSchema：使用参数执行工具调用
2.Figma插件架构
文件结构
figma-plugin/
├── manifest.json # Plugin configuration & permissions
├── code.js # Main plugin code (Figma API access)
└── ui.html # Plugin UI (WebSocket client)清单配置
{
"name": "Figma MCP Client",
"api": "1.0.0",
"main": "code.js",
"ui": "ui.html",
"networkAccess": {
"allowedDomains": ["*"],
"reasoning": "Connects to local MCP server"
}
}通信流
插件代码（Code.js） ←→ UI（UI.html） ←→ MCP服务器
// code.js → ui.html
figma.ui.postMessage({ type: 'data', payload: {...} });
// ui.html → code.js
parent.postMessage({ pluginMessage: {...} }, '*');
// ui.html → MCP Server
ws.send(JSON.stringify({ type: 'request', data: {...} }));开发工作流程
建筑与运营
# Install dependencies
npm install
# Build TypeScript → JavaScript
npm run build
# Run in WebSocket mode (for Figma plugin)
npm start
# Development mode (auto-rebuild)
npm run dev测试工作流程
- 启动WebSocket服务器
npm start- 打开Figma桌面
- 从导入插件 figma-plugin/manifest.json - 运行插件，点击“连接”
- 在Claude Desktop中进行测试
- 重新启动克劳德桌面（加载MCP配置） - 让Claude使用figma mcp服务器工具 - 服务器自动在stdio模式下运行
Claude桌面配置
添加到您的 ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"figma-mcp-server": {
"command": "node",
"args": ["/path/to/figma-claude-mcp-template/build/index.js"]
}
}
}重要:
- 替换
/path/to/与你的实际路径 - 配置更改后重新启动Claude Desktop
- 不要跑步
npm start手动-Claude Desktop管理服务器
______________________________________________________________________
文件结构
figma-claude-mcp-template/
├── src/
│ └── index.ts # MCP server source (TypeScript)
├── build/
│ ├── index.js # Compiled server (JavaScript)
│ └── index.d.ts # Type definitions
├── figma-plugin/
│ ├── manifest.json # Figma plugin config
│ ├── code.js # Plugin backend (Figma API)
│ └── ui.html # Plugin UI (WebSocket client)
├── docs/
│ └── executionplan.md # Feature implementation roadmap
├── package.json # Dependencies & scripts
├── tsconfig.json # TypeScript configuration
├── .gitignore # Git ignore rules
└── README.md # Project overview______________________________________________________________________
依赖项
生产依赖性
{
"@modelcontextprotocol/sdk": "^1.0.4", // MCP protocol implementation
"express": "^4.18.2", // HTTP server
"cors": "^2.8.5", // CORS middleware
"ws": "^8.16.0" // WebSocket server
}发展依赖性
{
"@types/node": "^22.10.1", // Node.js types
"@types/express": "^4.17.21", // Express types
"@types/cors": "^2.8.17", // CORS types
"@types/ws": "^8.5.10", // WebSocket types
"typescript": "^5.7.2" // TypeScript compiler
}______________________________________________________________________
部署策略
地方发展
- 运行WebSocket服务器：
npm start - 手动安装Figma插件
- Claude Desktop使用本地配置
分配（计划）
备注：这些功能计划在未来的版本（v1.0.0+）中使用
- NPM包：发布为
figma-claude-mcp-template - Figma插件：提交至Figma社区
- 文档：全面的设置指南
安装步骤
# 1. Clone the template
git clone https://github.com/bradleyzaia/figma-claude-mcp-template.git
cd figma-claude-mcp-template
# 2. Install dependencies
npm install
# 3. Build the project
npm run build4.配置克劳德桌面
编辑 ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"figma-mcp-server": {
"command": "node",
"args": ["/absolute/path/to/figma-claude-mcp-template/build/index.js"]
}
}
}替换 /absolute/path/to/ 根据您的实际项目路径。
5.安装Figma插件
- 打开Figma桌面
- 首选 插件 → 发展 → 从清单导入插件
- 选择
figma-plugin/manifest.json从您的项目目录 - 运行插件并单击 连接
6.测试连接
- 重新启动Claude Desktop（加载新的MCP配置）
- 打开Figma插件，点击“连接”
- 询问Claude Desktop：“使用ping工具测试Figma连接”
- 您应该看到一个成功的往返响应！
______________________________________________________________________
已知限制
- 标准限制：无法将事件从服务器推送到Claude（仅限请求响应）
- 字体要求：编辑文本前必须加载字体
- 沙盒限制：Figma插件具有有限的API访问权限
- 单个实例：一次只能连接一个Figma插件
- 无文件操作：无法以编程方式打开/保存Figma文件
______________________________________________________________________
贡献
这是一个开源模板项目。欢迎投稿！
入门指南:
- 在以下位置分叉存储库
- 从以下位置创建特征分支
main - 按照以下代码样式实现更改
- 提交拉取请求
代码的风格:
- 具有严格模式的TypeScript
- 常规承诺
- JSDoc综合评论
______________________________________________________________________
许可证
MIT许可证-欢迎将此模板用于您自己的项目！