关键词

Figma集成设计自动化AI设计UI/UX工具

项目简介

该项目是一个基于 Model Context Protocol (MCP) 的实现，旨在作为 Claude Desktop（一个支持 MCP 的大型语言模型客户端）和 Figma 设计工具之间的桥梁。它允许 Claude Desktop 通过标准化的协议与 Figma 文档进行交互，执行创建、修改、查询设计元素等操作，从而赋能 AI 驱动的设计工作流。

该项目采用模块化架构，包含三个主要部分：

  1. Figma MCP 服务器: 运行在用户本地，通过 Stdio 协议与 Claude Desktop 通信，实现了 MCP 协议规范，注册并管理可供 Claude 调用的工具 (Tools) 和提示 (Prompts)。
  2. WebSocket 服务器: 一个独立的进程，作为 MCP 服务器和 Figma 插件之间的通信通道。
  3. Figma 插件: 运行在 Figma 环境内，通过 WebSocket 与 WebSocket 服务器通信，接收 MCP 服务器转发过来的指令，并调用 Figma 的插件 API 执行实际的设计操作。

主要功能点

该 MCP 实现向 Claude 提供了与 Figma 交互的丰富能力，主要包括：

  • 文档与选择信息获取: 获取当前 Figma 文档、页面信息，或当前用户选择的节点信息。
  • 节点信息查询: 根据节点 ID 获取详细的节点属性、层级关系等信息。
  • 节点创建: 创建矩形、框架、文本、椭圆、多边形、星形、向量、线条等基本设计元素。
  • 节点修改: 修改节点的填充色、描边色、位置、尺寸、圆角、应用效果和样式等属性。
  • 文本操作: 设置文本内容、字体、字号、字重、行高、字间距、段间距、文本大小写、文本装饰，以及扫描文本节点、批量修改文本内容。
  • 组件操作: 创建组件实例。
  • 结构操作: 分组、解组、展平节点，插入子节点到父节点。
  • 资源获取: 获取文档内的样式、本地组件和团队库组件信息。
  • 图像导出: 导出指定节点为图片。
  • Auto Layout 配置: 配置框架或组的 Auto Layout 属性。
  • 通道连接管理: 连接到指定的 WebSocket 通信通道，实现 MCP 服务器与 Figma 插件之间的绑定。

安装步骤

请确保已安装 Claude Desktop、Figma Desktop 和 Bun。

  1. 克隆仓库: 
    git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.git
cd claude-talk-to-figma-mcp
  2. 安装依赖: 
    bun install
  3. 构建项目: 
    bun run build
  4. 配置 Claude Desktop: 运行配置脚本。该脚本会自动检测您的操作系统，找到 Claude Desktop 的配置文件（通常位于用户应用支持目录下），备份现有配置，并添加或修改 MCP 配置条目，告诉 Claude 如何启动此 MCP 服务器。 
    bun run configure-claude
    配置完成后，请重启 Claude Desktop 使配置生效。
  5. 安装 Figma 插件: 本项目包含一个自定义的 Figma 插件，需要手动安装到 Figma 中：
    • 打开 Figma Desktop。
    • 进入 菜单 > 插件 > 开发 > 新插件...。
    • 选择 "从 Manifest 文件导入插件"。
    • 浏览文件系统，选择本项目仓库中 'src/claude_mcp_plugin/src/claude_mcp_plugin/manifest.json' 文件。 插件将出现在您的开发插件列表中。

MCP 服务器配置 (供 Claude 客户端使用)

对于 MCP 客户端（如 Claude Desktop），需要配置如何启动此 MCP 服务器进程。'bun run configure-claude' 脚本已自动完成此步骤。

配置信息大致如下（这是给 MCP 客户端程序看的，您通常无需手动编辑）：

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx", // 或 "bun"
      "args": ["claude-talk-to-figma-mcp@latest"] // 实际执行的命令及其参数
      // 其他可选配置，如 name, description, version
    }
  }
}
  • 'command': 客户端用于启动 MCP 服务器进程的可执行文件或命令。
  • 'args': 传递给 'command' 的参数。在这里，它指示使用 'npx' 或 'bun' 来运行本项目作为已安装的 npm 包。

用户无需直接与此配置交互，了解其存在和作用即可。

基本使用方法

完成安装和配置后，即可开始使用：

  1. 启动 WebSocket 服务器: 打开终端，导航到项目根目录，运行以下命令。这个服务器负责 MCP 和 Figma 插件之间的通信。 
    bun socket
    您可以访问 'http://localhost:3055/status' 检查服务器是否正在运行。保持此终端窗口开启。
  2. 连接 Figma 插件到服务器:
    • 在 Figma 中打开您的设计文件。
    • 运行安装好的 Claude MCP Plugin（通过 菜单 > 插件 > 开发 > Claude MCP Plugin）。
    • 插件界面会显示一个通道 ID (Channel ID)。复制这个 ID。确保插件已连接到 WebSocket 服务器（默认端口 3055）。
  3. 在 Claude Desktop 中使用:
    • 打开 Claude Desktop。
    • 在 MCP 选择器中选择 "ClaudeTalkToFigma"。
    • 在对话框中，输入指令告诉 Claude 连接到 Figma 插件所在的通道，例如： 
      Talk to Figma, channel {在这里粘贴复制的通道 ID}
    • 一旦连接成功，您就可以开始向 Claude 发出指令，让它使用可用的工具与您的 Figma 文件进行交互了！例如："Get information about the current selection" 或 "Create a rectangle at (0, 0) with size 100x50".

信息

分类

桌面与硬件

访问项目