Figma / PSD Handoff Checklist: How Game UI Designs Avoid Rework

When engineering reworks UI, half the time it is not an aesthetic problem—it is that the handoff does not meet engine requirements. You revise a frame in Figma or Photoshop, and engineering has to re-slice, rebuild the Canvas, and re-align anchors. Timelines stretch.

Below is a pre-handoff checklist covering high-intent search scenarios: Figma export Unity, PSD import Unity UI, game UI slicing, event reskins, and multilingual UI. The closing section explains the gap between “PNG only” and structured export; tools are reference points.

---

What engineering actually needs

They need	Not this
Named hierarchy (buttons, panels, list items)	One full-screen JPG
Button normal / pressed / disabled	One “looks clickable” image
Replaceable text layers	Everything rasterized as display type
Relative positions and anchor semantics	Layout reference + 20 loose PNGs
Reusable prefab structure	Rebuild from scratch every event

One-line acceptance test: After import into Unity UGUI / Godot Control / Cocos UI, changing copy or reskinning should not require rebuilding the whole tree.

---

12 checks before handoff

Structure and naming

#	Check	Notes
1	Semantic Frame / group names	Panel_Shop, Btn_Buy—not Group 12
2	Separate interactive vs decorative layers	Background, border, icon, text
3	List items as reusable groups	List_Item can be duplicated
4	Hide drafts and obsolete Frames	Less export noise

States and specs

#	Check	Notes
5	Full button states	normal / pressed / disabled (or team naming convention)
6	9-slice / stretch regions marked	Panels and inputs should not be hard-scaled
7	Target resolution and safe area	Portrait mobile: notch and bottom bar
8	Font strategy	Text layers for localization; display type called out separately

Live ops and localization

#	Check	Notes
9	Copy length headroom	German / Spanish often 30%+ longer than English
10	Reskin = visual only	Event skins: same layout, new art and colors
11	Localization: copy vs layout	Ideal: same structure, multiple language files
12	Export format documented	Layered PSD / Figma link, or agreed slice naming

Figma prep: Figma → Unity workflow. PSD prep: Import PSD to Unity UI in 5 minutes.

---

Three handoff paths (objective comparison)

Path	Approach	Best for	Pain points
A. Manual slicing	Export PNG + layout screenshot; engineering builds by hand	Minimal UI, one-off demos	Every revision = re-slice and rebuild
B. Engine plugins	Figma Converter, Psd-Exporter, etc.	Teams with fixed specs	Multi-engine often means redo; plugin quality varies
C. Structured canvas	Layered file → game canvas → in-place split → Prefab export	Multi-screen UI, frequent reskin / global launch	Requires adopting a game-oriented export flow

Path C is common in products like VberAI Studio: parse PSD / Figma → layout-preserving UI split → export to Unity / Godot / Cocos (see split game UI into the engine). Designers can still work in Figma; after sign-off.

---

Common designer scenarios

Game UI slicing / in-place slice

If a full-screen concept is PNG-only, engineering guesses button bounds. Safer flow: drop the screen on canvas → split controls in place (in-place slicing) so position data travels with the split—avoid “slices look right but everything shifts in engine.”

Figma export to Unity / Godot

If a plugin only outputs a flat sprite pack, engineering still rebuilds the RectTransform / Control tree. Ask when evaluating: is the deliverable a Prefab / hierarchy, or a zip of loose images? Godot comparison: Figma → Godot manual vs AI workflow.

Game UI reskin (seasonal / events)

Halloween, Christmas, etc.: same layout, new theme assets. If every reskin means re-slice and rebuild, live-ops cadence slows. Reskin tools should keep node structure unchanged (UI reskin and theme variants).

Game UI translation / Figma multilingual

Global launch pitfall: translated copy overflows the layout. Ideal flow: swap strings only, do not reflow Frames (one-click UI translation). In Figma.

Icons and semi-transparent assets

Skill icons and VFX UI often need background removal before import (hair, transparency, glow). Generic matting blurs edges; game-oriented tools emphasize alpha (glow / VFX matting).

---

How this relates to AI image tools

Midjourney, Jimeng, GPT Image 2, etc. are good for visual direction; if the destination is the engine, you still need splitting and hierarchy. Common combo:

AI full-screen UI concept → designer organizes layers in Figma → structured export to engine

Do not treat a “poster-grade single image” as the final handoff. Tool comparisons: AI game design art generators.

---

FAQ

Can I hand off PNGs only? Fine for demos; production UI will rework repeatedly. At minimum attach layout notes and naming rules.

Does Figma Auto Layout have to be perfect? Not web-perfect—but grouping and naming matter more than pixel-nudging.

What does engineering mean by “slices are wrong”? Usually: missing states.

Reskin vs redoing UI? Reskin: same structure, new visuals. Redo: hierarchy changes too. Live ops should stay on the reskin path.

Do designers need to learn Unity? Not scripting—but Canvas / Anchor / Prefab basics cut communication cost sharply.

Is VberAI Studio the same as Google AI Studio? No. The former is game canvas and engine export; the latter is Google’s general AI dev environment. See comparison.