Checklist per il passaggio di consegne Figma / PSD: come le UI di gioco evitano il rework

Quando l’engineering rifà una UI, metà delle volte non è un problema estetico: è che il passaggio di consegne non soddisfa i requisiti dell’engine. Tu modifichi un frame in Figma o Photoshop, e l’engineering deve ritagliare di nuovo, ricostruire la Canvas e riallineare gli anchor. Le tempistiche si allungano.

Quella che segue è una checklist pre-consegna che copre scenari ad alta intenzione: Figma export Unity, PSD import Unity UI, game UI slicing, reskin di eventi e UI multilingua. La sezione finale spiega la differenza tra “solo PNG” ed export strutturato; gli strumenti sono punti di riferimento.

---

Cosa serve davvero all’engineering

A loro serve	Non questo
Gerarchia con nomi (pulsanti, pannelli, voci di lista)	Un’unica JPG a schermo intero
Pulsante normal / pressed / disabled	Una sola immagine che “sembra cliccabile”
Livelli di testo sostituibili	Tutto rasterizzato come display type
Posizioni relative e semantica degli anchor	Riferimento di layout + 20 PNG sparsi
Struttura prefab riutilizzabile	Ricostruire da zero a ogni evento

Test di accettazione in una riga: dopo l’import in Unity UGUI / Godot Control / Cocos UI, cambiare il testo o fare un reskin non deve richiedere di ricostruire l’intero albero.

---

12 controlli prima della consegna

Struttura e naming

#	Controllo	Note
1	Nomi semantici di Frame / gruppi	Panel_Shop, Btn_Buy—non Group 12
2	Separare livelli interattivi e decorativi	Sfondo, bordo, icona, testo
3	Voci di lista come gruppi riutilizzabili	List_Item deve poter essere duplicato
4	Nascondere bozze e Frame obsoleti	Meno rumore in export

Stati e specifiche

#	Controllo	Note
5	Stati completi dei pulsanti	normal / pressed / disabled (o convenzione di naming del team)
6	Regioni 9-slice / stretch marcate	Pannelli e input non vanno scalati a forza
7	Risoluzione target e safe area	Mobile verticale: notch e barra inferiore
8	Strategia font	Livelli di testo per la localizzazione; display type segnalato a parte

Live ops e localizzazione

#	Controllo	Note
9	Margine per la lunghezza dei testi	Tedesco / spagnolo spesso oltre il 30% più lunghi dell’inglese
10	Reskin = solo visivo	Skin di evento: stesso layout, nuova grafica e colori
11	Localizzazione: testo vs layout	Ideale: stessa struttura, più file di lingua
12	Formato di export documentato	PSD a livelli / link Figma, o naming di slice concordato

Preparazione Figma: Workflow Figma → Unity. Preparazione PSD: Importare PSD in Unity UI in 5 minuti.

---

Tre percorsi di consegna (confronto oggettivo)

Percorso	Approccio	Ideale per	Punti critici
A. Slicing manuale	Export PNG + screenshot del layout; l’engineering costruisce a mano	UI minimale, demo una tantum	Ogni revisione = ritagliare e ricostruire
B. Plugin per engine	Figma Converter, Psd-Exporter, ecc.	Team con specifiche fisse	Multi-engine spesso significa rifare; la qualità dei plugin varia
C. Canvas strutturato	File a livelli → canvas di gioco → split sul posto → export Prefab	UI multi-schermata, reskin frequenti / lancio globale	Richiede di adottare un flusso di export orientato al gioco

Il percorso C è comune in prodotti come VberAI Studio: analizza PSD / Figma → split della UI che preserva il layout → export verso Unity / Godot / Cocos (vedi dividere la UI di gioco nell’engine). I designer possono continuare a lavorare in Figma; dopo l’approvazione, usa l’export strutturato invece di esportare a mano 20 PNG per ogni revisione.

---

Scenari comuni per i designer

Game UI slicing / slice sul posto

Se un concept a schermo intero è solo PNG, l’engineering tira a indovinare i limiti dei pulsanti. Flusso più sicuro: trascina la schermata sul canvas → dividi i controlli sul posto (slicing sul posto) così i dati di posizione viaggiano con lo split—evita che “le slice sembrano giuste ma nell’engine tutto si sposta”.

Export Figma verso Unity / Godot

Se un plugin produce solo un pacchetto di sprite piatti, l’engineering deve comunque ricostruire l’albero RectTransform / Control. Chiedi in fase di valutazione: il deliverable è un Prefab / gerarchia, o uno zip di immagini sparse? Confronto con Godot: Figma → Godot manuale vs workflow AI.

Game UI reskin (stagionale / eventi)

Halloween, Natale, ecc.: stesso layout, nuovi asset a tema. Se ogni reskin significa ritagliare e ricostruire, la cadenza delle live ops rallenta. Gli strumenti di reskin dovrebbero mantenere la struttura dei nodi invariata (reskin UI e varianti a tema).

Traduzione UI di gioco / Figma multilingua

Trappola del lancio globale: il testo tradotto sborda dal layout. Flusso ideale: sostituisci solo le stringhe, non rifare il layout dei Frame (traduzione UI con un clic). In Figma.

Icone e asset semi-trasparenti

Le icone delle abilità e le UI VFX spesso richiedono la rimozione dello sfondo prima dell’import (capelli, trasparenza, glow). Il matting generico sfoca i bordi; gli strumenti orientati al gioco enfatizzano l’alpha (matting glow / VFX).

---

Come si collega agli strumenti di immagini AI

Midjourney, Jimeng, GPT Image 2, ecc. sono validi per la direzione visiva; se la destinazione è l’engine, servono comunque split e gerarchia. Combo comune:

Concept UI AI a schermo intero → il designer organizza i livelli in Figma → export strutturato verso l'engine

Non trattare una “singola immagine da poster” come consegna finale. Confronti tra strumenti: Generatori di arte per game design AI.

---

FAQ

Posso consegnare solo PNG? Va bene per le demo; la UI di produzione richiederà rework ripetuti. Come minimo allega note di layout e regole di naming.

L’Auto Layout di Figma deve essere perfetto? Non perfetto come sul web—ma raggruppamento e naming contano più degli aggiustamenti al pixel.

Cosa intende l’engineering con “le slice sono sbagliate”? Di solito: stati mancanti, 9-slice errato.

Reskin o rifare la UI? Reskin: stessa struttura, nuova grafica. Rifare: cambia anche la gerarchia. Le live ops dovrebbero restare sul percorso del reskin.

I designer devono imparare Unity? Non lo scripting—ma le basi di Canvas / Anchor / Prefab riducono drasticamente i costi di comunicazione.

VberAI Studio è uguale a Google AI Studio? No. Il primo è canvas di gioco ed export per engine; il secondo è l’ambiente di sviluppo AI generico di Google. Vedi confronto.