Figma MCP

🚀 Figma MCP 服务器

Figma MCP 服务器是一个支持 AI 助手与 Figma 文件交互的 ModelContextProtocol 服务器。它能提供一系列工具，让用户通过 ModelContextProtocol 直接在聊天中查看、注释和分析 Figma 设计。

🚀 快速开始

启动一个新的 Claude 聊天，粘贴以下内容，即可查看 Figma 文件内容：

这个 Figma 文件里有什么？

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

观看更实际的使用示例：视频链接

✨ 主要特性

• 通过提供 URL 将 Figma 文件添加到 Claude 聊天中
• 阅读和发布 Figma 文件上的评论

📦 安装指南

在 Claude 中配置

1. 下载并安装 Claude 桌面应用，从 claude.ai/download 获取。
2. 获取 Figma API 密钥（访问 figma.com 后点击左上角你的名字 -> 设置 -> 安全）。授予 文件内容 和 评论 权限范围。
3. 配置 Claude 使用 Figma MCP 服务器。
   • 如果你是第一次设置 MCP 服务器，运行以下命令在终端：

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

- 如果不是第一次，将 `figma-mcp` 模块复制到你的 `claude_desktop_config.json` 文件中。

4. 重启 Claude Desktop 应用。
5. 在 Claude 的界面中查找锤子图标（显示可用工具数量）以确认服务器是否运行。

开发环境设置

使用 Inspector 进行调试

为了开发和调试目的，你可以使用 MCP 检查器工具。检查器提供一个可视化界面用于测试和监控 MCP 服务器交互。 访问 Inspector 文档 获取详细的安装和使用说明。 在终端运行以下命令进行本地测试：

npx @modelcontextprotocol/inspector npx figma-mcp

本地开发

1. 克隆仓库
2. 安装依赖项：

npm install

3. 构建项目：

npm run build

4. 开发时自动重建：

npm run watch

💻 使用示例

基础用法

启动一个新的 Claude 聊天，粘贴以下内容：

这个 Figma 文件里有什么？

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

📚 详细文档

可用工具

服务器提供的工具包括：

• add_figma_file：通过提供 URL 将 Figma 文件添加到上下文
• view_node：获取 Figma 文件中特定节点的缩略图
• read_comments：获取 Figma 文件上的所有评论
• post_comment：在 Figma 文件上的一个节点发布评论
• reply_to_comment：回复现有评论