适合谁
- 希望快速将 Figma 设计转化为 Flutter 代码的开发者
- 使用 Cursor 等 AI 编程工具的开发者
- MVP 和小型项目设计实现
- 需要从设计中提取主题颜色和排版的场景
F
68FMRS · C
该服务器通过 MCP 协议将 Figma 数据提供给 AI 编码代理，帮助生成 Flutter 代码。它需要 Figma API 密钥，并适用于 Cursor 等支持的客户端。虽然不能直接生成代码文件，但它为 AI 提供了必要的设计信息。
Figma Flutter MCP Server 是一个 MCP 服务器，它为编码代理（如 Cursor）提供 Figma 的设计令牌，以便生成 Flutter 代码。它能够提取 Figma 节点数据（布局、样式、尺寸、颜色、文本内容等）、分析组件结构和屏幕元数据，并为 AI 提供建议，帮助生成符合 Flutter 风格的代码。该服务器不直接生成实际的 Flutter 代码文件，而是提供指导，让 AI 能更好地实现设计。
工具能力
extract_figma_components
提取 Figma 组件数据：布局、样式、尺寸、颜色、文本内容等，并分析结构以建议 Flutter 实现方式。
extract_figma_screens
提取 Figma 屏幕元数据：设备类型、方向、尺寸，并识别区块和导航结构，为 Flutter 屏幕结构提供指导。
安装接入
- 在 Figma 中创建访问令牌。2. 在 Cursor 中打开 MCP 设置（Cmd+Shift+P）。3. 选择“添加新 MCP”。4. 粘贴配置 JSON（见安装配置）。5. 确保 Node.js 18+ 已安装。
claude_desktop_config.json
{
"mcpServers": {
"Figma Flutter MCP": {
"command": "npx",
"args": [
"-y",
"figma-flutter-mcp",
"--figma-api-key=YOUR-API-KEY",
"--stdio"
]
}
}
}
选型与风险
不适合谁
- 大型可扩展应用的生产级开发
- 设计不佳的 Figma 文件（如未使用自动布局、大量分组）
- 需要完全自动生成代码而无需 AI 指导的场景
所需权限
- 需要访问 Figma API 以获取节点数据（需要 Figma API 密钥）
- 可能会导出图片或 SVG 资产
- 通过 stdio 或 HTTP 与 MCP 客户端通信
风险与副作用
- Figma API 速率限制（HTTP 429），服务器会重试但不会绕过限制
- 从 Figma 提取的数据质量取决于设计质量
- 导出 SVG 时可能提取到不需要的节点
- 生成的代码可能无法完美匹配设计，需要 AI 调整
常见排障
- 如果遇到“无法使用工具调用”或“Figma API 密钥设置无效”等错误，可能原因是 npm 包缓存了旧版本，请升级到最新版本。
- 检查 Figma API 密钥是否有效，并确认网络连接正常。
- 如果遇到速率限制，请等待几分钟再重试。
使用场景
从 Figma 设计生成 Flutter 主题和排版样式
将 Figma 组件转换为 Flutter 组件代码
将 Figma 屏幕设计转换为 Flutter 屏幕结构
导出图像和 SVG 资产
支持客户端
Cursor完整支持
Claude Desktop部分支持