Figma MCP Server 使用说明

项目简介

Figma MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在使 AI 助手能够访问和操作 Figma 设计文件。通过此服务器，你可以让 AI 助手查看 Figma 文件内容、添加评论、回复评论等，从而实现更智能的设计协作流程。

主要功能点

• 连接 Figma 文件到 AI 助手: 通过提供 Figma 文件 URL，将文件添加到 AI 助手的上下文，让助手理解文件内容。
• 查看 Figma 节点: 获取 Figma 文件中特定节点（例如画布、图层）的缩略图，方便 AI 助手理解设计元素。
• 读取 Figma 评论: 获取 Figma 文件中的所有评论，帮助 AI 助手理解设计反馈和讨论。
• 发布 Figma 评论: 在 Figma 文件中的指定位置或节点上发布评论，实现 AI 助手参与设计讨论。
• 回复 Figma 评论: 回复 Figma 文件中已有的评论，支持 AI 助手进行更深入的交流。

安装步骤

1. 安装 Claude 桌面应用: 访问 claude.ai/download 下载并安装 Claude 桌面应用程序。
2. 获取 Figma API Key:
   • 访问 figma.com 并登录你的 Figma 账号。
   • 点击页面左上角的你的用户名，然后选择 "Settings"。
   • 在 "Security" 选项卡中，创建新的 "Personal access token"。
   • 确保为 API Key 授予 'File content' 和 'Comments' 权限。
3. 配置 Claude 使用 Figma MCP 服务器:
   • 如果是第一次配置 MCP 服务器，请在终端运行以下命令，将配置信息写入 Claude 的配置文件 'claude_desktop_config.json'：

     echo '{
       "mcpServers": {
         "figma-mcp": {
           "command": "npx",
           "args": ["figma-mcp"],
           "env": {
             "FIGMA_API_KEY": "<YOUR_API_KEY>"  // 将 <YOUR_API_KEY> 替换为你获取的 Figma API Key
           }
         }
       }
     }' > ~/Library/Application\ Support/Claude/claude_desktop_config.json
     

   • 如果已经配置过其他 MCP 服务器，只需将上面的 'figma-mcp' 代码块复制到你的 'claude_desktop_config.json' 文件中的 'mcpServers' 字段下。
4. 重启 Claude 桌面应用: 重启 Claude 桌面应用程序，使配置生效。
5. 验证服务器运行状态: 在 Claude 的界面中，查找带有工具数量的锤子图标，确认 Figma MCP 服务器已成功运行。

基本使用方法

1. 启动与 Claude 的对话: 在 Claude 桌面应用中开始一个新的聊天。
2. 使用 Figma 文件: 在聊天中粘贴 Figma 文件链接，例如：

   What's in this figma file?
   
   https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC
   

   Claude 将会使用 Figma MCP Server 提供的工具来理解和操作该 Figma 文件。

开发配置 (开发者可选)

如果你需要本地开发或调试 Figma MCP Server，可以参考以下步骤：

1. 克隆仓库: 'git clone https://github.com/MatthewDailey/figma-mcp'
2. 安装依赖: 'npm install'
3. 构建项目: 'npm run build'
4. 开发模式 (自动重建): 'npm run watch'
5. 使用 MCP Inspector 调试: 'npx @modelcontextprotocol/inspector npx figma-mcp' (需要先全局安装 '@modelcontextprotocol/inspector': 'npm install -g @modelcontextprotocol/inspector')