Figma AI设计插件

Claude与Figma MCP对话

一个模型上下文协议（MCP）插件，允许Claude Desktop和其他AI工具（GitHub Copilot、Cursor等）直接与Figma交互，实现强大的AI辅助设计功能。

重要：本项目基于 光标与figma mcp对话 桑尼·拉祖迪。它已被调整为与Claude Desktop配合使用，并扩展了其他工具。原始信用属于Sonny Lazuardi❤️

⚡ 安装

1.先决条件

• 克劳德桌面 或 光标
• Figma桌面
• Node.js 安装

2.设置

Pro Way🚀

如果你已经安装了Node.js，首先导航到要安装MCP的文件夹，然后简单地运行：

npx claude-talk-to-figma-mcp

这个命令将克隆存储库，安装优化的依赖项（Bun），并自动为您启动套接字服务器。

手动方式🛠️

如果您更喜欢手动设置，请使用此选项：

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
bun install

• macOS/Linux: bun run build
• 视窗: bun run build:win

3.AI客户端配置

选项1:DXT软件包（仅限克劳德桌面版）

1. 下载：获取最新信息 claude-talk-to-figma-mcp.dxt 从 发布
2. 安装：双击 .dxt file → Claude Desktop会自动安装

选项2:JSON（克劳德桌面或光标）

• 克劳德桌面：运行 bun run configure-claude （重新启动克劳德桌面）
• 光标:
  1. 转到光标设置→ 工具和集成
  2. 点击“新建MCP服务器”打开 mcp.json config(截图)
  3. 添加此配置：
  复制

  {
    "mcpServers": {
      "ClaudeTalkToFigma": {
        "command": "bunx",
        "args": ["claude-talk-to-figma-mcp@latest"]
      }
    }
  }
  

  4. 保存文件(截图)

4.设置Figma插件（所有方法都需要）

导入 src/claude_mcp_plugin/manifest.json 在Figma→ Menu → 插件→ 发展

5.首次连接

1. 启动服务器: bun socket （核实 http://localhost:3055/status)
2. 连接插件：在Figma中打开Claude MCP插件→ 复制频道ID
3. 测试：询问您的AI客户端：“与Figma对话，频道{频道ID}”

✅ 成功：你的AI应该确认连接，然后你就可以开始设计了！

🚀 核心概念

运作原理

Claude Desktop ↔ MCP Server ↔ WebSocket Server ↔ Figma Plugin

简单：Claude发送设计命令→ Figma实时执行它们
双向：从Figma获取信息，创建/修改元素，管理组件

核心能力

• 文档交互：分析设计、获取选择、导出资产
• 元素创建：具有完全样式控制的形状、文本、框架
• 智能修改：颜色、效果、自动布局、响应式设计
• 文本精通：高级排版、字体加载、文本扫描
• 组件集成：本地和团队库组件

🛠️ 使用模式

AI设计入门

1. 让Claude成为用户体验专家: 使用此提示 🎨
2. 连接到您的项目：“与Figma对话，频道{频道ID}”
3. 开始设计：“创建具有现代风格的移动应用程序登录屏幕”

有效的激励示例

✅ Good: "Create a dashboard with a sidebar navigation, header with user profile, and main content area with card-based metrics"

✅ Good: "Redesign this button component with hover states and better contrast ratios"

❌ Avoid: "Make it look nice" (too vague)

📚 命令参考

📄 文档工具

🔧 创建工具

✏️ 修改工具

📝 文本工具

🎨 组件工具

构建DXT包（开发人员）

要创建自己的DXT包，请执行以下操作：

npm run build:dxt    # Builds TypeScript and packages DXT

这创造了 claude-talk-to-figma-mcp.dxt 准备分发。

🧪 测试和质量保证

自动化测试

bun run test            # Run all tests
bun run test:watch      # Watch mode
bun run test:coverage   # Coverage report

集成测试

bun run test:integration  # Guided end-to-end testing

手动验证检查表

• []WebSocket服务器在端口3055上启动
• []Figma插件连接并生成通道ID
• []AI工具识别“ClaudeTalkToFigma”MCP（克劳德桌面、光标等）
• []执行基本命令（创建矩形、更改颜色）
• []错误处理工作（无效命令、超时）
• []AI工具和Figma之间的通道通信工作

🐛 故障排除和支持

连接问题

• “无法连接到WebSocket”：确保 bun socket 正在运行
• “未找到插件”：在Figma开发设置中验证插件导入
• “MCP不可用”:
  • 克劳德桌面：运行 bun run configure-claude 并重新启动克劳德
  • 光标IDE：检查MCP配置 mcp.json 文件
  • 其他AI工具：验证MCP集成设置

执行问题

• “命令失败”：检查Figma开发控制台是否有错误
• “找不到字体”：使用 load_font_async 验证字体可用性
• “权限被拒绝”：确保您对Figma文档具有编辑权限
• “超时错误”：复杂的操作可能需要重试

性能问题

• 反应缓慢：大型文档可能需要更多的处理时间
• 内存使用：关闭未使用的Figma选项卡，必要时重新启动
• WebSocket断开连接：服务器自动重新连接，如果持续，则重新启动

常见解决方案

1. 重启顺序：停止服务器→ 关闭AI工具→ 重新启动两者
2. 清洁重新安装：删除 node_modules → bun install → bun run build
3. 检查日志：服务器终端显示详细的错误消息
4. 更新字体：有些团队字体需要在Figma中手动加载
5. 配置检查：在AI工具的设置中验证MCP设置
6. 端口冲突：确保端口3055未被其他应用程序使用

🏗️ 高级主题

建筑深潜

+----------------+     +-------+     +---------------+     +---------------+
|                |     |       |     |               |     |               |
| Claude Desktop |<--->|  MCP  |<--->| WebSocket Srv |<--->| Figma Plugin  |
|   (AI Agent)   |     |       |     |  (Port 3055)  |     |  (UI Plugin)  |
|                |     |       |     |               |     |               |
+----------------+     +-------+     +---------------+     +---------------+

设计原则:

• MCP服务器：业务逻辑、验证、默认值
• WebSocket 服务器：消息路由和协议转换
• Figma插件：Figma上下文中的纯命令执行器

好处:

• 明确区分关注点
• 易于测试和维护
• 用于附加工具的可扩展架构

项目结构

src/
  talk_to_figma_mcp/     # MCP Server implementation
    server.ts            # Main entry point
    tools/               # Tool categories by function
      document-tools.ts  # Document interaction
      creation-tools.ts  # Shape and element creation
      modification-tools.ts # Property modification
      text-tools.ts      # Text manipulation
    utils/               # Shared utilities
    types/               # TypeScript definitions
  claude_mcp_plugin/     # Figma plugin
    code.js              # Plugin implementation
    manifest.json        # Plugin configuration

贡献指南

1. 叉和分支: git checkout -b feature/amazing-feature
2. 代码规范：遵循现有的TypeScript模式
3. 测试：添加新功能的测试
4. 文档：更新相关章节
5. 拉取请求：对变更的清晰描述

最近的贡献者

• 罗伯·迪尔伯恩 -优化组件查找以解决超时问题，并已实施 set_text_style_id 工具(公关#42, 公关#43)
• 斯克（科瓦列夫斯基） -修复了SVG导出格式参数，并添加了全面的页面管理工具(create_page, delete_page, rename_page, get_pages, set_current_page) (PR#32)
• Beomsu Koh -已添加 rename_node 更好地组织Figma元素的工具(PR#36)
• 东方 -改进了Zod验证 join_channel 参数(公关#29)
• 泰勒·斯密茨 -DXT包支持实施、自动化CI/CD工作流程、测试改进和错误修复(公关#17, 公关#16, 公关#13, 公关#14)
• 易夏克 -修复了构建脚本在Windows操作系统上不起作用的问题(PR#10)

📋 版本历史记录

电流：0.8.0

• 🚀 一个命令设置：通过统一启动器 npx claude-talk-to-figma-mcp 无摩擦安装。
• 🛠️ 智能环境：自动Bun检测和特定于操作系统的设置提示。
• 🛡️ CI/CD稳定性：修复了TypeScript定义和发布权限，以加快交付速度。

上一个：0.7.0

• 🎨 新工具：已添加 set_text_style_id, rename_node，以及全套页面管理工具。
• 🔧 工具修复：The set_stroke_color 工具现在可以正确接受 strokeWeight 的 0 用于创建不可见的笔划。
• 🚀 DXT软件包支持：通过Claude Desktop的扩展管理器一键安装（感谢 泰勒·斯密茨 - 公关#17)
• 📦 自动化配送：用于自动生成DXT包和发布上传的GitHub Actions工作流
• ⚡ 增强的用户体验：终端用户的安装时间从15-30分钟缩短到2-5分钟
• 🔧 开发者工具：DXT打包的新构建脚本(npm run build:dxt, npm run pack)

看 更改日志.md 查看完整的版本历史记录。

📄 许可证和信用证

许可证：MIT许可证-请参阅 许可证 文件

作者:

• Xúlio Zé - 克劳德改编 - GitHub
• 桑尼·拉祖迪 - 原始实施 - GitHub

致谢:

• 克劳德和模型上下文协议的拟人团队
• 优秀插件API的Figma社区
• Bun团队实现快速JavaScript运行时