FindMCP Logo FindMCP.info
🚀 Figma MCP Server + Augment Code Integration

🚀 Figma MCP Server + Augment Code Integration

site icon
2025.05.04 0
JavaScript开发效率设计工具集成开发效率
该项目展示了如何将Model Context Protocol (MCP)服务器连接到Figma API，并与Augment Code集成，以增强开发工作流程。该MCP服务器能够查询Figma文件，将Figma数据暴露给MCP兼容的接口，并直接集成到Augment Code作为自定义工具。
View on GitHub

Overview

✨ 核心功能

  • 构建一个MCP服务器，能够查询Figma文件
  • 将Figma数据暴露给MCP兼容的接口
  • 直接集成到Augment Code作为自定义工具

📦 使用场景

  • 开发工作流程的增强
  • Figma设计数据的查询和管理
  • 与Augment Code的集成开发

⚙️ 工具列表

  • @modelcontextprotocol/sdk: MCP的TypeScript SDK
  • figma-js: Figma API的JavaScript客户端
  • zod: 用于数据验证
  • dotenv: 环境变量管理

⚠ 常见问题解答

  • 项目目录名称中不能包含空格，否则需要在Augment Code命令中引用脚本路径
  • 建议将项目移动到无空格的路径中

📦 使用教程

使用依赖

  1. 克隆仓库

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

  1. 安装依赖

bash npm install

  1. 配置环境变量

复制示例文件并填写你的值：

bash cp .env.example .env

设置： - FIGMA_TOKEN: 你的Figma API令牌 - FIGMA_FILE_ID: 你的Figma文件ID - MCP_PORT: 通常为3000

安装教程

  1. 运行MCP服务器

bash npm run start:mcp

你应该看到： MCP Server running on port 3000

调试方式

  1. 打开Augment Code → Workspace Settings → MCP
  2. 添加一个新的MCP服务器：
  3. 名称: figma

  4. 命令: node "C:/path/to/your/project/figma-mcp-server.js"

  5. 在Augment Code中添加环境变量：

  6. FIGMA_TOKEN
  7. FIGMA_FILE_ID

  8. MCP_PORT

  9. 重启Augment Code以应用更改。

许可证

该项目遵循 Other 开源许可条款，请参阅 Other 了解完整条款。