Figma zu Godot UI: Exportieren einer Control-Hierarchie mit AI Studio (Schritt für Schritt)

Der meiste Spiel-UI beginnt in Figma: Hauptmenüs, HUD, Shop-Bildschirme, Einstellungen. In Godot benötigen Sie einen wartbaren Control-Baum – MarginContainer, VBoxContainer, TextureRect, Label, Button und Theme – nicht einen Ordner mit ungruppierten PNGs.

Der übliche Engpass ist die Mitte: Das Design ändert ständig Frames, während die Entwicklung Container und Anker von Hand neu aufbaut. Dieser Artikel behandelt einen wiederholbaren Weg: Verwenden Sie VberAI Studio (kurz AI Studio), um Figma-Struktur in eine Godot-fähige Control-Hierarchie zu verwandeln, vom Import bis zu Editor-Prüfungen.

Um zu vergleichen, wann Handarbeit vs. AI Studio sinnvoll ist, siehe Figma zu Godot: Manuell vs. AI Studio. Für den Unity-Pfad siehe Figma zu Unity UI.

Abschlusskriterien: Was „In Godot“ bedeutet

Texturen allein zählen nicht. Sie sollten auch haben:

1. Eine Knotenstruktur, die zu aussagekräftigen Figma-Frames passt (obere Leiste, Liste, untere Leiste usw.)
2. Haupt-Chrome, das bei 16:9, Hochformat und Fenstergrößen standhält, ohne den gesamten Baum neu abzustimmen
3. Textebenen, die nach Möglichkeit Label (oder die Textknoten Ihres Projekts) bleiben – nicht in Bilder eingebacken
4. Eine Möglichkeit, nach Figma-Chrome-Änderungen erneut zu exportieren, anstatt die Szene von Grund auf neu aufzubauen

Signale, Datenbindung und Lokalisierungsschlüssel gehören weiterhin in Godot. AI Studio entfernt „Baue das Layout-Shell aus dem Mock neu“.

Voraussetzungen

Element	Hinweise
Figma	Bildschirme in Frames mit lesbaren Namen aufgeteilt
AI Studio	Zugang zu VberAI Studio
Godot	Bevorzugt ein Godot 4.x-Projekt; Exportziel auf Godot setzen
Asset-Konventionen	UI-Szenenordner (z. B. res://ui/generated/) und Theme-Platzierung festlegen

Vermeiden Sie es, einen einzelnen flachen Vollbild-Screenshot zu liefern – das zieht Sie zurück ins manuelle Slicing.

Schritt 1: Organisieren Sie Figma, sodass es wie ein UI-Baum liest

Eine kurze Bereinigung vor dem Import ist billiger, als später Knoten in der Engine zu teilen.

Praxis	Warum
Klare Frame-Namen (Panel_HUD, Btn_Play, List_Item)	Namen werden Godot-Knotennamen
Frames / Auto-Layout für Gruppen verwenden; vermeiden Sie das Zusammenführen ganzer Bildschirme	Hierarchie bleibt nach dem Import erkennbar
Kopien als Textebenen halten, wenn möglich	Einfachere Label-Zuordnung
Nine-Slice-Panels von festen Symbolen trennen	Streckregeln bleiben klar
Entwurfs-Frames und ungenutzte Varianten ausblenden	Weniger Rauschen im Exportbaum

Schritt 2: Importieren Sie Figma in AI Studio

1. Öffnen Sie VberAI Studio
2. Starten Sie einen Import, wählen Sie Figma, und laden Sie die Datei hoch (oder nutzen Sie die unterstützte Figma-Verbindung des Produkts)
3. Bestätigen Sie im Ebenen-/Frame-Baum die Bildschirme, die Sie tatsächlich ausliefern – nicht jeden Entwurf in der Datei

Idealerweise sehen Sie links die Struktur, in der Mitte die Canvas-Vorschau und rechts engine-orientierte Exportoptionen. Bestätigen Sie die Struktur, bevor Sie exportieren.

Schritt 3: Überprüfen Sie die Hierarchie vor dem Export

Auf der Canvas prüfen Sie:

• Panel-Verschachtelung entspricht Kopf / Körper / Fußzeile (oder Ihren Chrome-Konventionen)
• Schaltflächen-Hitboxen sind von dekorativen Symbolen getrennt
• Lokalisierbarer Text ist weiterhin Textebene
• Streckbare Panels vs. feste Symbole sind unterschieden

Beheben Sie Benennung oder Gruppierung in AI Studio, wenn möglich. Das Entwirren einer kaputten .tscn in Godot kostet mehr.

Für kleine Layout-Anpassungen beschreiben Sie die Absicht in natürlicher Sprache (Abstand zwischen Titel und Primärschaltfläche straffen, Listen-Elementhöhe vereinheitlichen, Entwurfs-Badges ausblenden). Ziel ist es, Chrome vor der Umwandlung in Engine-Objekte zu klären – nicht den gesamten Kunstsatz per Chat neu zu zeichnen.

Schritt 4: Export für Godot

Setzen Sie das Ziel-Engine auf Godot. Bevorzugen Sie eine Control-Hierarchie / Szene gegenüber „nur Sprites“.

Nach dem Export in Godot:

1. Platzieren Sie Assets im vereinbarten Ordner (z. B. res://ui/generated/)
2. Hängen Sie die exportierte Szene unter eine CanvasLayer oder Ihre Projekt-UI-Wurzel
3. Bestätigen Sie, dass die Wurzel ein sinnvoller Control- (oder Container-)Baum ist
4. Vorschau mehrerer Auflösungen im Editor
5. Verdrahten Sie pressed und andere Signale sowie Datenbefüllung wie gewohnt mit GDScript / C#

Die Logik bleibt im Projekt. Was Sie überspringen, ist das manuelle Stapeln jedes TextureRect / Label / Containers aus Figma.

Schritt 5: Editor-Abnahme-Checkliste

Prüfung	Bestehenskriterien
Knotennamen	Zuordnung zu Schlüssel-Frames; kein Haufen bedeutungsloser Node2D / Control-Indizes
Layout	Chrome bleibt nutzbar, wenn das Fenster gestreckt wird
Text	Ändern von Label-Text erfordert keinen Re-Export des gesamten Bildschirms als Kunst
Theme	Schriftarten und Farben können in das Projekt-Theme eingebunden werden, oder Sie wissen, dass Theme noch einen Handgriff benötigt
Re-Export	Nach Figma-Chrome-Änderungen kann ein neuer Export die Szene ersetzen oder daneben liegen – nicht, dass Sie feststecken

Schriftwechsel, Safe Areas und Lokalisierung benötigen normalerweise noch einen Durchgang. Das ist normale Politur, kein fehlgeschlagener Pipeline.

FAQ

Ist das dasselbe wie Figma-„zu-Code“-Plugins?
Die meisten zielen auf das Web. Godot benötigt Control-/Container-/Theme-Konventionen. Engine-freundlicher Export ist nicht dasselbe Produkt wie Web-Codegenerierung.

Designen wir weiterhin in Figma?
Ja. AI Studio konsumiert Designstruktur; es setzt keine Kunstrichtung. Layout und Tokens kommen weiterhin aus Figma.

Wo passt Godot MCP hinein?
AI Studio übernimmt Design → Control-Struktur. Godot MCP hilft, nachdem die Szene im Projekt ist – Knoten umbenennen, Signale verdrahten, den Baum aus Cursor und ähnlichen Clients inspizieren. MCP „generiert keine vollständige UI aus einem Bild“. Einrichtung: Godot MCP installieren.

Wird der erste Export pixelgenau sein?
Normalerweise nicht. Der Gewinn ist die Strukturmigration in Minuten statt eines halbtägigen Neuaufbaus; Pixel und Theme werden in Godot fertiggestellt.

So führen Sie nach Designänderungen erneut aus

Figma-Änderung	Vorschlag
Chrome-Zeilen/-Spalten, neue Tabs	Erneut über AI Studio exportieren
Nur Symbol-Tönung oder Text	Godot-Szene / Theme / Übersetzungstabellen bevorzugen
Komplett neues Artboard	Neuer Export → neue .tscn oder den vereinbarten Pfad ersetzen