Figma 模型上下文协议 (MCP) 服务器

一个实现 ModelContextProtocol 的服务器，使 AI 助手能够与 Figma 文件交互。此服务器提供工具，可通过模型上下文协议直接在 Figma 文件中查看、评论和分析设计。

特性

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

使用 Claude 进行配置

1. 下载并在终端运行以下命令安装 Claude 桌面应用程序：

   curl -L "https://desktop.claude.ai/install.sh" | bash
   

2. 获取 Figma API 密钥（访问 figma.com -> 点击左上角的你的名字 -> 设置 -> 安全）。授予 文件内容 和 评论 权限范围。
3. 配置 Claude 使用 Figma 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 桌面应用。
5. 在 Claude 的界面中查找锤子图标，并确认服务器已运行。

示例用法

在新的 Claude 聊天窗口中粘贴以下内容：

这个 Figma 文件里有什么？
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

更实际的使用示例演示

请访问 loom.com 查看完整的演示。

开发设置

使用 Inspector 进行本地运行

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

请参考 Inspector 文档 获取详细的安装说明和使用指南。

在终端中运行以下命令以本地测试：

npx @modelcontextprotocol/inspector npx figma-mcp

本地开发

1. 克隆仓库：

   git clone <repository-url>
   

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 文件中的评论

每个工具都经过设计，以通过模型上下文协议界面实现与 Figma 文件的特定交互功能。