Figma / PSD 交程序前自查：游戏 UI 设计稿怎样才不容易返工

程序返工 UI，一半不是审美问题，而是交接物不满足引擎。你在 Figma / Photoshop 里改一版，程序就要重切、重搭 Canvas、重对 Anchor——周期被拉长，和 AI 生图工具无关。

下面是一份交程序前的自查清单，覆盖高频搜索场景：Figma 导出 Unity、PSD 导入 Unity UI、游戏 UI 切图、活动换皮与多语言 UI。文末说明「只交 PNG」和「结构化导出」差在哪里；工具仅作选型参考，不限定单一产品。

---

程序真正需要什么

他们要的	不是这些
可命名的层级（按钮、面板、列表项）	只有一张整屏 JPG
按钮 normal / pressed / disabled	单张「看起来能点」的图
可替换的文案层	全部 raster 成美术字
相对位置与锚点语义	仅 layout 参考图 + 20 张散 PNG
可复用的预制体结构	每次活动从零手搭

验收标准一句话：进 Unity UGUI / Godot Control / Cocos UI 后，改文案或换皮不必重建整棵树。

---

交稿前 12 项自查

结构与命名

#	检查	说明
1	Frame / 组命名语义化	Panel_Shop、Btn_Buy，避免 Group 12
2	可点击与装饰分层	背景、边框、图标、文字分开
3	列表项单独成组	List_Item 可复用
4	隐藏草稿与废弃 Frame	减少导出噪音

状态与规格

#	检查	说明
5	按钮多状态齐全	normal / pressed / disabled（或程序约定命名）
6	九宫格 / 可拉伸区域标清	面板、输入框勿硬缩放
7	目标分辨率与安全区	竖屏手游留 notch / 底部条
8	字体策略	要本地化的用文本层；艺术字单独标注

出海与活动

#	检查	说明
9	文案长度预留	德 / 西语常比中文长 30%+
10	换皮是否只换视觉	活动皮：布局不变，只换图与色
11	多语言是改字还是改布局	理想：同结构多语言稿
12	导出格式说明	layered PSD / Figma 链接，或约定切图命名

Figma 侧整理要点：Figma → Unity 流程。PSD 侧：5 分钟导入 Unity UI。

---

三条交接路径（客观对比）

路径	做法	适合	痛点
A. 手工切图	Export PNG + layout 截图，程序手搭	极简 UI、一次性 Demo	改一版重切重搭
B. 引擎插件	Figma Converter、Psd-Exporter 等	团队已有固定规范	多引擎常要重做；插件质量参差
C. 结构化画布	分层稿进游戏画布 → 原位拆分 → 导出 Prefab	多屏 UI、频繁换皮 / 出海	需接受游戏向导出流程

路径 C 在 VberAI Studio 等产品里常见：解析 PSD / Figma → 保留布局的 UI 拆分 → 导出 Unity / Godot / Cocos（见 游戏 UI 拆分进引擎）。设计师仍可在 Figma 主稿；定稿后走结构化导出，而不是每版手工 Export 20 张 PNG。

---

设计师高频场景

游戏 UI 切图 / 原位切图

整屏概念图若只有 PNG，程序要猜按钮边界。更稳的做法：整屏落画布 → 按原位置拆控件（原位切图说明），位置信息随拆分走，避免「切出来了但进引擎全偏移」。

Figma 导出 Unity / Godot

插件若只出扁平 Sprite 包，程序仍要重建 RectTransform / Control 树。选型时问一句：导出物是 Prefab / 层级，还是 zip 散图？Godot 对比：Figma → Godot 手动 vs AI 流程。

游戏 UI 换皮（节日 / 活动）

万圣节、圣诞等活动：同一套布局，换主题素材。若每次换皮都重切重搭，运营节奏会被拖慢。换皮工具应保证节点结构不变（UI 换皮与主题变体）。

游戏 UI 翻译 / Figma 多语言

出海常见坑：翻译后文案变长，布局挤爆。理想流程是 只换字符串，不重排 Frame（UI 一键翻译）。交稿时在 Figma 用 Auto Layout + min/max 宽度预留。

图标与半透明素材

技能 icon、光效 UI 在入库前常需去背（发丝、半透、光晕）。通用去背易糊边；游戏向工具会强调 Alpha 通道（光效 / 特效抠图），再回画布或引擎。

---

与 AI 生图工具的关系

Midjourney、即梦、GPT Image 2 等适合出视觉方向；若终点是引擎，仍要解决拆分与层级。常见组合：

AI 出整屏 UI 概念 → 设计师在 Figma 整理分层 → 结构化导出进引擎

不要把「海报级单图」直接当最终交接物。工具对比见 AI 生成游戏设计图选型、7 条 UI 工作流。

---

常见问题

只交 PNG 可以吗？
Demo 可以；量产 UI 会反复返工。至少附 layout 标注 + 命名规范。

Figma 里 Auto Layout 必须完美吗？
不必网页级完美，但分组与命名比像素抠细节更重要。

程序总说「切图切不对」指什么？
常指：缺状态图、九宫格错、可点区域与视觉不一致、或散图丢了相对位置。

换皮和重做 UI 有什么区别？
换皮：结构不变，换视觉；重做：连 Hierarchy 都变。活动运营应走换皮路径。

设计师要学 Unity 吗？
不必写脚本；理解 Canvas / Anchor / Prefab 概念即可显著减少沟通成本。

VberAI Studio 和 Google AI Studio 是一回事吗？
不是。前者是游戏画布与引擎导出；后者是 Google 通用 AI 开发环境。见 对比文。