Need
Source du design
Default options
Why it's needed
La sélection d’une frame ou d’un composant précis fournit une base concrète à l’implémentation.
Codex use case
Transformer des designs Figma en code
Transformez des sélections Figma en interfaces soignées grâce à un contexte de design structuré et à des vérifications visuelles.
Difficulty Intermédiaire
Time horizon 1 h
Utilisez Codex pour récupérer depuis Figma le contexte de design, les ressources et les variantes, puis les convertir en code conforme au système de design du dépôt. Utilisez ensuite Playwright pour comparer l’implémentation à la référence Figma et l’affiner jusqu’à obtenir le rendu attendu.
Idéal pour
- Implémentation, dans une base de code existante, d’écrans ou de parcours déjà conçus dans Figma
- Équipes qui souhaitent que Codex s’appuie sur un contexte de design structuré
Contents
Transformer des designs Figma en code
Transformez des sélections Figma en interfaces soignées grâce à un contexte de design structuré et à des vérifications visuelles.
Utilisez Codex pour récupérer depuis Figma le contexte de design, les ressources et les variantes, puis les convertir en code conforme au système de design du dépôt. Utilisez ensuite Playwright pour comparer l’implémentation à la référence Figma et l’affiner jusqu’à obtenir le rendu attendu.
Intermédiaire
1 h
Utilisez Codex pour récupérer depuis Figma le contexte de design, les ressources et les variantes, puis les convertir en code conforme au système de design du dépôt. Utilisez ensuite Playwright pour comparer l’implémentation à la référence Figma et l’affiner jusqu’à obtenir le rendu attendu.
Intermédiaire
1 h
Liens connexes
Idéal pour
- Implémentation, dans une base de code existante, d’écrans ou de parcours déjà conçus dans Figma
- Équipes qui souhaitent que Codex s’appuie sur un contexte de design structuré
Skills et plugins
- Implémentez les designs dans le code, créez des associations Code Connect entre les composants publiés et les fichiers sources, puis générez des règles propres au projet pour son système de design afin de rendre reproductibles les workflows de Figma vers le code.
- Contrôlez le comportement responsive et vérifiez l’interface implémentée dans un navigateur réel.
| Skill | Why use it |
|---|---|
| Figma | Implémentez les designs dans le code, créez des associations Code Connect entre les composants publiés et les fichiers sources, puis générez des règles propres au projet pour son système de design afin de rendre reproductibles les workflows de Figma vers le code. |
| Playwright | Contrôlez le comportement responsive et vérifiez l’interface implémentée dans un navigateur réel. |
Prompt de démarrage
Implémentez dans le projet actuel le design Figma à l’aide du skill Figma.
Exigences :
- Commencez par exécuter `get_design_context` pour cibler précisément le nœud ou la frame.
- Si la réponse est tronquée, utilisez `get_metadata` pour cartographier le fichier, puis récupérez uniquement les nœuds nécessaires avec `get_design_context`.
- Exécutez `get_screenshot` pour la variante exacte avant de commencer à coder.
- Réutilisez les composants et tokens du système de design existant.
- Adaptez la sortie Figma aux utilitaires et aux conventions de composants de ce dépôt au lieu d’inventer un système parallèle.
- Reproduisez fidèlement l’espacement, la mise en page, la hiérarchie et le comportement responsive.
- Respectez les conventions du dépôt pour le routage, la gestion de l’état et la récupération des données.
- Veillez à ce que la page soit responsive sur ordinateur comme sur mobile.
- Si Figma renvoie des sources d’images ou de SVG pointant vers localhost, utilisez-les directement sans créer d’éléments de remplacement ni ajouter de nouveau package d’icônes.
Validation :
- Comparez l’interface terminée à la référence Figma pour vérifier à la fois son rendu et son comportement.
- Utilisez Playwright pour vérifier que l’interface correspond à la référence et apportez les ajustements nécessaires jusqu’à ce qu’elle lui corresponde.
Implémentez dans le projet actuel le design Figma à l’aide du skill Figma.
Exigences :
- Commencez par exécuter `get_design_context` pour cibler précisément le nœud ou la frame.
- Si la réponse est tronquée, utilisez `get_metadata` pour cartographier le fichier, puis récupérez uniquement les nœuds nécessaires avec `get_design_context`.
- Exécutez `get_screenshot` pour la variante exacte avant de commencer à coder.
- Réutilisez les composants et tokens du système de design existant.
- Adaptez la sortie Figma aux utilitaires et aux conventions de composants de ce dépôt au lieu d’inventer un système parallèle.
- Reproduisez fidèlement l’espacement, la mise en page, la hiérarchie et le comportement responsive.
- Respectez les conventions du dépôt pour le routage, la gestion de l’état et la récupération des données.
- Veillez à ce que la page soit responsive sur ordinateur comme sur mobile.
- Si Figma renvoie des sources d’images ou de SVG pointant vers localhost, utilisez-les directement sans créer d’éléments de remplacement ni ajouter de nouveau package d’icônes.
Validation :
- Comparez l’interface terminée à la référence Figma pour vérifier à la fois son rendu et son comportement.
- Utilisez Playwright pour vérifier que l’interface correspond à la référence et apportez les ajustements nécessaires jusqu’à ce qu’elle lui corresponde.
Introduction
Lorsque vous disposez d’une sélection Figma précise, Codex peut la transformer en une interface soignée tout en respectant les conventions déjà établies dans votre projet.
Avec le skill Figma, Codex peut utiliser le serveur MCP de Figma pour récupérer un contexte de design structuré, des variables, des ressources et la variante exacte à implémenter.
Grâce au skill interactif Playwright, Codex peut ouvrir l’application dans un navigateur réel, comparer l’implémentation à la référence Figma, puis ajuster la mise en page ou le comportement jusqu’à rapprocher le résultat de la cible.
Configurez votre projet Figma
Plus votre fichier Figma est propre, meilleure sera la première implémentation. Pour faciliter le passage de relais :
- Utilisez des variables ou des tokens de design dès que possible, en particulier pour les couleurs, la typographie et l’espacement
- Créez des composants pour les éléments d’interface réutilisables au lieu de dupliquer des calques dissociés
- Utilisez autant que possible la mise en page automatique au lieu du positionnement manuel
- Nommez les frames et les calques assez clairement pour que l’écran principal, l’état et les variantes soient faciles à identifier
- Conservez si possible les icônes et images réelles dans le fichier pour que Codex n’ait pas à les deviner
Codex dispose ainsi d’une structure plus claire pour produire une interface robuste et prête pour la production.
Soyez précis
Plus vous préciserez les modes d’interaction attendus et le style souhaité, meilleur sera le résultat.
Si un état, un point de rupture ou une interaction a de l’importance, indiquez-le. Si le fichier contient plusieurs variantes proches, indiquez à Codex laquelle doit servir de référence.
Plus vous préciserez clairement ce qui doit être reproduit à l’identique et les aspects pour lesquels les conventions du dépôt doivent primer, plus Codex pourra effectuer facilement les bons arbitrages.
Préparez le système de design
Codex fonctionne mieux lorsque le dépôt cible dispose déjà d’une couche de composants clairement définie. Il peut automatiquement réutiliser vos composants et votre système de design existants au lieu de les recréer de zéro.
Si vous le jugez nécessaire, indiquez à Codex les primitives à réutiliser, l’emplacement de vos tokens et ce qui fait référence dans le dépôt pour les boutons, les champs de saisie, les cartes, la typographie et les icônes.
Considérez la sortie du MCP de Figma, qui ressemble souvent à du code React avec Tailwind, comme une référence structurelle plutôt que comme le style de code final. Demandez à Codex d’adapter cette sortie aux utilitaires réellement employés par le projet, aux wrappers de composants, au système de couleurs, à l’échelle typographique, aux tokens d’espacement ainsi qu’aux conventions de routage, de gestion de l’état et de récupération des données.
Workflow
Commencez par une sélection Figma
Copiez le lien vers la frame, le composant ou la variante Figma précise à implémenter. Comme le workflow MCP de Figma repose sur les liens, celui-ci doit pointer vers le nœud exact souhaité, et non vers une frame parente située à proximité.
Demandez à Codex d’utiliser Figma
La première passe doit s’appuyer sur Figma. Demandez à Codex de suivre le workflow MCP de Figma avant de commencer l’implémentation.
Éléments à inclure dans votre prompt :
1. Commencez par exécuter `get_design_context` en ciblant précisément le nœud ou la frame.
2. Si la réponse est trop volumineuse ou tronquée, exécutez `get_metadata` pour cartographier le fichier, puis réexécutez `get_design_context` uniquement pour les nœuds nécessaires.
3. Exécutez `get_screenshot` pour la variante précise à implémenter.
4. Attendez de disposer à la fois du contexte du design et de la variante exacte avant de télécharger les ressources nécessaires et de commencer l’implémentation.
5. Adaptez le résultat aux conventions du dépôt : réutilisez les composants existants, remplacez si possible les classes utilitaires brutes par les équivalents du système du projet et respectez l’espacement, la hiérarchie et le comportement responsive du design.
6. Si Figma renvoie une source d’image ou de SVG pointant vers localhost, utilisez-la directement. Ne créez pas d’élément de remplacement et n’ajoutez pas de nouveau package d’icônes si la ressource figure déjà dans les données renvoyées.
Une fois la première implémentation en place, Codex utilisera Playwright pour vérifier l’interface dans un navigateur réel et corriger les derniers écarts visuels ou d’interaction.
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| Source du design | Figma | La sélection d’une frame ou d’un composant précis fournit une base concrète à l’implémentation. |
Cas d’utilisation associés
Créer des interfaces front-end responsives
Utilisez Codex pour convertir des captures d’écran et des briefs de design en code conforme...
Front-end Design
Passez de l’idée à la preuve de concept
Utilisez Codex avec ImageGen pour passer d’une idée encore sommaire à une orientation...
Front-end Ingénierie
Créer un site web pour un projet étudiant
Utilisez Sites pour définir le périmètre d’un site web simple, le créer et le tester à...
Front-end Code