Vous ouvrez un fichier Figma étiqueté pour découvrir trente cadres sans nom, un calque d'arrière-plan verrouillé et un bouton imbriqué dans

Vous avez ouvert un fichier Figma étiqueté final_FINAL_v3 pour n'y trouver que trente cadres sans nom, un calque d'arrière-plan verrouillé et un bouton imbriqué dans un groupe contenant également un cercle décoratif aléatoire. C'est plus courant que personne ne veut l'admettre. Lorsque vous soumettez ce chaos à un outil de codage par IA comme Codex, le résultat reflète l'entrée. Le principe du « garbage in, garbage out » s'applique toujours, même avec les grands modèles de langage.

L'anatomie d'un transfert désordonné

Les designers travaillent vite. Ils dupliquent des cadres, laissent visibles d'anciennes explorations et se fient à un alignement à l'œil nu plutôt qu'à un auto-layout structuré. Vous vous retrouvez avec des noms de calques comme « Frame 3827 » à côté de boutons fonctionnels. Des dégradés décoratifs partagent le même groupe que votre appel à l'action principal. Des maquettes d'appareils enveloppent l'interface réelle dans des éléments d'interface qui ressemblent à du contenu. Des calques masqués restent visibles dans le fichier, attendant de perdre n'importe quel analyseur automatisé.

Pour un développeur utilisant Codex, le problème ne vient pas de la paresse de l'un ou de l'autre. L'IA manque de reconnaissance de formes humaine. Elle lit l'arborescence des calques littéralement. Lorsqu'un designer place un bouton, un titre et un flou d'arrière-plan dans un seul groupe aplati, Codex les traite comme des éléments frères ayant le même poids structurel. Le résultat est un frontend qui semble structurellement cassé avant même que vous n'ayez examiné les couleurs.

Un flux de travail pour s'en rapprocher

Vous pouvez toujours produire du code propre à partir d'une source désordonnée si vous agissez comme un éditeur plutôt que comme un simple convertisseur. L'objectif est de donner à Codex suffisamment de contexte pour qu'il puisse faire des suppositions éclairées, puis de contraindre ces suppositions pour qu'elles restent dans une architecture frontend cohérente.

Extrayez tout avant que l'IA ne le voie. Activez le Dev Mode si vous y avez accès. Copiez les propriétés CSS brutes du panneau d'inspection. Exportez les variables de couleur et les styles de texte. Soumettez ces données structurées à Codex en même temps que votre prompt. Les captures d'écran montrent la réalité spatiale ; les métadonnées vous donnent les codes hexadécimaux exacts, les piles de polices et les hauteurs de ligne. L'un sans l'autre laisse le modèle deviner la moitié de l'équation.

Soyez impitoyable sur les systèmes de mise en page dans vos prompts. Ne demandez jamais à Codex de simplement « coder cette page ». Dites-lui exactement quoi utiliser : « Construis la navigation avec CSS Flexbox et la grille du tableau de bord avec CSS Grid. N'utilise pas de positionnement absolu, sauf pour placer le badge de notification par rapport à l'icône. » Les outils d'IA utilisent souvent le positionnement absolu par défaut car ils analysent directement les coordonnées x-y fixes du fichier de conception. Des instructions explicites permettent de contourner cette tendance.

Utilisez les captures d'écran comme garde-fous. Exportez les cadres en résolution 2x. Téléchargez-les en même temps que votre contexte textuel. Lorsque Codex génère sa première version, ouvrez le résultat dans un navigateur à côté de la capture d'écran. Recherchez les décalages d'espacement, les bordures manquantes et les incohérences de graisse de police. L'IA saisira généralement la composition globale correctement, tout en se trompant sur le padding spécifique.

Prévoyez une phase de correction. Comparez le résultat rendu à votre référence visuelle et corrigez les erreurs à la main. L'IA peut transformer une étiquette de texte en balise image ou envelopper une carte dans un div générique au lieu d'un <article> ou d'une <section>. Cette étape de révision n'est pas optionnelle. C'est l'étape où vous transformez le code généré en code de production.

Là où l'IA s'égare

Même avec un flux de travail méticuleux, certains schémas désordonnés font systématiquement trébucher Codex.

Le bruit décoratif est le principal piège. Les fichiers Figma incluent souvent des lueurs d'arrière-plan, des modèles de barre d'état et des icônes illustratives qui ne font pas partie de l'interface fonctionnelle. Sans étiquettes claires, l'IA les code comme des éléments DOM permanents. Vous vous retrouvez avec des balises div dédiées pour des cercles flous qui auraient dû être un background CSS ou une box-shadow.

Une hiérarchie aplatie brise la détection des composants. Dans un fichier propre, une carte est un cadre auto-layout contenant une image, un titre et une action. Dans un fichier désordonné, ces trois éléments peuvent se trouver au niveau racine, alignés visuellement mais structurellement orphelins. Codex manque complètement la limite de la carte et produit une séquence plate d'éléments sans parent commun.

Séparer le signal du bruit

Ce texte soulève des questions spécifiques auxquelles chaque développeur est confronté lorsqu'il fait le pont entre le design et le code généré par IA.

Faites-vous davantage confiance aux métadonnées de Figma ou aux captures d'écran ?

Faites confiance aux deux, mais pour des tâches différentes. Utilisez les métadonnées Figma pour les valeurs exactes : couleurs, tailles de police, tokens d'espacement et assets exportés. Les captures d'écran l'emportent pour la structure et la hiérarchie visuelle. Si les métadonnées indiquent qu'un calque se trouve à x: 120, y: 300, mais que la capture d'écran le montre centré dans une carte, faites confiance à la capture d'écran pour la mise en page et aux métadonnées pour le style. Laissez la capture d'écran servir de référence absolue. Laissez le panneau d'inspection fournir les valeurs exactes.

Comment séparer l'UI des cadres d'appareils ?

Avant d'exporter quoi que ce soit, masquez tous les calques qui ne font pas partie de l'UI. Sélectionnez la maquette de téléphone ou le cadre de bureau et désactivez la visibilité. Si le fichier est trop désordonné pour distinguer le modèle du contenu, recherchez les éléments répétitifs sur plusieurs écrans. La barre d'état, l'indicateur d'accueil et la structure de navigation se trouvent généralement aux mêmes positions. Les boutons, formulaires et contenus réels se situent dans la partie centrale variable. Masquez tout ce qui semble fixe sur chaque écran. Ce qui reste constitue votre véritable interface.

Comment trouver les limites des composants dans un fichier mal organisé ?

Recherchez les regroupements visuels, puis vérifiez avec l'espacement. Si quatre éléments sont regroupés avec des écarts constants de 16px et partagent un même remplissage d'arrière-plan, ils appartiennent probablement à un même conteneur, même si le designer ne les a jamais groupés. Vérifiez la liste des calques Figma pour voir s'ils sont empilés de manière consécutive.