内容
# figma-to-ide
将 Figma 设计文件转换为 Claude 兼容的模型上下文协议 (MCP)，以便在 IDE、AI 代码助手（如 Copilot、Cursor）或静态生成器中使用。
> 🔧 由 [Mehmet ALP](https://www.linkedin.com/in/mehmetalp/) 创建， [Codigma.io](https://codigma.io) 和 [Rast Mobile](https://rastmobile.com) 的创始人
---
## ✨ 特性
- 接受完整的 Figma 设计 URL（例如 `https://www.figma.com/design/...`）
- 自动规范化并提取正确的文件 ID
- 从 Figma 设计数据生成 MCP（模型上下文协议）结构
- CLI 支持可视化组件结构
- 支持多个页面、嵌套框架和组件
- 将结果保存为 JSON 或在终端中显示
---
## 📦 安装
```bash
npm install -g figma-to-ide
```
或者在你的项目中本地安装：
```bash
npm install figma-to-ide
```
---
## 🚀 CLI 使用
```bash
figma-to-ide --key YOUR_FIGMA_API_KEY --file "https://www.figma.com/design/FILE_ID/Project-Name" --visualize
```
### 可选标志
| 标志 | 描述 |
|----------------|-----------------------------------------------------------|
| `--key`, `-k` | 你的 Figma 个人访问令牌 |
| `--file`, `-f` | 完整的 Figma 文件 URL 或仅文件 ID |
| `--visualize`, `-v` | 在终端中以树形结构显示组件/页面层次 |
| `--output`, `-o` | 将结果保存到文件 `output.json` |
---
## 🔁 示例
```bash
figma-to-ide -k figd_ABC123... -f "https://www.figma.com/design/uek5kq.../Project" -v -o mcp.json
```
---
## 🧠 什么是 MCP？
MCP（模型上下文协议）是一种结构化的 JSON 格式，允许 AI 编码助手理解前端项目的布局和设计结构。
每个组件具有：
```json
{
"type": "component",
"name": "Header",
"description": "Generated from Figma",
"children": ["Logo", "NavBar"],
"props": {},
"source": "Figma",
"filePath": "/Home/Header.tsx",
"parent": null
}
```
---
## 📄 输出示例
```json
{
"type": "project",
"source": "Figma",
"name": "Design System",
"pages": [
{
"name": "Home",
"components": [
{
"name": "Header",
"type": "FRAME",
"children": ["Logo", "Nav"]
}
]
}
],
"meta": {
"lastModified": "2025-03-29T10:00:00Z"
}
}
```
---
## 🌍 项目链接
- 🔗 GitHub: [github.com/rastmob/figma-to-ide](https://github.com/rastmob/figma-to-ide)
- 🌐 网站: [https://codigma.io](https://codigma.io)
- 🧑💻 作者: [Mehmet ALP](https://www.linkedin.com/in/mehmetalp/)
- 🐦 Twitter: [@mhmtakifalp](https://twitter.com/mhmtakifalp)
- 💼 公司: [Rast Mobile](http://linkedin.com/company/rastmobile)
---
## 📄 许可证
MIT © Mehmet ALP – [mehmet.alp@rastmobile.com](mailto:mehmet.alp@rastmobile.com)
MCP 市场