Figma Augmentcode MCP

🚀 Figma MCP服务器+增强代码集成

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

此项目显示了如何连接 模型上下文协议（MCP） 服务器到 图API 并将其与 增强代码 增强您的开发工作流程。

______________________________________________________________________

✨ 特性

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

• 查询Figma文件
• 将Figma数据暴露到MCP兼容接口
• 作为自定义工具集成到增强代码中

✅ 使用：

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

______________________________________________________________________

📦 安装说明

1. 克隆仓库

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

1. 安装依赖项

安装所需的NPM软件包：

   npm install @modelcontextprotocol/sdk figma-js zod dotenv

1. 配置环境变量

   cp .env.example .env

填写：

- FIGMA_TOKEN → 您的Figma API代币 - FIGMA_FILE_ID → 您的Figma文件ID - MCP_PORT → 通常 3000

1. 更新 package.json

在你的 package.json，添加 "type": "module" 在顶层和a start:mcp 脚本下 "scripts":

   {
     "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"
     }
   }

1. 将启动日志添加到 figma-mcp-server.js

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

   const transport = new StdioServerTransport();
   await server.connect(transport);
   + console.log(`MCP Server running on port ${MCP_PORT}`);

1. 运行MCP服务器

   npm run start:mcp

您应该看到：

   MCP Server running on port 3000

______________________________________________________________________

⚙️ 连接到增强代码

1. 打开 增强代码→ 工作区设置→ MCP

1. 添加新的MCP服务器：

- 姓名： figma - 命令：

     node figma-mcp-server.js

（从工作区根目录运行）

1. 在...之下 环境变量，添加：

- FIGMA_TOKEN - FIGMA_FILE_ID - MCP_PORT

1. 保存 和 打开开关 “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 用于常见问题和修复。

______________________________________________________________________

🤝 贡献

有想法、改进或问题吗？\ 请打开 问题 或者提交拉取请求——欢迎投稿！

看 CONTRIBUTING.md 作为指导方针。

______________________________________________________________________

📄 许可证

该项目根据 MIT许可证.

______________________________________________________________________

🌐 链接

• 模型上下文协议（MCP）
• 图API
• 增强代码