Checklist de passation Figma / PSD : comment les UI de jeu évitent les reprises

Lorsque l’ingénierie refait une UI, la moitié du temps ce n’est pas un problème esthétique—c’est que la passation ne répond pas aux exigences du moteur. Vous révisez une frame dans Figma ou Photoshop, et l’ingénierie doit re-découper, reconstruire le Canvas et réaligner les ancres. Les délais s’allongent.

Voici une checklist avant passation couvrant des scénarios de recherche à forte intention : Figma export Unity, PSD import Unity UI, game UI slicing, les reskins d’événements et l’UI multilingue. La section finale explique l’écart entre « PNG uniquement » et export structuré ; les outils sont des points de référence.

---

Ce dont l’ingénierie a réellement besoin

Ils ont besoin de	Pas de ceci
Hiérarchie nommée (boutons, panneaux, éléments de liste)	Un seul JPG plein écran
Bouton normal / pressed / disabled	Une seule image « qui a l’air cliquable »
Calques de texte remplaçables	Tout rastérisé en typographie display
Positions relatives et sémantique des ancres	Référence de mise en page + 20 PNG en vrac
Structure de prefab réutilisable	Reconstruction à zéro à chaque événement

Test d’acceptation en une ligne : Après import dans Unity UGUI / Godot Control / Cocos UI, changer le texte ou reskinner ne devrait pas exiger de reconstruire tout l’arbre.

---

12 vérifications avant passation

Structure et nommage

#	Vérification	Notes
1	Noms sémantiques de Frame / groupe	Panel_Shop, Btn_Buy—pas Group 12
2	Séparer les calques interactifs et décoratifs	Fond, bordure, icône, texte
3	Éléments de liste en groupes réutilisables	List_Item peut être dupliqué
4	Masquer les brouillons et Frames obsolètes	Moins de bruit à l’export

États et spécifications

#	Vérification	Notes
5	États de bouton complets	normal / pressed / disabled (ou convention de nommage de l’équipe)
6	Zones 9-slice / étirement marquées	Les panneaux et champs ne doivent pas être mis à l’échelle en dur
7	Résolution cible et zone sûre	Mobile portrait : encoche et barre inférieure
8	Stratégie de police	Calques de texte pour la localisation ; typographie display signalée séparément

Live ops et localisation

#	Vérification	Notes
9	Marge pour la longueur du texte	L’allemand / l’espagnol sont souvent 30 %+ plus longs que l’anglais
10	Reskin = visuel uniquement	Skins d’événement : même mise en page, nouveaux visuels et couleurs
11	Localisation : texte vs mise en page	Idéal : même structure, plusieurs fichiers de langue
12	Format d’export documenté	PSD en calques / lien Figma, ou nommage de découpe convenu

Préparation Figma : Workflow Figma → Unity. Préparation PSD : Importer un PSD dans Unity UI en 5 minutes.

---

Trois voies de passation (comparaison objective)

Voie	Approche	Idéal pour	Points de friction
A. Découpe manuelle	Export PNG + capture de mise en page ; l’ingénierie construit à la main	UI minimale, démos ponctuelles	Chaque révision = re-découper et reconstruire
B. Plugins de moteur	Figma Converter, Psd-Exporter, etc.	Équipes avec specs figées	Multi-moteur signifie souvent tout refaire ; qualité des plugins variable
C. Canvas structuré	Fichier en calques → canvas de jeu → découpe sur place → export Prefab	UI multi-écrans, reskin fréquent / lancement mondial	Nécessite d’adopter un flux d’export orienté jeu

La voie C est courante dans des produits comme VberAI Studio : analyser PSD / Figma → découpe UI préservant la mise en page → export vers Unity / Godot / Cocos (voir découper une UI de jeu dans le moteur). Les designers peuvent toujours travailler dans Figma ; après validation, utilisez l’export structuré au lieu d’exporter manuellement 20 PNG par révision.

---

Scénarios courants du designer

Découpe d’UI de jeu / découpe sur place

Si un concept plein écran n’existe qu’en PNG, l’ingénierie devine les limites des boutons. Flux plus sûr : déposer l’écran sur le canvas → découper les contrôles sur place (découpe sur place) afin que les données de position accompagnent la découpe—évitez « les découpes semblent bonnes mais tout se décale dans le moteur ».

Export Figma vers Unity / Godot

Si un plugin ne produit qu’un pack de sprites à plat, l’ingénierie reconstruit quand même l’arbre RectTransform / Control. À demander lors de l’évaluation : le livrable est-il un Prefab / une hiérarchie, ou un zip d’images en vrac ? Comparaison Godot : Figma → Godot manuel vs workflow IA.

Reskin d’UI de jeu (saisonnier / événements)

Halloween, Noël, etc. : même mise en page, nouveaux assets de thème. Si chaque reskin signifie re-découper et reconstruire, le rythme des live ops ralentit. Les outils de reskin doivent conserver la structure des nœuds inchangée (reskin UI et variantes de thème).

Traduction d’UI de jeu / Figma multilingue

Piège du lancement mondial : le texte traduit déborde de la mise en page. Flux idéal : échanger uniquement les chaînes, ne pas reflow les Frames (traduction UI en un clic). Dans Figma.

Icônes et assets semi-transparents

Les icônes de compétence et l’UI de VFX nécessitent souvent une suppression d’arrière-plan avant import (cheveux, transparence, glow). Le matting générique floute les bords ; les outils orientés jeu mettent l’accent sur l’alpha (matting glow / VFX).

---

Lien avec les outils d’image IA

Midjourney, Jimeng, GPT Image 2, etc. sont bons pour la direction visuelle ; si la destination est le moteur, il vous faut quand même la découpe et la hiérarchie. Combinaison courante :

Concept UI plein écran IA → le designer organise les calques dans Figma → export structuré vers le moteur

Ne traitez pas une « image unique de qualité affiche » comme la passation finale. Comparaisons d’outils : générateurs d’art de game design IA.

---

FAQ

Puis-je livrer uniquement des PNG ? Correct pour des démos ; l’UI de production sera refaite à plusieurs reprises. Au minimum.

Figma Auto Layout doit-il être parfait ? Pas parfait comme sur le web—mais le groupement et le nommage comptent plus que les ajustements au pixel près.

Que veut dire l’ingénierie par « les découpes sont fausses » ? Généralement : états manquants, mauvais 9-slice.

Reskin vs refaire l’UI ? Reskin : même structure, nouveaux visuels. Refaire : la hiérarchie change aussi. Les live ops doivent rester sur la voie du reskin.

Les designers doivent-ils apprendre Unity ? Pas le scripting—mais les bases de Canvas / Anchor / Prefab réduisent fortement le coût de communication.

VberAI Studio est-il la même chose que Google AI Studio ? Non. Le premier est un canvas de jeu et un export moteur ; le second est l’environnement de dev IA général de Google. Voir comparaison.