Figma vers Godot UI : Exporter une hiérarchie de contrôles avec AI Studio (étape par étape)

La plupart des UI de jeu commencent dans Figma : menus principaux, HUD, écrans de boutique, paramètres. Dans Godot, vous avez besoin d’un arbre Control maintenable—MarginContainer, VBoxContainer, TextureRect, Label, Button, et Theme—pas d’un dossier de PNG non groupés.

Le goulot d’étranglement habituel est le milieu : le design change constamment les Frames tandis que l’ingénierie reconstruit les conteneurs et les ancres à la main. Cet article couvre un chemin reproductible : utiliser VberAI Studio (AI Studio en abrégé) pour transformer la structure Figma en hiérarchie Control prête pour Godot, de l’importation aux vérifications dans l’éditeur.

Pour comparer quand la construction manuelle vs AI Studio a du sens, voir Figma vers Godot : Manuel vs AI Studio. Pour le chemin Unity, voir Figma vers Unity UI.

Critères de fin : ce que « Dans Godot » signifie

Les textures seules ne comptent pas. Vous devriez aussi avoir :

1. Un arbre de nœuds qui correspond à des Frames Figma significatives (barre supérieure, liste, barre inférieure, etc.)
2. Un chrome principal qui tient sous 16:9, portrait, et tailles fenêtrées sans retuner tout l’arbre
3. Des couches de texte qui restent Label (ou les nœuds de texte de votre projet) quand c’est possible—pas cuites dans des images
4. Un moyen de ré-exporter après les changements de chrome Figma, au lieu de reconstruire la scène de zéro

Les signaux, la liaison de données et les clés de localisation appartiennent toujours à Godot. AI Studio supprime « reconstruire la coquille de mise en page à partir de la maquette ».

Prérequis

Élément	Notes
Figma	Écrans divisés en Frames avec des noms lisibles
AI Studio	Accès à VberAI Studio
Godot	Préférez un projet Godot 4.x ; définissez la cible d’exportation sur Godot
Conventions d’actifs	Accordez-vous sur les dossiers de scènes UI (par ex. res://ui/generated/) et l’emplacement du Theme

Évitez de livrer une capture d’écran plein écran aplatie—cela vous ramène au découpage manuel.

Étape 1 : Organisez Figma pour qu’il se lise comme un arbre UI

Un petit nettoyage avant l’importation coûte moins cher que de diviser des nœuds dans le moteur plus tard.

Pratique	Pourquoi
Noms de Frame clairs (Panel_HUD, Btn_Play, List_Item)	Les noms deviennent les noms de nœuds Godot
Utilisez des Frames / Auto Layout pour les groupes ; évitez de fusionner des écrans entiers	La hiérarchie reste reconnaissable après l’importation
Gardez le texte comme couches de texte quand vous le pouvez	Mappage Label plus facile
Séparez les panneaux nine-slice des icônes fixes	Les règles d’étirement restent claires
Masquez les Frames de brouillon et les variantes inutilisées	Moins de bruit dans l’arbre d’exportation

Étape 2 : Importez Figma dans AI Studio

1. Ouvrez VberAI Studio
2. Démarrez une importation, choisissez Figma, et téléchargez le fichier (ou utilisez la connexion Figma prise en charge par le produit)
3. Dans l’arbre des couches / Frames, confirmez les écrans que vous livrez réellement—pas chaque brouillon dans le fichier

Idéalement, vous voyez la structure à gauche, l’aperçu du canevas au milieu, et les options d’exportation orientées moteur à droite. Confirmez la structure avant d’exporter.

Étape 3 : Vérifiez la hiérarchie avant l’exportation

Sur le canevas, vérifiez :

• L’imbrication des panneaux correspond à l’en-tête / corps / pied de page (ou vos conventions de chrome)
• Les zones cliquables des boutons sont séparées des icônes décoratives
• Le texte localisable est toujours des couches de texte
• Les panneaux extensibles vs les icônes à taille fixe sont distingués

Corrigez les noms ou le regroupement dans AI Studio quand vous le pouvez. Démêler un .tscn cassé dans Godot coûte plus cher.

Pour de petites modifications de mise en page, décrivez l’intention en langage naturel (resserrer l’espace entre le titre et le bouton principal, unifier la hauteur des éléments de liste, masquer les badges de brouillon). L’objectif est de régler le chrome avant qu’il ne devienne des objets moteur—pas de redessiner tout l’ensemble artistique via le chat.

Étape 4 : Exportez pour Godot

Définissez le moteur cible sur Godot. Préférez une hiérarchie Control / scène plutôt que « sprites uniquement ».

Après l’exportation, dans Godot :

1. Placez les actifs dans le dossier convenu (par ex. res://ui/generated/)
2. Attachez la scène exportée sous un CanvasLayer ou la racine UI de votre projet
3. Confirmez que la racine est un arbre Control (ou conteneur) sensé
4. Prévisualisez plusieurs résolutions dans l’éditeur
5. Connectez pressed et d’autres signaux, ainsi que le remplissage de données, avec GDScript / C# comme d’habitude

La logique reste dans le projet. Ce que vous sautez, c’est l’empilement manuel de chaque TextureRect / Label / conteneur depuis Figma.

Étape 5 : Liste de contrôle d’acceptation dans l’éditeur

Vérification	Critères de réussite
Noms de nœuds	Correspondent aux Frames clés ; pas un tas d’index Node2D / Control sans signification
Mise en page	Le chrome reste utilisable lorsque la fenêtre s’étire
Texte	Changer le texte du Label ne nécessite pas de ré-exporter tout l’écran comme art
Theme	Les polices et les couleurs peuvent se connecter au Theme du projet, ou vous savez que le Theme nécessite encore une passe manuelle
Ré-exportation	Après les changements de chrome Figma, une nouvelle exportation peut remplacer ou côtoyer la scène—pas vous laisser bloqué

Les changements de polices, les zones de sécurité et la localisation nécessitent généralement encore une passe. C’est un polish normal, pas un pipeline échoué.

FAQ

Est-ce la même chose que les plugins Figma « to code » ?
La plupart de ceux-ci ciblent le web. Godot a besoin de conventions Control / conteneur / Theme. L’exportation adaptée au moteur n’est pas le même produit que la génération de code web.

Concevons-nous toujours dans Figma ?
Oui. AI Studio consomme la structure de conception ; il ne définit pas la direction artistique. La mise en page et les jetons viennent toujours de Figma.

Où s’intègre Godot MCP ?
AI Studio gère la conception → structure Control. Godot MCP aide après que la scène est dans le projet—renommer les nœuds, connecter les signaux, inspecter l’arbre depuis Cursor et des clients similaires. MCP ne « génère pas une UI complète à partir d’une image ». Installation : Installation de Godot MCP.

La première exportation sera-t-elle pixel-perfect ?
Généralement non. Le gain est la migration de structure en quelques minutes au lieu d’une reconstruction d’une demi-journée ; les pixels et le Theme se finalisent dans Godot.

Comment ré-exécuter après des changements de design

Changement Figma	Suggestion
Lignes/colonnes de chrome, nouveaux onglets	Ré-exportez via AI Studio
Teinte d’icône ou copie uniquement	Préférez la scène Godot / Theme / tables de traduction
Nouvelle planche artistique complète	Nouvelle exportation → nouveau .tscn ou remplacez le chemin convenu