🚀 Figma MCP Server + Augment Code Integration

🚀 Figma MCP 服务 + Augment Code 集成

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

本项目展示如何将 Model Context Protocol（MCP） 服务连接到 Figma API，并与 Augment Code 集成，从而大幅提升开发工作流效率。

---

✨ 功能

✅ 构建一个 MCP 服务，用于：

• 查询 Figma 文件
• 通过兼容 MCP 的接口公开 Figma 数据
• 作为自定义工具集成到 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 running on port ${MCP_PORT}`);
   

6. 运行 MCP 服务

   npm run start:mcp
   

   你应该会看到：

   MCP Server running on port 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@…] injecting env …
   MCP Server running on port 3000
   

   看到后，图标会变为绿色。

---

💬 示例提示词

参阅 prompts.md，获取可直接使用的聊天提示词。示例：

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

---

🗂 示例代码

此仓库包含 figma-mcp-server.js，这是一个连接到 Figma API 的 MCP 服务示例，可直接运行。

要在本地运行：

npm run start:mcp

---

⚠ 重要说明

🛡️ 含空格的目录

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

node "figma-mcp-server.js"

—或—
将项目移至不含空格的路径，以避免使用引号：

C:/Users/yourname/Dev/NoSpacesRepo/

---

🔧 故障排除

请参阅 troubleshooting.md，了解常见问题及解决方法。

---

🤝 参与贡献

有想法、改进建议或疑问？
请提交 issue 或拉取请求——欢迎贡献！

请参阅 CONTRIBUTING.md 了解指南。

---

📄 许可证

本项目采用 MIT 许可证。

---

🌐 链接

• Model Context Protocol（MCP）
• Figma API
• Augment Code