Figma MCP 服务器

一个 ModelContextProtocol 服务器，使 AI 助手能够与 Figma 文件进行交互。该服务器提供工具，用于直接通过 ModelContextProtocol 查看、评论和分析 Figma 设计。

功能

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

与 Claude 设置

1. 从 claude.ai/download 下载并安装 Claude 桌面应用程序

2. 获取 Figma API 密钥（figma.com -> 点击左上角的您的姓名 -> 设置 -> 安全）。授予 File content 和 Comments 权限。

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 的界面中查找带有可用工具数量的锤子图标，以确认服务器正在运行。

使用示例

与 Claude Desktop 开始新的聊天，并粘贴以下内容

这个 Figma 文件里有什么？

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

更实际的用法演示

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

开发设置

使用 Inspector 运行

为了开发和调试目的，您可以使用 MCP Inspector 工具。Inspector 提供了一个可视化界面，用于测试和监控 MCP 服务器交互。

访问 Inspector 文档 获取详细的设置说明和使用指南。

使用 Inspector 在本地进行测试的命令是

npx @modelcontextprotocol/inspector npx figma-mcp

本地开发

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

npm install

3. 构建项目：

npm run build

4. 对于具有自动重建功能的开发：

npm run watch

可用工具

该服务器提供以下工具：

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

每个工具都旨在提供特定的功能，用于通过 ModelContextProtocol 接口与 Figma 文件进行交互。