AI导哈

Figma转React组件工具

通过MCP协议自动将Figma设计转换为React组件，提升前端开发效率。

  • by eldersongamma
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 eldersongamma/figma-mcp

使用说明

MCP Figma Bridge 🎨→⚛️（可翻译为）：MCP Figma 桥接工具 🎨→⚛️

站在中间 Figma（注：Figma是一个用于设计和协作的数字工具，常用于UI/UX设计领域，此处直接保留原英文名，因为它是专有名词） e React 使用 MCP（模型上下文协议） 用于根据Figma设计自动生成React组件。

🚀 快速开始（5分钟）

# Clone o repositório
git clone https://github.com/seu-usuario/mcp-fig.git
cd mcp-fig

# Instale as dependências
npm install

# Configure o .env (veja docs/03-ENV_TEMPLATE.md)
cp .env.example .env
# Edite .env e adicione seu token do Figma

# Inicie o servidor
npm start

快点！ 服务器将在 http://localhost:3331 🎉（庆祝、欢呼）

📚 文档

🎯 从这里开始

顺序 文件 描述 时间
（无） （无） （无） （无）
安装与首次使用 5分钟 **[ 2️⃣
详细分步指南 15分钟 **[ 3️⃣

| 如何设置环境变量 | 2分钟 |

📖 参考文献 | 文件 | 描述 | |-----------|-----------| | 项目结构 文件和文件夹的组织 | 建筑学 | 完整的技术文档（700+行） | | 更新日志

| 版本和更改历史 |

🎯 这个项目是什么？

这个项目允许你： ✅ Figma的设计咨询
通过REST API ✅ React 组件
自动使用人工智能（AI） ✅ 使用Ant Design
- 100%忠于原始设计 ✅ 节省时间

- 从2-4小时缩短至5-15分钟

Figma Design → MCP Server → Cursor IDE + IA → Componente React

它是怎么运作的？

💡 使用示例

curl http://localhost:3331/figma/SEU_FILE_ID/pages

1. 列出Figma文件中的页面

/use figma
/generate componente React baseado no design do Figma
fileId=SEU_FILE_ID node-id=NODE_ID

2. 通过Cursor IDE生成组件

import DetailsForm from "./DetailsForm";

function App() {
  const handleSubmit = (data) => {
    console.log("Dados:", data);
  };

  return <DetailsForm onSubmit={handleSubmit} />;
}

3. 使用生成的组件

  • 🛠️ 技术 Node.js + 快递
  • - HTTP服务器 Figma API
  • - 访问设计 MCP协议
  • - 标准化沟通 React + TypeScript
  • - 生成的组件 Ant Design（蚂蚁设计）

- 用户界面组件库/设计系统

📡 API 接口端点 | 终点 | 描述 | |----------|-----------| GET /figma/:fileId/pages | | 列出文件中的所有页面 | GET /figma/:fileId/nodes/:nodeId | | 查找特定组件 | GET /figma/:fileId |

| 返回完整文件 | 看看这个 API的完整文档

以获取更多详情。

mcp-fig/
├── 📖 docs/                        # Documentação completa
│   ├── 01-GETTING_STARTED.md      # Início rápido
│   ├── 02-SETUP.md                # Setup detalhado
│   ├── 03-ENV_TEMPLATE.md         # Configuração
│   ├── 04-PROJECT_STRUCTURE.md    # Estrutura
│   ├── 05-ARQUITETURA.md          # Docs técnicas
│   └── 06-CHANGELOG.md            # Versões
│
├── 💻 server.js                   # Servidor MCP
├── ⚛️ DetailsForm.tsx             # Componente exemplo
├── 📝 App.example.tsx             # Como usar
│
├── ⚙️ .env.example                # Template de config
├── 🚫 .gitignore                  # Proteção
├── 📜 LICENSE                     # MIT
└── 📦 package.json                # Dependências

📂 项目结构

🎨 示例组件 DetailsForm.tsx 该项目包括

- 一个从Figma生成的完整“货物详情”表单。

  • 特点：
  • ✅ 7个部分已整理完毕
  • ✅ 可编辑的文档表格
  • ✅ 表单验证
  • ✅ 响应式布局
  • ✅ 完整的TypeScript

✅ Ant Design 组件 看看 `App.example.tsx` 翻译成中文可以是：“App 示例文件（使用 TypeScript 编写的 React 组件）”。不过，具体的翻译可能会根据上下文和项目规范有所调整，但大意是表达这是一个用于展示或示例的 App 组件文件，使用了 TypeScript 编写，并且可能是 React 项目中的一个组件文件

作为使用示例。

🔧 在 Cursor IDE 中进行设置 ~/.cursor/mcp.json添加到文件

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/caminho/completo/para/mcp-fig/server.js"],
      "env": {
        "FIGMA_TOKEN": "seu_token_aqui",
        "PORT": "3331"
      }
    }
  }
}

**：**重要 server.js

使用绝对路径到 看看 完整设置

以获取详细说明。

🚨 故障排除

lsof -ti:3331 | xargs kill -9
npm start

正在使用的端口

  • 认证错误 .env
  • 检查令牌是否正确

在Figma中生成一个新令牌

npm install

未找到模块 但解决方案在于：

设置 - 故障排除

  • 📈 路线图
  • [ ] API响应缓存
  • [ ] 导出资源（图像）
  • [ ] 支持 Vue.js 和 Angular
  • [ ] 生成单元测试
  • [ ] 设计令牌提取

[ ] 双向同步 看看这个 完整的更新日志

以获取更多详情。

🤝 贡献

  • 欢迎贡献！请随意：
  • 🐛 通过 Issues 报告错误
  • 💡 提出新功能建议
  • 🔧 提交拉取请求（Pull Requests）

📖 改善文档 看看 建筑学 - 如何做出贡献

以获取更多信息。

🔒 安全 ⚠️（警告符号，无具体文字含义，通常用于表示警告或注意）

  • 重要提示： .env 永远不要提交这个文件
  • 带着你的令牌
  • 这个服务器仅用于本地开发
  • 不要将服务器暴露在互联网上

对于生产，生成组件并仅提交代码

📝 许可证 MIT 许可证 - 查看 许可证

以了解更多详情。

👨‍💻 作者 由……用心打造

Elderson Gamma（埃德森·伽马）

  • 📞 支持文件/文档 :
  • **文档/**问题 ：
  • **GitHub Issues（GitHub问题）**讨论 :

GitHub 讨论区

⭐ 表达你的支持

如果这个项目对你有帮助，请在GitHub上给它点个⭐吧！

相关 MCP