Need
Source de la maquette
Default options
Why it's needed
Le cadre ou le composant sélectionné dans Figma sert de référence pour l’intégration.
Codex use case
Transformez vos maquettes Figma en code
Créez une interface soignée à partir d’une sélection Figma en vous appuyant sur les données structurées de la maquette et en vérifiant le rendu.
Difficulty Intermediate
Time horizon 1h
Avec Codex, récupérez dans Figma les données de la maquette, ses ressources et ses variantes, puis générez le code correspondant en respectant le design system du dépôt. Avec Playwright, comparez l’interface à la maquette Figma et ajustez-la jusqu’à obtenir le rendu attendu.
Best for
- Intégration, 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 les données structurées de la maquette
Contents
Transformez vos maquettes Figma en code
Créez une interface soignée à partir d’une sélection Figma en vous appuyant sur les données structurées de la maquette et en vérifiant le rendu.
Avec Codex, récupérez dans Figma les données de la maquette, ses ressources et ses variantes, puis générez le code correspondant en respectant le design system du dépôt. Avec Playwright, comparez l’interface à la maquette Figma et ajustez-la jusqu’à obtenir le rendu attendu.
Intermediate
1h
Avec Codex, récupérez dans Figma les données de la maquette, ses ressources et ses variantes, puis générez le code correspondant en respectant le design system du dépôt. Avec Playwright, comparez l’interface à la maquette Figma et ajustez-la jusqu’à obtenir le rendu attendu.
Intermediate
1h
Related links
Best for
- Intégration, 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 les données structurées de la maquette
Skills & Plugins
- Traduisez les maquettes en code, associez les composants publiés à leurs fichiers source avec Code Connect et générez des règles de design system propres au projet pour pouvoir les réutiliser à chaque intégration de maquette Figma.
- Vérifiez dans un véritable navigateur le rendu de l’interface et son comportement selon la taille de l’écran.
| Skill | Why use it |
|---|---|
| Figma | Traduisez les maquettes en code, associez les composants publiés à leurs fichiers source avec Code Connect et générez des règles de design system propres au projet pour pouvoir les réutiliser à chaque intégration de maquette Figma. |
| Playwright | Vérifiez dans un véritable navigateur le rendu de l’interface et son comportement selon la taille de l’écran. |
Starter prompt
Intégrez cette maquette Figma au projet actuel à l’aide du skill Figma.
Exigences :
- Appelez d’abord `get_design_context` sur le nœud ou le cadre précis à intégrer.
- Si la réponse est tronquée, utilisez `get_metadata` pour obtenir la structure du fichier, puis appelez de nouveau `get_design_context` pour récupérer uniquement les nœuds nécessaires.
- Exécutez `get_screenshot` sur la variante exacte à intégrer avant de commencer à coder.
- Réutilisez les composants et les tokens du design system existant.
- Adaptez les éléments fournis par Figma aux utilitaires du dépôt et à ses conventions de création de composants, sans créer de système parallèle.
- Reproduisez fidèlement les espacements, la mise en page, la hiérarchie visuelle et le comportement de l’interface selon la taille de l’écran.
- Respectez les conventions du dépôt pour le routage, la gestion de l’état et la récupération des données.
- Adaptez la page aux écrans d’ordinateur et de mobile.
- Si Figma fournit des images ou des fichiers SVG hébergés sur localhost, utilisez directement ces sources, sans créer de visuels de substitution ni ajouter de nouveaux paquets d’icônes.
Validation :
- Comparez l’apparence et le comportement de l’interface terminée à ceux de la maquette Figma.
- Utilisez Playwright pour vérifier que l’interface correspond à la maquette. Si nécessaire, ajustez l’interface et répétez la vérification jusqu’à ce qu’elle soit conforme.
Intégrez cette maquette Figma au projet actuel à l’aide du skill Figma.
Exigences :
- Appelez d’abord `get_design_context` sur le nœud ou le cadre précis à intégrer.
- Si la réponse est tronquée, utilisez `get_metadata` pour obtenir la structure du fichier, puis appelez de nouveau `get_design_context` pour récupérer uniquement les nœuds nécessaires.
- Exécutez `get_screenshot` sur la variante exacte à intégrer avant de commencer à coder.
- Réutilisez les composants et les tokens du design system existant.
- Adaptez les éléments fournis par Figma aux utilitaires du dépôt et à ses conventions de création de composants, sans créer de système parallèle.
- Reproduisez fidèlement les espacements, la mise en page, la hiérarchie visuelle et le comportement de l’interface selon la taille de l’écran.
- Respectez les conventions du dépôt pour le routage, la gestion de l’état et la récupération des données.
- Adaptez la page aux écrans d’ordinateur et de mobile.
- Si Figma fournit des images ou des fichiers SVG hébergés sur localhost, utilisez directement ces sources, sans créer de visuels de substitution ni ajouter de nouveaux paquets d’icônes.
Validation :
- Comparez l’apparence et le comportement de l’interface terminée à ceux de la maquette Figma.
- Utilisez Playwright pour vérifier que l’interface correspond à la maquette. Si nécessaire, ajustez l’interface et répétez la vérification jusqu’à ce qu’elle soit conforme.
Introduction
À partir d’une sélection précise dans Figma, Codex peut créer une interface soignée qui respecte les conventions de votre projet.
Grâce au skill Figma, Codex peut utiliser le serveur MCP de Figma pour récupérer le contexte structuré de la maquette, les variables, les ressources graphiques et la variante exacte à implémenter.
Avec le skill Playwright interactive, Codex peut ouvrir l’application dans un véritable navigateur, comparer l’interface à la maquette Figma et ajuster la mise en page ou les interactions jusqu’à ce que le résultat se rapproche de la maquette.
Préparez votre projet Figma
Plus votre fichier Figma est bien organisé, meilleure sera la première implémentation. Pour faciliter le passage de la maquette au code :
- Utilisez autant que possible des variables ou des tokens de design, en particulier pour les couleurs, la typographie et les espacements
- Créez des composants pour les éléments d’interface réutilisables au lieu de dupliquer des calques détachés
- Privilégiez la mise en page automatique au positionnement manuel chaque fois que possible
- Nommez les cadres et les calques de façon à identifier facilement l’écran principal, l’état et les variantes
- Conservez si possible dans le fichier les icônes et les images à utiliser pour que Codex sache lesquelles intégrer
Codex dispose ainsi d’une maquette mieux structurée pour créer une interface robuste, prête pour la production.
Précisez vos attentes
Plus vous décrivez précisément les interactions attendues et le style souhaité, meilleur sera le résultat.
Si un état, un point de rupture ou une interaction a de l’importance, signalez-le. Si le fichier contient plusieurs variantes similaires, indiquez à Codex laquelle fait référence.
Précisez quels éléments doivent reproduire fidèlement la maquette et dans quels cas les conventions du dépôt doivent primer. Codex pourra ainsi faire les bons compromis.
Préparez le système de design
Codex est plus efficace lorsque le dépôt cible dispose déjà d’un ensemble de composants bien structuré. Il peut réutiliser automatiquement vos composants et votre système de design sans avoir à les recréer.
Si nécessaire, indiquez à Codex quelles primitives réutiliser, où trouver vos tokens et quels boutons, champs de saisie, cartes, styles typographiques et icônes font référence dans le dépôt.
Le résultat renvoyé par le serveur MCP de Figma ressemble souvent à du code React avec Tailwind. Utilisez-le comme référence pour la structure. Pour le code final, demandez à Codex de l’adapter aux utilitaires, aux wrappers de composants, au système de couleurs, à l’échelle typographique et aux tokens d’espacement du projet. Demandez-lui aussi de suivre les conventions du projet pour le routage, la gestion de l’état et la récupération des données.
Procédure
Partez d’une sélection dans Figma
Copiez le lien vers le cadre, le composant ou la variante Figma que vous souhaitez implémenter. Le serveur MCP de Figma utilise ce lien pour identifier la sélection. Veillez donc à cibler le nœud exact à implémenter plutôt qu’un cadre parent voisin.
Demandez à Codex d’utiliser Figma
La maquette Figma doit guider la première implémentation. Demandez à Codex de suivre la procédure du serveur MCP de Figma avant de commencer à coder.
Incluez les instructions suivantes dans votre prompt :
1. Exécutez d’abord `get_design_context` pour le nœud ou le cadre exact à implémenter.
2. Si la réponse est trop volumineuse ou tronquée, exécutez `get_metadata` pour obtenir la structure du fichier, puis relancez `get_design_context` uniquement pour les nœuds nécessaires.
3. Exécutez `get_screenshot` pour la variante exacte à implémenter.
4. Attendez de disposer à la fois du contexte de la maquette 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 celles du système de design du projet et respectez les espacements, la hiérarchie et le comportement de la maquette aux différentes tailles d’écran.
6. Si Figma renvoie une image sur localhost ou une source SVG, utilisez-la directement. Ne créez pas de visuel temporaire et n’ajoutez pas de nouveau package d’icônes si la réponse contient déjà la ressource.
Une fois la première implémentation en place, Codex utilisera Playwright pour vérifier l’interface dans un véritable navigateur et réduire les écarts qui subsistent par rapport à la maquette, tant dans le rendu que dans les interactions.
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| Source de la maquette | Figma | Le cadre ou le composant sélectionné dans Figma sert de référence pour l’intégration. |
Related use cases
Créez des interfaces web qui s’adaptent aux différentes tailles d’écran
Avec Codex, transformez vos captures d’écran et vos consignes de design en code qui respecte...
Front-end Design
Passez de l’idée à la preuve de concept
Avec Codex et ImageGen, partez d’une idée encore vague pour définir une piste visuelle
Front-end Engineering
Créer une visite guidée avec l’IA
Utilisez Codex et WebMCP pour ajouter une visite guidée à votre application web
Front-end Engineering