← 返回目录

Figma Flutter MCP Server

社区

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

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 其他
Stars: ★ 244 热门
传输方式: stdio（本地进程） · Streamable HTTP
运行环境: Node.js 18+
凭据: 需要 API Key / 凭据
许可证: MIT
最近提交: 7 个月前 ⚠
工具数: 2

68FMRS · C

该服务器通过 MCP 协议将 Figma 数据提供给 AI 编码代理，帮助生成 Flutter 代码。它需要 Figma API 密钥，并适用于 Cursor 等支持的客户端。虽然不能直接生成代码文件，但它为 AI 提供了必要的设计信息。

最强项 · 文档质量 16/20 最弱项 · 可靠性 10/20

可靠性

10/20

安全与权限

12/20

维护活跃度

16/20

文档质量

16/20

安装易用性

14/20

查看各项评分依据

可靠性 10/20: 实现细节有限（未提供源代码，只有README）。README声明有提取组件、屏幕、导出资源等功能，但未提供测试或CI证据。npm包名可用，启动命令清晰（npx figma-flutter-mcp），但错误处理和边界情况未说明。依据静态校准，可靠性最高不超过12，考虑到核心功能有文档支持但缺少验证，评为10分。
安全与权限 12/20: 需要Figma API密钥，README建议通过命令行参数或.env文件提供，未提及密钥存储或作用域。README明确提及Figma速率限制和重试退避，但没有数据边界或最小权限说明。没有发现恶意行为或真实密钥泄露。但密钥处理细节和权限作用域不明确，因此扣分。评为12分。
维护活跃度 16/20: 仓库活跃，有244颗星，16个未解决问题，未归档。MIT许可证明确。README列出待办事项和贡献指南。未提供提交频率或版本发布信息，但维护迹象明显。未发现安全漏洞响应渠道。评为16分。
文档质量 16/20: README详尽，涵盖安装、API密钥设置、MCP配置（Cursor）、本地测试、基本工作流（主题、组件、屏幕生成、资产导出）、SVG注意事项、免责声明、贡献指南。有演示视频和外部文档链接。但缺少工具参数明细和错误排查指南。评为16分。
安装易用性 14/20: 需要Node.js 18+、Figma API密钥和MCP客户端。提供了Cursor的配置示例和本地HTTP测试方法。步骤清晰，但依赖Figma密钥和外部服务。未提供测试或CI证据，因此根据静态校准，setup不超过15。评为14分，因为设置步骤文档化但存在手动步骤。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

希望快速将 Figma 设计转化为 Flutter 代码的开发者
使用 Cursor 等 AI 编程工具的开发者
MVP 和小型项目设计实现
需要从设计中提取主题颜色和排版的场景

不适合谁

大型可扩展应用的生产级开发
设计不佳的 Figma 文件（如未使用自动布局、大量分组）
需要完全自动生成代码而无需 AI 指导的场景

所需权限

需要访问 Figma API 以获取节点数据（需要 Figma API 密钥）
可能会导出图片或 SVG 资产
通过 stdio 或 HTTP 与 MCP 客户端通信

风险与副作用

Figma API 速率限制（HTTP 429），服务器会重试但不会绕过限制
从 Figma 提取的数据质量取决于设计质量
导出 SVG 时可能提取到不需要的节点
生成的代码可能无法完美匹配设计，需要 AI 调整

安装接入

准备工作

运行环境：Node.js 18+

FIGMA_API_KEY 必填密钥 Figma 个人访问令牌，在 Figma 账户设置中创建（用于本地 HTTP 测试时写入 .env 文件）。

在 Figma 中创建访问令牌。
在 Cursor 中打开 MCP 设置（Cmd+Shift+P）。
选择“添加新 MCP”。
粘贴配置 JSON（见安装配置）。
确保 Node.js 18+ 已安装。

.cursor/mcp.json

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

以 Cursor 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

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

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add 'Figma Flutter MCP' -- npx -y figma-flutter-mcp --figma-api-key=YOUR-API-KEY --stdio

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在 Cursor 的 MCP 设置中添加配置后，打开工具列表确认出现了 extract_figma_components 和 extract_figma_screens 两个工具；也可以粘贴一个 Figma 链接请求提取组件，若能返回布局、颜色等信息即说明安装成功。

常见排障

如果遇到“无法使用工具调用”或“Figma API 密钥设置无效”等错误，可能原因是 npm 包缓存了旧版本，请升级到最新版本。
检查 Figma API 密钥是否有效，并确认网络连接正常。
如果遇到速率限制，请等待几分钟再重试。

试试这样问

连接成功后，可以直接对 AI 助手这样说：

根据这个 Figma 链接为 Flutter 设置主题，包括颜色和排版：<figma_link>
从这个 Figma 组件链接创建一个 Flutter 组件：<figma_link>，为不同变体使用命名构造函数，并把代码拆分成较小的文件以便阅读。
从这个 Figma 链接设计这个引导页：<figma_link>，确保代码可读、文件较小。
从这个 Figma 链接导出这个图像资源：<figma_link>

工具能力 2

extract_figma_components 只读

提取 Figma 组件数据：布局、样式、尺寸、颜色、文本内容等，并分析结构以建议 Flutter 实现方式。

extract_figma_screens 只读

提取 Figma 屏幕元数据：设备类型、方向、尺寸，并识别区块和导航结构，为 Flutter 屏幕结构提供指导。

使用场景

从 Figma 设计生成 Flutter 主题和排版样式

将 Figma 组件转换为 Flutter 组件代码

将 Figma 屏幕设计转换为 Flutter 屏幕结构

导出图像和 SVG 资产

支持客户端

Cursor

Claude Desktop部分支持

依据项目文档列出，未经本站实测。

详细介绍

Figma Flutter MCP Server 是一个 MCP 服务器，它为编码代理（如 Cursor）提供 Figma 的设计令牌，以便生成 Flutter 代码。它能够提取 Figma 节点数据（布局、样式、尺寸、颜色、文本内容等）、分析组件结构和屏幕元数据，并为 AI 提供建议，帮助生成符合 Flutter 风格的代码。该服务器不直接生成实际的 Flutter 代码文件，而是提供指导，让 AI 能更好地实现设计。