Figma 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
   

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" 在顶层和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"
     }
   }
   

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
   

⚙️ 连接到增强代码

1. 打开 增强代码→ 工作区设置→ 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 用于常见问题和修复。

🤝 贡献

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

看 CONTRIBUTING.md 作为指导方针。

📄 许可证

该项目根据 MIT许可证.

🌐 链接

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