Figma Claude Bridge

Figma克劳德桥

通过插件+MCP服务器架构，在Figma中为Claude AI提供完整设计功能的完整系统。

建筑

Claude AI ↔ MCP Server ↔ Figma Plugin ↔ Figma Document

组件

1.Figma插件(/plugin)

• 在Figma内部运行，可完全访问插件API
• 用于实时通信的WebSocket服务器
• 完成设计操作：创建、读取、更新、删除
• 自动布局、组件、样式、效果支持

2.MCP服务器(/mcp-server)

• 遵循Anthropic规范的Node.js MCP服务器
• 通过WebSocket与Figma插件通信
• 将设计操作作为MCP工具公开
• 处理身份验证和连接管理

3.克劳德技能(/skill)

• 优化了设计任务的提示模式
• 示例和最佳实践
• 通用设计操作库

能力

设计操作

• ✅ 创建框架、形状、文本、组件
• ✅ 修改属性（位置、大小、颜色、效果）
• ✅ 使用自动布局和约束
• ✅ 创建和应用样式
• ✅ 导出资产（PNG、SVG、PDF）
• ✅ 导航和查询设计结构

高级功能

• 组件创建和变体
• 设计系统生成
• 批量操作
• 设计分析及建议
• 资产管理

快速开始

1.安装Figma插件

cd plugin
npm install
npm run build

然后在Figma中：插件→ 发展→ 从清单导入插件

2.启动MCP服务器

cd mcp-server
npm install
npm start

3.配置Claude

将MCP服务器添加到您的Claude Desktop配置中：

{
  "mcpServers": {
    "figma-bridge": {
      "command": "node",
      "args": ["/path/to/mcp-server/dist/index.js"]
    }
  }
}

4.使用克劳德技能（可选）

将技能导入Claude，以优化设计提示模式。

示例用法

Claude: Create a mobile app screen with a header, search bar, and card list

→ MCP Server receives request
→ Plugin creates frame with Auto Layout
→ Adds components with proper spacing
→ Applies design system styles
→ Returns design URL

发展

插件开发

cd plugin
npm run dev  # Watch mode with hot reload

MCP服务器开发

cd mcp-server
npm run dev  # Watch mode with TypeScript compilation

项目结构

figma-claude-bridge/
├── plugin/              # Figma plugin source
│   ├── src/
│   │   ├── code.ts     # Main plugin logic
│   │   ├── ui.html     # Plugin UI (if needed)
│   │   └── server.ts   # WebSocket server
│   ├── manifest.json
│   └── package.json
├── mcp-server/         # MCP server
│   ├── src/
│   │   ├── index.ts    # MCP server entry
│   │   ├── tools/      # MCP tool definitions
│   │   └── client.ts   # Figma plugin client
│   └── package.json
├── skill/              # Claude skill
│   └── SKILL.md
└── README.md

用例

设计任务

• 快速原型制作
• 设计系统创建
• 大规模资产生成
• 设计质量保证和一致性检查
• 自动化设计文档

许可证

麻省理工学院

贡献

欢迎投稿！请先阅读CONTRIBUTING.md。