Figma Flow MCP

FigmaFlow MCP

AI驱动的Figma到Flutter转换器

直接在VS代码中从Figma设计生成Flutter小部件和测试

特性 • 安装 • 快速开始 • 文档

______________________________________________________________________

概述

FigmaFlow MCP是一个人工智能驱动的工具，弥合了设计和开发之间的差距。它将Figma设计转换为生产就绪的Flutter小部件和测试，所有这些都在您的VS Code工作区内。

主要特点

• 🎨 Figma集成 -直接从Figma API获取设计
• 🤖 人工智能发电 -使用GPT-4生成干净的Flutter代码
• 🧪 测试生成 -自动创建小部件测试
• 🔌 MCP协议 -基于模型上下文协议的可靠性
• 🐧 Linux优先 -对Linux开发人员的原生支持
• 🔑 安全配置 -API密钥的本地.env文件

建筑

┌─────────────────┐
│  VS Code        │
│  Extension      │
└────────┬────────┘
         │ MCP Protocol
┌────────▼────────┐
│  MCP Server     │◄──── Figma API
│  (Python)       │
└────────┬────────┘
         │
     ┌───▼───┐
     │  AI   │
     │ Model │
     └───────┘

项目结构

FigmaFlow-MCP/
├── mcp-server/          # Python MCP server
│   ├── src/
│   │   ├── mcp/         # Server core
│   │   ├── figma/       # Figma integration
│   │   ├── generators/  # Code generators
│   │   ├── ai/          # AI client
│   │   └── utils/       # Utilities
│   └── tests/
├── vscode-extension/    # TypeScript extension
│   └── src/
│       ├── commands/    # VS Code commands
│       ├── mcp/         # MCP client
│       ├── ui/          # User interface
│       └── utils/
└── plan/                # Project documentation

安装

对于用户

1. 从VS代码市场安装（即将推出）
2. 运行安装向导以配置API密钥
3. 开始生成！

面向开发者

1. 克隆存储库：

git clone https://github.com/yourusername/FigmaFlow-MCP.git
cd FigmaFlow-MCP

1. 设置MCP服务器：

cd mcp-server
poetry install
cp .env.example .env
# Edit .env with your API keys

1. 设置VS代码扩展名：

cd ../vscode-extension
npm install
npm run compile

1. 在VS Code中打开，按F5启动扩展开发主机

快速开始

1.配置API密钥

在VS Code中运行安装向导：

Cmd+Shift+P → "FigmaFlow: Setup API Keys"

2.生成小部件

Cmd+Shift+P → "FigmaFlow: Generate Flutter Widget from Figma"

输入您的Figma URL和小部件名称，代码就会生成！

文档

• 发展规划 -全面实施指南
• 产品需求文档 -产品要求文件
• MCP服务器自述文件 -服务器文档
• 扩展README -扩展文档

发展路线图

• \[x\] 第0阶段：规划与建筑
• \[/\]第一阶段：基础和设置
• \[\]第2阶段：MCP服务器核心
• \[\]第3阶段：代码生成
• \[\]第4阶段：VS代码扩展
• \[\]第5阶段：集成和测试
• \[\]第6阶段：文件编制和发布

需求

• VS Code：1.85或更高
• python：3.10或更高
• Node.js：18岁或以上
• Flutter SDK：用于测试生成的代码
• Figma账户：具有API访问权限
• OpenAI帐户：具有API访问权限

配置

该项目使用 .env 配置文件：

# .env
FIGMA_ACCESS_TOKEN=figd_xxxxx
AI_API_KEY=sk-xxxxx
MCP_SERVER_PORT=3000
LOG_LEVEL=INFO

贡献

欢迎投稿！请参阅 贡献.md 作为指导方针。

许可证

MIT许可证-请参阅 许可证 详情

支持

• 🐛 报告错误
• 💡 请求功能
• 📧 电子邮件：support@figmaflow.dev

致谢

• 内置于 模型上下文协议
• 由...驱动 开放人工智能
• 设计数据来自 图API

______________________________________________________________________

Made with ❤️ for the Flutter community