Figma / PSD Handoff-Checkliste: Wie Game-UI-Designs Nacharbeit vermeiden

Wenn Engineering die UI überarbeitet, ist es zur Hälfte kein ästhetisches Problem – sondern dass die Übergabe nicht den Engine-Anforderungen entspricht. Du überarbeitest einen Frame in Figma oder Photoshop, und Engineering muss neu slicen, das Canvas neu aufbauen und Anker neu ausrichten. Timelines dehnen sich.

Unten findest du eine Checkliste vor der Übergabe, die Szenarien mit hoher Suchintention abdeckt: Figma export Unity, PSD import Unity UI, game UI slicing, Event-Reskins und mehrsprachige UI. Der Schlussabschnitt erklärt die Lücke zwischen „nur PNG“ und strukturiertem Export; Tools sind Referenzpunkte.

---

Was Engineering tatsächlich braucht

Sie brauchen	Nicht das
Benannte Hierarchie (Buttons, Panels, Listenelemente)	Ein Vollbild-JPG
Button normal / pressed / disabled	Ein „sieht klickbar aus“-Bild
Austauschbare Textlayer	Alles als Display-Schrift rasterisiert
Relative Positionen und Anker-Semantik	Layout-Referenz + 20 lose PNGs
Wiederverwendbare Prefab-Struktur	Bei jedem Event von Grund auf neu bauen

Einzeiliger Abnahmetest: Nach dem Import in Unity UGUI / Godot Control / Cocos UI sollte das Ändern von Text oder das Reskinning nicht den Neuaufbau des gesamten Baums erfordern.

---

12 Checks vor der Übergabe

Struktur und Benennung

#	Check	Hinweise
1	Semantische Frame- / Gruppennamen	Panel_Shop, Btn_Buy – nicht Group 12
2	Interaktive vs. dekorative Layer trennen	Hintergrund, Rahmen, Icon, Text
3	Listenelemente als wiederverwendbare Gruppen	List_Item kann dupliziert werden
4	Entwürfe und veraltete Frames ausblenden	Weniger Export-Rauschen

States und Spezifikationen

#	Check	Hinweise
5	Vollständige Button-States	normal / pressed / disabled (oder Team-Namenskonvention)
6	9-Slice- / Streckbereiche markiert	Panels und Inputs sollten nicht hart skaliert werden
7	Zielauflösung und Safe Area	Mobile Hochformat: Notch und untere Leiste
8	Font-Strategie	Textlayer für Lokalisierung; Display-Schrift separat ausweisen

Live-Ops und Lokalisierung

#	Check	Hinweise
9	Spielraum für Textlänge	Deutsch / Spanisch oft 30 %+ länger als Englisch
10	Reskin = nur visuell	Event-Skins: gleiches Layout, neue Art und Farben
11	Lokalisierung: Text vs. Layout	Ideal: gleiche Struktur, mehrere Sprachdateien
12	Exportformat dokumentiert	Layered PSD / Figma-Link oder vereinbarte Slice-Benennung

Figma-Vorbereitung: Figma → Unity Workflow. PSD-Vorbereitung: PSD in 5 Minuten in Unity UI importieren.

---

Drei Übergabe-Wege (objektiver Vergleich)

Weg	Ansatz	Am besten für	Schmerzpunkte
A. Manuelles Slicing	PNG + Layout-Screenshot exportieren; Engineering baut per Hand	Minimale UI, einmalige Demos	Jede Überarbeitung = neu slicen und neu bauen
B. Engine-Plugins	Figma Converter, Psd-Exporter usw.	Teams mit festen Spezifikationen	Multi-Engine bedeutet oft Neuaufbau; Plugin-Qualität schwankt
C. Strukturiertes Canvas	Layered Datei → Game-Canvas → In-Place-Split → Prefab-Export	Multi-Screen-UI, häufiges Reskin / globaler Launch	Erfordert die Einführung eines spielorientierten Export-Flows

Weg C ist üblich in Produkten wie VberAI Studio: PSD / Figma parsen → layout-erhaltender UI-Split → Export nach Unity / Godot / Cocos (siehe Game-UI in die Engine splitten). Designer können weiterhin in Figma arbeiten; nach der Freigabe strukturiert exportieren.

---

Häufige Designer-Szenarien

Game-UI-Slicing / In-Place-Slice

Wenn ein Vollbild-Konzept nur als PNG vorliegt, rät Engineering die Button-Grenzen. Sicherer Flow: Screen auf das Canvas legen → Controls in place splitten (In-Place-Slicing), damit Positionsdaten mit dem Split mitwandern – vermeide „Slices sehen richtig aus.

Figma-Export nach Unity / Godot

Wenn ein Plugin nur ein flaches Sprite-Pack ausgibt, baut Engineering den RectTransform- / Control-Baum trotzdem neu auf. Frage bei der Bewertung: Ist das Ergebnis ein Prefab / eine Hierarchie oder ein Zip loser Bilder? Godot-Vergleich: Figma → Godot manuell vs. KI-Workflow.

Game-UI-Reskin (saisonal / Events)

Halloween, Weihnachten usw.: gleiches Layout, neue Theme-Assets. Wenn jedes Reskin neu slicen und neu bauen bedeutet, verlangsamt sich die Live-Ops-Kadenz. Reskin-Tools sollten die Knotenstruktur unverändert lassen (UI-Reskin und Theme-Varianten).

Game-UI-Übersetzung / Figma mehrsprachig

Fallstrick beim globalen Launch: übersetzter Text läuft aus dem Layout. Idealer Flow: nur Strings tauschen, Frames nicht neu fließen lassen (Ein-Klick-UI-Übersetzung). Nutze in Figma Auto Layout mit Min-/Max-Breite für Spielraum.

Icons und halbtransparente Assets

Skill-Icons und VFX-UI brauchen vor dem Import oft Hintergrundentfernung (Haare, Transparenz, Glow). Generisches Matting verwischt Kanten; spielorientierte Tools betonen Alpha (Glow- / VFX-Matting).

---

Wie das mit KI-Bildtools zusammenhängt

Midjourney, Jimeng, GPT Image 2 usw. sind gut für die visuelle Richtung; wenn das Ziel die Engine ist, brauchst du trotzdem Splitting und Hierarchie. Häufige Kombination:

KI-Vollbild-UI-Konzept → Designer organisiert Layer in Figma → strukturierter Export in die Engine

Behandle ein „poster-taugliches Einzelbild“ nicht als finale Übergabe. Tool-Vergleiche: KI-Game-Design-Art-Generatoren.

---

FAQ

Kann ich nur PNGs übergeben? Für Demos in Ordnung; Produktions-UI wird wiederholt überarbeitet. Hänge mindestens Layout-Notizen und Benennungsregeln an.

Muss Figma Auto Layout perfekt sein? Nicht web-perfekt – aber Gruppierung und Benennung sind wichtiger als Pixel-Nudging.

Was meint Engineering mit „Slices sind falsch“? Meist: fehlende States, falsches 9-Slice.

Reskin vs. UI neu machen? Reskin: gleiche Struktur, neue Visuals. Neu machen: Hierarchie ändert sich ebenfalls. Live-Ops sollten auf dem Reskin-Pfad bleiben.

Müssen Designer Unity lernen? Nicht Skripting – aber Canvas- / Anchor- / Prefab-Grundlagen senken die Kommunikationskosten stark.

Ist VberAI Studio dasselbe wie Google AI Studio? Nein. Ersteres ist Game-Canvas und Engine-Export; Letzteres ist Googles allgemeine KI-Entwicklungsumgebung. Siehe Vergleich.