🚀 Figma MCP 服务器 + Augment Code 集成

现在有一个更简单的选项：https://github.com/shedytee/Figma-MCP-Augment-Code-Guide-Local-HTTP-mode-/blob/main/README.md

本项目展示了如何连接一个模型上下文协议（MCP）服务器到Figma API，并将其与Augment Code集成以增强您的开发工作流程。

---

✨ 特性

✅ 构建一个MCP服务器，该服务器：

• 查询Figma文件
• 将Figma数据暴露给兼容MCP的接口
• 作为自定义工具集成到Augment Code中

✅ 使用：

• @modelcontextprotocol/sdk
• figma-js
• zod
• dotenv

---

📦 安装指南

1. 克隆仓库

   git clone https://github.com/shedytee/mcp-figma-augmentcode-integration.git
   cd mcp--figma-augmentcode-integration
   

2. 安装依赖

   安装所需的NPM包：

   npm install @modelcontextprotocol/sdk figma-js zod dotenv
   

3. 配置环境变量

   cp .env.example .env
   

   填写：

   • FIGMA_TOKEN → 您的Figma API令牌
   • FIGMA_FILE_ID → 您的Figma文件ID
   • MCP_PORT → 通常为3000

4. 更新 package.json

   在您的package.json中，在顶层添加"type": "module"，并在"scripts"下添加start:mcp脚本：

   {
     "name": "mcp-figma-augmentcode-integration",
     "version": "1.0.0",
   + "type": "module",
     "scripts": {
       "start:mcp": "node figma-mcp-server.js"
     },
     "dependencies": {
       "@modelcontextprotocol/sdk": "^1.17.1",
       "figma-js": "^1.16.1-0",
       "zod": "^3.25.76",
       "dotenv": "^17.2.1"
     }
   }
   

5. 在 figma-mcp-server.js 中添加启动日志

   确保您的脚本以控制台消息结束，以便您可以看到启动成功。例如，在连接后：

   const transport = new StdioServerTransport();
   await server.connect(transport);
   + console.log(`MCP Server 正在端口 ${MCP_PORT} 上运行`);
   

6. 运行MCP服务器

   npm run start:mcp
   

   您应该看到：

   MCP Server 正在端口 3000 上运行
   

---

⚙️ 连接到Augment Code

1. 打开 Augment Code → 工作区设置 → MCP

2. 添加一个新的MCP服务器：

   • 名称: figma
   • 命令:

     node figma-mcp-server.js
     

     （从您的工作区根目录运行）

3. 在 环境变量 下添加：

   • FIGMA_TOKEN
   • FIGMA_FILE_ID
   • MCP_PORT

4. 保存 并 开启 “figma” 服务器。 查看日志中的以下内容：

   [dotenv@…] 注入环境变量…
   MCP Server 正在端口 3000 上运行
   

   一旦看到它，图标会变成绿色。

---

💬 示例提示

参见prompts.md获取现成的聊天提示。示例包括：

• 要求figma获取完整的文件数据。
• 使用figma从Figma API获取最新文件。
• 要求figma提供名为ButtonPrimary组件的详细信息。
• 使用figma工具显示设计文件中的所有组件。

---

🗂 示例代码

此仓库包括figma-mcp-server.js，这是一个将MCP服务器连接到Figma API的工作示例。

要本地运行：

npm run start:mcp

---

⚠ 重要注意事项

🛡️ 包含空格的目录

如果您的工作区路径包含空格（例如My Projects），请将命令参数用引号括起来：

node "figma-mcp-server.js"

或者——
将您的项目移动到没有空格的路径以避免引用：

C:/Users/yourname/Dev/NoSpacesRepo/

---

🔧 故障排除

参见troubleshooting.md获取常见问题及其解决方法。

---

🤝 贡献

有任何想法、改进或问题吗？
请打开一个问题或提交一个拉取请求——欢迎贡献！

参见CONTRIBUTING.md获取指南。

---

📄 许可证

本项目根据MIT许可证授权。

---

🌐 链接

• 模型上下文协议（MCP）
• Figma API
• Augment Code