Da Figma a Godot UI: Esporta una Gerarchia di Control con AI Studio (Passo dopo Passo)

La maggior parte delle UI di gioco inizia in Figma: menu principali, HUD, schermate di negozio, impostazioni. In Godot hai bisogno di un albero Control manutenibile—MarginContainer, VBoxContainer, TextureRect, Label, Button e Theme—non una cartella di PNG non raggruppati.

Il collo di bottiglia di solito è nel mezzo: il design continua a modificare i Frame mentre l’ingegneria ricostruisce contenitori e ancoraggi a mano. Questo articolo copre un percorso ripetibile: usa VberAI Studio (AI Studio in breve) per trasformare la struttura Figma in una gerarchia Control pronta per Godot, dall’importazione ai controlli nell’editor.

Per confrontare quando ha senso costruire a mano vs usare AI Studio, vedi Figma to Godot: Manual vs AI Studio. Per il percorso Unity, vedi Figma to Unity UI.

Criteri di Completamento: Cosa Significa “In Godot”

Le texture da sole non contano. Dovresti anche avere:

1. Un albero di nodi che mappa a Frame Figma significativi (barra superiore, lista, barra inferiore, e così via)
2. Chrome principale che regge a 16:9, verticale e dimensioni finestra senza riaccordare l’intero albero
3. Livelli di testo che rimangono Label (o i nodi di testo del tuo progetto) quando possibile—non cotti in immagini
4. Un modo per riesportare dopo che il chrome Figma cambia, invece di ricostruire la scena da zero

Segnali, data binding e chiavi di localizzazione appartengono ancora a Godot. AI Studio rimuove “ricostruisci la shell di layout dal mockup”.

Prerequisiti

Elemento	Note
Figma	Schermate divise in Frame con nomi leggibili
AI Studio	Accesso a VberAI Studio
Godot	Preferisci un progetto Godot 4.x; imposta la destinazione di esportazione su Godot
Convenzioni asset	Concorda le cartelle delle scene UI (es. res://ui/generated/) e il posizionamento del Theme

Evita di spedire un singolo screenshot a schermo intero appiattito—questo ti riporta al taglio manuale.

Passo 1: Organizza Figma in Modo che Sia Leggibile come un Albero UI

Una breve pulizia prima dell’importazione è più economica che dividere i nodi nel motore in seguito.

Pratica	Perché
Nomi Frame chiari (Panel_HUD, Btn_Play, List_Item)	I nomi diventano nomi di nodi Godot
Usa Frame / Auto Layout per i gruppi; evita di unire intere schermate	La gerarchia rimane riconoscibile dopo l’importazione
Mantieni il testo come livelli di testo quando puoi	Mappatura Label più facile
Separa i pannelli nine-slice dalle icone fisse	Le regole di stretching rimangono chiare
Nascondi i Frame bozza e le varianti non usate	Meno rumore nell’albero di esportazione

Passo 2: Importa Figma in AI Studio

1. Apri VberAI Studio
2. Avvia un’importazione, scegli Figma e carica il file (o usa la connessione Figma supportata dal prodotto)
3. Nell’albero dei livelli / Frame, conferma le schermate che spedisci effettivamente—non ogni bozza nel file

Idealmente vedi la struttura a sinistra, l’anteprima della tela al centro e le opzioni di esportazione orientate al motore a destra. Conferma la struttura prima di esportare.

Passo 3: Verifica la Gerarchia Prima dell’Esportazione

Sulla tela, controlla:

• L’annidamento dei pannelli corrisponde a testa / corpo / piè di pagina (o alle tue convenzioni chrome)
• Le aree di clic dei pulsanti sono separate dalle icone decorative
• Il testo localizzabile è ancora livelli di testo
• I pannelli estensibili vs le icone a dimensione fissa sono distinti

Correggi nomi o raggruppamenti in AI Studio quando puoi. Districare un .tscn rotto in Godot costa di più.

Per piccole modifiche di layout, descrivi l’intento in linguaggio naturale (restringi la spaziatura tra titolo e pulsante primario, uniforma l’altezza degli elementi della lista, nascondi i badge bozza). L’obiettivo è sistemare il chrome prima che diventi oggetti del motore—non ridisegnare l’intero set artistico tramite chat.

Passo 4: Esporta per Godot

Imposta il motore di destinazione su Godot. Preferisci una gerarchia Control / scena rispetto a “solo sprite”.

Dopo l’esportazione, in Godot:

1. Posiziona gli asset nella cartella concordata (es. res://ui/generated/)
2. Collega la scena esportata sotto un CanvasLayer o la radice UI del tuo progetto
3. Conferma che la radice sia un albero Control (o contenitore) sensato
4. Anteprima diverse risoluzioni nell’editor
5. Collega pressed e altri segnali, più il riempimento dei dati, con GDScript / C# come al solito

La logica rimane nel progetto. Ciò che salti è impilare a mano ogni TextureRect / Label / contenitore da Figma.

Passo 5: Checklist di Accettazione nell’Editor

Controllo	Criteri di superamento
Nomi dei nodi	Mappano ai Frame chiave; non un mucchio di indici Node2D / Control senza significato
Layout	Il chrome rimane utilizzabile quando la finestra si allunga
Testo	Modificare il testo delle Label non richiede di riesportare l’intera schermata come arte
Theme	I font e i colori possono agganciarsi al Theme del progetto, o sai che il Theme richiede ancora una passata manuale
Riesportazione	Dopo modifiche al chrome Figma, una nuova esportazione può sostituire o affiancare la scena—non ti lascia bloccato

Il cambio di font, le aree sicure e la localizzazione di solito richiedono ancora una passata. Questa è lucidatura normale, non un pipeline fallito.

FAQ

È la stessa cosa dei plugin Figma “to code”?
La maggior parte di quelli targetizza il web. Godot ha bisogno di convenzioni Control / contenitore / Theme. Un’esportazione orientata al motore non è lo stesso prodotto della generazione di codice web.

Progettiamo ancora in Figma?
Sì. AI Studio consuma la struttura del design; non imposta la direzione artistica. Layout e token vengono ancora da Figma.

Dove si inserisce Godot MCP?
AI Studio gestisce design → struttura Control. Godot MCP aiuta dopo che la scena è nel progetto—rinomina nodi, collega segnali, ispeziona l’albero da Cursor e client simili. MCP non “genera una UI completa da un’immagine”. Configurazione: Godot MCP install.

La prima esportazione sarà pixel-perfect?
Di solito no. Il vantaggio è la migrazione della struttura in minuti invece di una ricostruzione di mezza giornata; pixel e Theme si rifiniscono in Godot.

Come Rieseguire Dopo Modifiche al Design

Modifica Figma	Suggerimento
Righe/colonne del chrome, nuove schede	Riesporta tramite AI Studio
Solo tinta icona o testo	Preferisci scena Godot / Theme / tabelle di traduzione
Nuovo artboard completamente nuovo	Nuova esportazione → nuovo .tscn o sostituisci il percorso concordato