内容
# 🚀 Figma MCP 服务器 + Augment Code 集成
更简单的选项现已在以下位置提供：https://github.com/shedytee/Figma-MCP-Augment-Code-Guide-Local-HTTP-mode-/blob/main/README.md
本项目展示了如何将 <a href="https://modelcontextprotocol.io">模型上下文协议（MCP）</a> 服务器连接到 <a href="https://www.figma.com/developers/api">Figma API</a>，并与 <a href="https://www.augmentcode.com/">Augment Code</a> 集成，以增强您的开发工作流程。
---
## ✨ 功能特点
✅ 构建一个MCP服务器：
- 查询 Figma 文件
- 向MCP兼容的接口公开Figma数据
- 作为自定义工具集成到 Augment Code 中
✅ 使用：
- [`@modelcontextprotocol/sdk`](https://github.com/modelcontextprotocol/typescript-sdk)
- [`figma-js`](https://github.com/jongold/figma-js)
- [`zod`](https://github.com/colinhacks/zod)
- [`dotenv`](https://github.com/motdotla/dotenv)
---
## 📦 设置说明
1. **克隆仓库**
```bash
git clone https://github.com/shedytee/mcp-figma-augmentcode-integration.git
cd mcp-figma-augmentcode-integration
```
2. **安装依赖项**
安装所需的NPM包：
```bash
npm install @modelcontextprotocol/sdk figma-js zod dotenv
```
3. **配置环境变量**
```bash
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` 脚本：
```diff
{
"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` 中添加启动日志**
确保您的脚本以控制台消息结尾，以便您看到启动成功。例如，在连接后：
```diff
const transport = new StdioServerTransport();
await server.connect(transport);
+ console.log(`MCP Server running on port ${MCP_PORT}`);
```
6. **运行MCP服务器**
```bash
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`](./prompts.md) 以获取现成的聊天提示。示例：
- 请求 figma 获取完整的文件数据。
- 使用 figma 从 Figma API 获取最新的文件。
- 向 figma 请求有关名为 `ButtonPrimary` 的组件的详细信息。
- 使用 figma 工具显示设计文件中的所有组件。
---
## 🗂 示例代码
此仓库包含 [`figma-mcp-server.js`](./figma-mcp-server.js)，这是一个与Figma API连接的MCP服务器的工作示例。
要在本地运行：
```bash
npm run start:mcp
```
---
## ⚠ 重要注意事项
### 🛡️ 包含空格的目录
如果您的 **工作区路径** 包含空格（例如 `My Projects`），请用引号括住命令参数：
```text
node "figma-mcp-server.js"
```
—or—
将您的项目移动到不包含空格的路径以避免引用：
```
C:/Users/yourname/Dev/NoSpacesRepo/
```
---
### 🔧 故障排除
请参阅 [`troubleshooting.md`](./troubleshooting.md) 以获取常见问题和解决方案。
---
## 🤝 贡献
有想法、改进或疑问吗？
请打开一个 [问题](https://github.com/shedytee/mcp-figma-augmentcode-integration/issues) 或提交拉取请求 - 欢迎贡献！
请参阅 [`CONTRIBUTING.md`](./CONTRIBUTING.md) 以获取指南。
---
## 📄 许可证
该项目根据 [MIT 许可证](./LICENSE) 获得许可。
---
## 🌐 链接
- <a href="https://modelcontextprotocol.io">模型上下文协议（MCP）</a>
- <a href="https://www.figma.com/developers/api">Figma API</a>
- <a href="https://www.augmentcode.com/">Augment Code</a>
MCP 市场