Comment importer un PSD dans Unity UI en 5 minutes avec AI Studio

Pourquoi la conversion PSD vers Unity UI ralentit encore les équipes

La plupart des UI de jeux commencent encore dans Photoshop. Les designers livrent un PSD avec calques, boutons, panneaux, icônes et styles de texte – puis l’ingénierie passe des heures à reconstruire la même hiérarchie dans Unity : Canvas, RectTransform, Image, TextMeshPro, et des prefabs imbriqués.

L’objectif n’est pas seulement de « mettre des pixels dans le moteur ». Vous avez besoin de :

• Hiérarchie et nommage corrects des calques
• Ancres et zones de sécurité qui survivent aux différentes résolutions
• Prefabs réutilisables au lieu d’objets de scène uniques
• Un chemin pour itérer lorsque le PSD change

Ce guide présente un workflow d’import en 5 minutes utilisant VberAI Studio – l’AI Studio de VberAI pour les pipelines design-vers-moteur (PSD / Figma à gauche, sortie prête pour le moteur à droite). Nous couvrons également ce qu’il faut préparer dans votre PSD pour que l’import reste propre.

Ce dont vous avez besoin avant de commencer

Rassemblez ces éléments avant d’ouvrir Unity :

• Unity 2022.3 LTS ou Unity 6 (UI Toolkit est optionnel ; ce guide se concentre sur uGUI)
• Un PSD avec calques (pas un export PNG aplati)
• VberAI Studio sur VberAI (AI Studio)
• Un projet Unity vide ou existant avec un Canvas dans la scène (Scale With Screen Size recommandé)

Liste de contrôle hygiène PSD (fait gagner le plus de temps) :

Pratique	Pourquoi c’est important
Un widget logique par groupe de calques	Correspond proprement aux racines de prefabs
Noms cohérents (Btn_Start, Panel_HUD)	Plus facile à trouver dans la hiérarchie Unity
Éviter les effets que Photoshop fusionne de manière imprévisible	Moins de corrections manuelles sur les composants Image
Exporter en @1x ou documenter votre échelle	Empêche les RectTransform surdimensionnés

Le workflow en 5 minutes avec AI Studio

Minute 1 — Téléverser et inspecter les calques

1. Ouvrez AI Studio et créez un nouvel import depuis PSD.
2. Téléversez votre fichier .psd.
3. Dans le panneau des calques, vérifiez que les groupes correspondent aux blocs UI (en-tête, pied de page, rangée de boutons, popup).

AI Studio préserve la structure PSD au lieu de vous donner un atlas de textures unique que vous devez rétro-ingénierer.

Minute 2 — Prévisualiser sur le canvas

1. Sélectionnez l’artboard racine ou le groupe d’écran principal.
2. Utilisez le canvas central pour vérifier l’espacement, les polices et l’ordre de superposition.
3. Corrigez les problèmes évidents dans l’inspecteur (renommez les groupes, masquez les calques de débogage).

Si un calque est clairement décoratif vs interactif, étiquetez-le ou regroupez-le maintenant – cela réduit le nettoyage dans Unity.

Minute 3 — Mapper vers la sémantique Unity UI

Dans les paramètres d’export :

• Moteur cible : Unity
• Type de sortie : prefab UI / hiérarchie prête pour la scène (pas seulement des sprites bruts)
• Préférer TextMeshPro pour les calques de texte lorsque disponible
• Conserver les candidats 9-slice (panneaux, boutons) comme images redimensionnables

AI Studio traduit les calques de conception en concepts moteur : RectTransform pour la mise en page, Image pour les sprites, et composants texte – pas seulement des PNG aplatis déposés sur un Canvas.

Minute 4 — Exporter vers Unity

1. Cliquez sur Exporter vers Unity (ou téléchargez le package Unity / patch de projet, selon votre workflow Studio).
2. Dans Unity, importez le package dans Assets/UI/ (ou votre convention de dossier d’équipe).
3. Ouvrez le prefab généré – vérifiez les enfants du Canvas et les ancres.

Vous devriez voir une hiérarchie de prefab qui reflète vos groupes PSD, prête à être glissée sous un Canvas existant.

Minute 5 — Déposer dans la scène et test rapide

1. Glissez le prefab dans le Canvas de votre scène.
2. Entrez en Play Mode et testez en 16:9 et en ratio de téléphone grand.
3. Notez tout problème d’ancre ou de police de secours ; ajustez en mode prefab, pas encore dans l’aller-retour PSD.

Si vous utilisez aussi Unity MCP pour l’automatisation de l’éditeur, vous pouvez demander à votre client IA de renommer les nœuds par lots ou de câbler les références de boutons après l’import – utile lorsque le PSD avait des noms de calques génériques comme Group 47.

Alternative manuelle (si vous sautez AI Studio)

Sans automatisation, le chemin classique est :

1. Exporter les slices depuis Photoshop en PNG
2. Importer les sprites dans Unity
3. Créer manuellement les objets Image / Text
4. Reconstruire la mise en page avec les ancres RectTransform

Cela prend souvent 30 à 90 minutes pour un seul écran, c’est pourquoi les équipes adoptent un outil design-vers-moteur pour le travail UI récurrent.

Corrections courantes après import

Le texte semble incorrect — Attribuez un asset de police TMP qui correspond à votre langage de design ; les polices de secours diffèrent souvent de Photoshop.

UI floue sur appareil — Vérifiez la Reference Resolution du Canvas et les Pixels Per Unit du sprite ; évitez de mettre à l’échelle les petites icônes au-dessus de 100 %.

Les boutons ne cliquent pas — Assurez-vous d’avoir un Graphic Raycaster sur le Canvas et Raycast Target activé sur les Images interactives.

Zone de sécurité coupée sur iPhone — Ajoutez un groupe de mise en page Safe Area racine ou un padding sur la racine du prefab.

Quand ré-importer vs patcher dans Unity

Situation	Recommandation
Le designer a changé les couleurs de 2 boutons	Patcher le prefab dans Unity
Mise en page restructurée (nouvel onglet de menu)	Ré-importer le PSD dans AI Studio
Nouvel écran ajouté	Nouvel artboard PSD → nouveau prefab
Localisation ajoutée	Préférer TMP + tables de chaînes dans Unity

Garder le PSD comme source de vérité pour la mise en page, et Unity pour le câblage et le comportement, évite les douleurs de fusion.

Comment cela s’intègre dans la pile VberAI

VberAI Studio gère la structure design → Unity UI. Unity MCP (optionnel) vous aide à script des tâches répétitives de l’éditeur après l’import – connecter des boutons, remplacer des sprites, ou valider des références de prefab. AI Super Matting est utile lorsque les calques d’icônes ont besoin d’un alpha propre avant de devenir des composants Image.

Ensemble, ils raccourcissent la boucle de la maquette à l’UI jouable sans abandonner Photoshop comme outil de design que vos artistes utilisent déjà.

Conclusion

Importer un PSD dans Unity UI en cinq minutes est réaliste lorsque vous traitez le PSD comme des données structurées – pas comme une seule image – et utilisez AI Studio pour émettre une hiérarchie prête pour Unity au lieu d’un travail manuel de RectTransform. Préparez des groupes de calques nommés, exportez avec la sémantique Unity UI, déposez le prefab sous votre Canvas, et testez deux ratios d’aspect.

Prêt à essayer sur votre prochain écran ? Ouvrez VberAI Studio, téléversez un PSD avec calques, et exportez votre premier prefab Unity UI en une seule séance.