金大哥 - figma-flutter-mcp MCP 详情

article

README

🚀 Figma to Flutter MCP 服务器

🌐 本项目支持以下语言版本：

本项目可让你在编码代理中利用 Figma 的丰富数据，以 Flutter 的方式实现设计！

借助 MCP 服务器，你可以使用 Cursor 或其他 AI 编码工具，访问 Figma 的丰富文件、数据、组件等资源。

📋 目录

🎥 视频演示
📝 快速开始
📚 工作原理
🛠️ 使用方法
🧱 基本工作流程
- 🤖 AI 编码代理辅助
- ⚠️ 为什么 SVG 资产在屏幕生成时无法使用
⚠️ 免责声明
🙌🏼 致谢
🧱 其他框架
🔑 许可证
🙋‍♂️ 作者
- Muhammad Hamza

🎥 视频演示

视频展示了 Figma Flutter MCP 的几乎所有功能，并使用了真实的 Figma 设计。

英文视频：https://youtu.be/o_GezwAlXlU
乌尔都语/印地语视频：https://youtu.be/mepPWpIZ61M

📝 快速开始

你可以查看详细的快速开始文档，或观看演示视频进行快速上手。由于这是首个版本，还有很多改进空间，你可以查看问题列表，了解待解决或待改进的问题。

📚 工作原理 | 详情请见此处

组件/小部件

✅ 提取 Figma 节点数据：布局、样式、尺寸、颜色、文本内容等。
✅ 分析结构：子元素、嵌套组件、视觉重要性。
✅ 提供指导：推荐 Flutter 小部件和实现模式。
❌ 不生成实际的 Flutter 代码文件。

屏幕

✅ 提取屏幕元数据：设备类型、方向、尺寸。
✅ 识别区域：头部、底部、导航、内容区域。
✅ 分析导航：标签栏、应用栏、抽屉、导航元素。
✅ 提供 Scaffold 指导：推荐 Flutter 屏幕结构。
❌ 不生成实际的 Flutter 屏幕。

由于本项目仅辅助 AI 编写 Flutter 代码，因此你的提示越清晰，得到的结果就越好。

🛠️ 使用方法

以下步骤展示了最小化的使用和设置说明：

🔑 Figma API 密钥

你需要创建一个 Figma 访问令牌才能使用此服务器。有关如何创建 Figma API 访问令牌的说明，请参阅此处。

🏹 在 Cursor 中使用 MCP

获取 FIGMA API 密钥后，你可以按以下步骤在 Cursor 中设置 MCP：

按下 CMD + Shift + P（Windows 系统按 Ctrl）。
输入 "Open MCP Settings"。
点击 "Add new MCP"。
粘贴以下 JSON 对象。

MacOS/Linux

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "npx",
      "args": ["-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Figma Flutter MCP": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-flutter-mcp", "--figma-api-key=YOUR-API-KEY", "--stdio"]
    }
  }
}

⚠️ 重要提示

如果你将此 MCP 作为 npm 包安装，请确保将其更新到最新版本。有时，它会缓存旧版本，并显示诸如 "无法使用工具调用" 或 "Figma API 密钥设置无效" 等错误。

🚀 本地测试快速开始

前提条件

Node.js 18+
Figma API 密钥（访问令牌）
支持 MCP 的 Cursor AI IDE
Flutter SDK

为了进行快速本地测试，你可以通过 HTTP 而不是 stdio 运行服务器：

# 克隆并设置
git clone <your-repo-url> figma-flutter-mcp
cd figma-flutter-mcp
npm install

# 创建包含 Figma API 密钥的 .env 文件
echo "FIGMA_API_KEY=your-figma-api-key-here" > .env

# 启动 HTTP 服务器进行本地测试
npm run dev

然后将以下内容添加到你的 MCP 客户端配置中：

{
  "mcpServers": {
    "local-figma-flutter": {
      "url": "http://localhost:3333/mcp"
    }
  }
}

详细说明请参阅 CONTRIBUTING.md。

🧱 基本工作流程

🤖 AI 编码代理辅助

为了获得更好的结果，你可以根据自己的 AI 编码代理，在以下文件中设置一些说明：

Cursor：.cursor/rules/fluttering.mdc
Claude：CLAUDE.md
Gemini CLI：GEMINI.md

这样，你的 AI 代理将使用 MCP 的输出，确保 Flutter 代码符合你的项目要求和结构。你可以查看我用于测试的Cursor 规则示例。

设置主题和排版：最有效的方法是在 Figma 中创建两个包含主题颜色和排版样本的框架。例如：

主题设置示例排版设置示例

Figma 桌面版：选择框架并按下 CMD + L 或 Ctrl + L。
Figma 网页版：选择框架并复制 URL。

💡 使用建议

有效的 URL 应包含文件 ID 和节点 ID 参数。

"从 <figma_link> 设置 Flutter 主题，包括颜色和排版。

小部件生成：最有效的方法是在 Figma 中使用组件。例如：

这个按钮有 8 个变体，你可以提示是否需要变体。

"在 Flutter 中创建这个小部件 <figma_link>，目前仅设置 2 个变体，并将文件拆分为更小的部分以提高代码可读性。

如果你在 Figma 中没有使用组件，可以使用框架，并提示 AI 将其作为小部件处理，其余的交给 AI 处理。

全屏生成：如果有任何图像资产，它将自动导出并放在 assets/ 目录中，并更新 pubspec.yaml。

"从这个 Figma 链接 <figma_link> 创建全屏界面，确保代码通过拆分为更小的文件来提高可读性。

资产导出：

图像资产：在生成屏幕时将自动工作。

"从 Figma 导出这个图像资产 <figma_link>

SVG 资产：不会自动工作，下面会详细解释。

"从 Figma 导出这个 SVG 资产：<figma_link>

⚠️ 为什么 SVG 资产在屏幕生成时无法使用

在 Figma 中，矢量图形包括图标和钢笔工具绘制的形状，因此批量导出可能会抓取到不需要的节点；建议单独导出 SVG。此过程仍然可以通过将 SVG 导出到 assets/svg/ 目录并更新 pubspec.yaml 来节省大量时间。

⚠️ 免责声明

Figma 设计：由于我们使用 Figma 的 API 来获取节点及其详细信息，因此你的设计越好，AI 对其的理解和处理就越准确，例如使用自动布局、优先使用框架而非组、保持全局一致的对齐方式。
使用场景：在现阶段，强烈建议不要将其用于开发可扩展的应用程序，而是尝试将其用于 MVP、小型和解释性任务。
速率限制：大量使用可能会触发 Figma 的速率限制（例如，HTTP 429）。服务器包含重试和退避机制，但无法绕过 Figma 的限制。如果你遇到速率限制，请等待几分钟并减少请求量。

🙌🏼 致谢

我受到了 Graham Lipsman 的 Figma Context MCP 的启发，从而开发了 Figma to Flutter，该项目具有以下特点：

资产导出
颜色和主题设置
小部件树和全屏构建

其他功能即将推出...

🧱 其他框架

如果你想为 React、Angular、React Native、Vue 或其他框架开发类似的项目，我添加了详细的文档 Figma Framework MCP，你可以参考并开始开发。同时，如果有人已经为特定框架开发了 Figma 的 MCP 服务器，我会在此处维护一个列表。

🔑 许可证

本项目采用 MIT 许可证 - 详细信息请参阅 LICENSE 文件。

🙋‍♂️ 作者

Muhammad Hamza

你也可以关注我的 GitHub 个人资料，以了解我最新的项目动态：

如果你喜欢这个仓库，请给它一个星星 ⭐ 支持一下！

为想要弥合设计与代码之间差距的设计师和开发者精心打造 ❤️

figma-flutter-mcp