Figma to Godot / Figma 到 Godot UI：AI Studio 导出 Control 层级

游戏 UI 多半先在 Figma 定稿：主菜单、HUD、商店、设置页。落到 Godot 时，需要的是一棵可维护的 Control 树——MarginContainer、VBoxContainer、TextureRect、Label、Button 以及 Theme——而不是一堆失去分组的 PNG。

常见卡点在中段：设计继续改 Frame，程序在场景里按像素重搭容器与锚点。本文只写一条可重复的路径：用 VberAI Studio（简称 AI Studio）把 Figma 结构变成 Godot 可用的 Control 层级，从导入到编辑器验收。

若要比较「手搭 vs AI Studio」何时更合适，见：Figma 到 Godot：手动流程 vs AI Studio。Unity 同路径见：Figma 到 Unity UI。

完成标准：什么叫「进 Godot 了」

只出现贴图不算完成。至少同时满足：

1. 节点树能对应有意义的 Figma Frame（顶栏、列表、底栏等）
2. 在 16:9、竖屏与窗口化分辨率下，主壳布局不需要整树手拧
3. 文本层尽量仍是 Label（或项目约定的文本节点），而不是整块烤进图里
4. Figma 改壳层后，可以再导出一轮，而不是整景从零重建

交互（信号、数据绑定、本地化键）仍在 Godot 侧完成。AI Studio 省掉的是「按稿重造布局壳」。

前置条件

项	说明
Figma	已有按屏幕拆好的 Frame，命名可读
AI Studio	可打开 VberAI Studio
Godot	建议 Godot 4.x 工程；导出目标选 Godot
资源约定	事先定好 UI 场景目录（如 res://ui/generated/）与 Theme 落点

尽量不要只交一张拼好的整屏截图——那会把流程拉回手动切图。

步骤 1：整理 Figma，让结构像 UI 树

导入前花一点时间整理稿件，比进引擎后再拆节点便宜。

做法	原因
Frame 命名清晰（Panel_HUD、Btn_Play、List_Item）	名称会落到 Godot 节点名
用 Frame / Auto Layout 表达分组，少用整屏合并图层	导入后还能认出层级
文案尽量保留文本层	更易映射为 Label
九宫格底板与固定图标分开	拉伸规则更清楚
隐藏草稿 Frame、未用变体	减少导出树噪音

步骤 2：在 AI Studio 导入 Figma

1. 打开 VberAI Studio
2. 新建导入，选择 Figma，上传设计文件（或按产品支持的 Figma 接入方式）
3. 在图层 / Frame 树中核对应交付的屏幕，而不是整份文件里的所有草稿

理想状态是：左侧结构、中间画布预览、右侧面向引擎的导出选项——确认结构对了再导出。

步骤 3：导出前校对层级

在画布侧重点检查：

• 面板嵌套是否对应头 / 身 / 底（或你们的壳层约定）
• 按钮点击区与装饰图标是否拆开
• 需要本地化的文本是否仍是文本层
• 可拉伸底板 vs 固定尺寸图标是否区分

命名或分组不对，尽量在 AI Studio 里改。进 Godot 后再拆烂的 .tscn，成本更高。

需要微调布局时，可用自然语言说明意图（例如收紧标题与主按钮间距、统一列表项高度、隐藏草稿角标）。目标是在变成引擎对象之前理顺壳层，而不是用对话重做整套美术。

步骤 4：面向 Godot 导出

目标引擎选 Godot，优先输出 Control 层级 / 场景，而不是「仅精灵图」。

导出后在 Godot 中：

1. 把资源放到约定目录（如 res://ui/generated/）
2. 用 CanvasLayer 或项目 UI 根节点挂上导出场景
3. 检查根节点是否为合理的 Control（或容器）树
4. 在编辑器里用多种分辨率预览
5. 按钮的 pressed 等信号、数据填充，仍按项目惯例用 GDScript / C# 接线

逻辑仍归工程。省掉的是按 Figma 手工堆每一个 TextureRect / Label / 容器。

步骤 5：编辑器验收清单

检查项	通过标准
节点命名	与关键 Frame 可对应，无大量 Node2D/Control 无意义编号堆砌
布局	拉伸窗口时壳层不错位到不可用
文本	改 Label 文案不必重导整屏贴图
Theme	字体、颜色可接到项目 Theme，或明确还需手工挂 Theme
再导出	改 Figma 壳层后再导一轮，能替换或并列新场景，而不是无从下手

字体替换、安全区、本地化通常还要过一遍——这属于正常打磨，不是流程失败。

常见问题

Figma 与 Godot 兼容吗？
兼容在「设计稿 → UI 结构」这一层：Figma 负责 Frame / Auto Layout / 组件语义；Godot 需要 Control 树与 Theme。两者不直接互通文件格式，但经 VberAI Studio 可把 Figma 结构映射为 Godot 可用的 Control 层级——不是把 .fig 拖进 Godot，而是保留布局语义再导出。Web「转代码」插件通常不适用 Godot。

和 Figma「转代码」插件一样吗？
多数面向 Web。Godot 需要的是 Control / 容器 / Theme 约定。引擎友好导出与网页 codegen 不是一类产物。

还要不要在 Figma 出稿？
要。AI Studio 消费设计结构，不定美术方向。布局与 token 仍以 Figma 为准。

Godot MCP 在这一步做什么？
AI Studio 负责设计稿 → Control 结构。Godot MCP 在场景进工程后，用 Cursor 等客户端做编辑器内改名、挂信号、查节点等操作。MCP 不负责「从图生成整屏 UI」。安装见：Godot MCP 安装。

第一次导出会不会像素级一致？
通常不会。收益是结构迁移以分钟计，而不是手搭半天；像素与主题再在 Godot 收。

改版时怎么再走一遍

Figma 变更	建议
壳层行列重排、新页签	经 AI Studio 再导出
只换图标色、文案	优先在 Godot 场景 / Theme / 翻译表改
整屏新画板	新导出 → 新 .tscn 或替换约定路径