Figma-Flutter-MCP 是一个 MCP 服务器项目，目标是让编码智能体能够利用 Figma 的丰富设计数据，以 Flutter 的方式实现设计稿。它通过 MCP（Model Context Protocol）将 Figma 的文件、数据、组件等提供给 Cursor 或其他 AI 驱动的工具使用。
用途
该工具用于在 AI 编码流程中引入 Figma 设计信息，辅助生成 Flutter 代码。作者强调，它本身并不生成实际的 Flutter 代码文件或屏幕代码，而是提取并分析 Figma 节点数据，向 AI 提供结构、建议与实现模式，由 AI 完成代码编写。因此，提示词质量直接影响结果质量。
主要能力
根据官方说明，其能力包括：
- 提取 Figma 节点数据：布局、样式、尺寸、颜色、文本内容等。
- 分析结构：子元素、嵌套组件、视觉重要性。
- 提供指导：建议 Flutter widget 与实现模式（不生成实际 Flutter 代码文件）。
- 提取屏幕元数据：设备类型、方向、尺寸。
- 识别区域：页眉、页脚、导航、内容区。
- 分析导航：标签栏、应用栏、抽屉、导航元素。
- 提供 Scaffold 指导：建议 Flutter 屏幕结构（不生成实际 Flutter 屏幕）。
- 主题与字体设置：建议在 Figma 中放置包含主题颜色与字体示例的两个 frame。
- Widget 生成：建议使用 Figma 中的 COMPONENT；若没有组件，可用 FRAME 并提示 AI 将其作为 widget 处理。
- 全屏生成：如存在图片资源（.png、.jpeg、.jpg 等），会自动导出并放入 assets/ 及 pubspec.yaml。
- 资源导出：图片资源在生成屏幕时自动工作；SVG 资源若散乱或未分组则不会自动工作，建议将 SVG 单独导出到独立的 FRAME 或 GROUP。
使用方式
需要先创建 Figma 访问令牌（Figma API Key / Access Token）。在 Cursor 中配置 MCP 的步骤为：按 CMD + Shift + P（Windows 为 Ctrl），输入“Open MCP Settings”，点击“Add new MCP”，粘贴相应的 JSON 对象。若以 npm 包方式安装，需保持更新到最新版本，否则可能因缓存旧版本而出现“无法使用工具调用”或“Figma API key 设置不生效”等错误。
用于本地快速测试时，可通过 HTTP 而非 stdio 运行服务器，然后将相应配置添加到 MCP 客户端配置中。此外可参考 CONTRIBUTING.md 获取详细说明。
基本工作流方面，建议按所用 AI 编码代理配置指令文件：Cursor 使用 .cursor/rules/fluttering.mdc，Claude 使用 CLAUDE.md，Gemini CLI 使用 GEMINI.md。这样 AI 代理会结合 MCP 输出，确保 Flutter 代码符合项目要求与结构。
获取 Figma 链接：桌面端选中 frame 后按 CMD + L 或 Ctrl + L；网页端选中 frame 后复制 URL。有效 URL 会包含 FILE ID 和 NODE ID 参数。
适用场景与限制
官方建议现阶段不要用它开发可扩展的应用，而更适合 MVP、较小且偏说明性的任务。设计稿质量会影响解读效果，建议使用 auto layout、frame 而非 group，并保持整体对齐一致。大量使用可能触发 Figma 速率限制（如 HTTP 429）；服务器包含带退避的重试，但不能绕过 Figma 限制，遇到限制时应等待几分钟并减少请求量。SVG 资源需要单独分组导出，否则可能无法自动处理；批量导出时可能抓取到意外的节点。
该项目以 MIT 许可证发布，作者为 Muhammad Hamza。相关资料提供了 Observable Flutter 演示与视频链接。
