figma-implement-design

Traduit les designs Figma en code d'application prêt pour la production avec une fidélité visuelle 1:1. À utiliser lors de l'implémentation du code UI à partir de fichiers Figma, lorsque l'utilisateur mentionne « implémenter le design », « générer du code », « implémenter un composant », fournit des URL Figma, ou demande de créer des composants correspondant aux spécifications Figma. Pour les écritures sur le canvas Figma via `use_figma`, utilisez `figma-use`.

npx skills add https://github.com/openai/skills --skill figma-implement-design

Implémenter la conception

Aperçu

Cette compétence fournit un flux de travail structuré pour traduire les conceptions Figma en code prêt pour la production avec une précision au pixel près. Elle assure une intégration cohérente avec le serveur Figma MCP, une utilisation appropriée des jetons de conception et une parité visuelle 1:1 avec les conceptions.

Limites de la compétence

  • Utilisez cette compétence lorsque le livrable est du code dans le dépôt de l'utilisateur.
  • Si l'utilisateur demande de créer/modifier/supprimer des nœuds dans Figma lui-même, basculez vers figma-use.
  • Si l'utilisateur demande de créer ou mettre à jour un écran de page complet dans Figma à partir du code ou d'une description, basculez vers figma-generate-design.
  • Si l'utilisateur demande uniquement des mappages Code Connect, basculez vers figma-code-connect-components.
  • Si l'utilisateur demande d'écrire des règles d'agent réutilisables (CLAUDE.md/AGENTS.md), basculez vers figma-create-design-system-rules.

Prérequis

  • Le serveur Figma MCP doit être connecté et accessible
  • L'utilisateur doit fournir une URL Figma au format : https://figma.com/design/:fileKey/:fileName?node-id=1-2
    • :fileKey est la clé de fichier
    • 1-2 est l'ID du nœud (le composant ou cadre spécifique à implémenter)
  • OU lors de l'utilisation du MCP figma-desktop : l'utilisateur peut sélectionner un nœud directement dans l'application de bureau Figma (aucune URL requise)
  • Le projet doit avoir un système de conception établi ou une bibliothèque de composants (préféré)

Flux de travail requis

Suivez ces étapes dans l'ordre. Ne sautez aucune étape.

Étape 1 : Obtenir l'ID du nœud

Option A : Analyser à partir de l'URL Figma

Lorsque l'utilisateur fournit une URL Figma, extrayez la clé de fichier et l'ID du nœud à transmettre comme arguments aux outils MCP.

Format d'URL : https://figma.com/design/:fileKey/:fileName?node-id=1-2

Extraire :

  • Clé de fichier : :fileKey (le segment après /design/)
  • ID du nœud : 1-2 (la valeur du paramètre de requête node-id)

Remarque : Lors de l'utilisation du MCP de bureau local (figma-desktop), fileKey n'est pas transmis comme paramètre aux appels d'outil. Le serveur utilise automatiquement le fichier actuellement ouvert, donc seul nodeId est nécessaire.

Exemple :

  • URL : https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
  • Clé de fichier : kL9xQn2VwM8pYrTb4ZcHjF
  • ID du nœud : 42-15

Option B : Utiliser la sélection actuelle de l'application de bureau Figma (MCP figma-desktop uniquement)

Lors de l'utilisation du MCP figma-desktop et l'utilisateur n'a PAS fourni d'URL, les outils utilisent automatiquement le nœud actuellement sélectionné à partir du fichier Figma ouvert dans l'application de bureau.

Remarque : L'invite basée sur la sélection ne fonctionne qu'avec le serveur MCP figma-desktop. Le serveur distant nécessite un lien vers un cadre ou une couche pour extraire le contexte. L'utilisateur doit avoir l'application de bureau Figma ouverte avec un nœud sélectionné.

Étape 2 : Récupérer le contexte de conception

Exécutez get_design_context avec la clé de fichier et l'ID du nœud extraits.

get_design_context(fileKey=":fileKey", nodeId="1-2")

Cela fournit les données structurées incluant :

  • Propriétés de mise en page (Auto Layout, contraintes, dimensionnement)
  • Spécifications typographiques
  • Valeurs de couleur et jetons de conception
  • Structure des composants et variantes
  • Valeurs d'espacement et de remplissage

Si la réponse est trop volumineux ou tronquée :

  1. Exécutez get_metadata(fileKey=":fileKey", nodeId="1-2") pour obtenir la carte de nœuds de haut niveau
  2. Identifiez les nœuds enfants spécifiques nécessaires à partir des métadonnées
  3. Récupérez les nœuds enfants individuels avec get_design_context(fileKey=":fileKey", nodeId=":childNodeId")

Étape 3 : Capturer une référence visuelle

Exécutez get_screenshot avec la même clé de fichier et le même ID de nœud pour une référence visuelle.

get_screenshot(fileKey=":fileKey", nodeId="1-2")

Cette capture d'écran sert de source de vérité pour la validation visuelle. Gardez-la accessible tout au long de l'implémentation.

Étape 4 : Télécharger les ressources requises

Téléchargez tous les actifs (images, icônes, SVG) renvoyés par le serveur Figma MCP.

IMPORTANT : Suivez ces règles d'actifs :

  • Si le serveur Figma MCP renvoie une source localhost pour une image ou un SVG, utilisez cette source directement
  • N'importez pas et n'ajoutez pas de nouveaux packages d'icônes - tous les actifs doivent provenir de la charge utile Figma
  • N'utilisez pas et ne créez pas d'espaces réservés si une source localhost est fournie
  • Les actifs sont servis via le point de terminaison des actifs intégré du serveur Figma MCP

Étape 5 : Traduire en conventions du projet

Traduisez la sortie Figma en conventions de framework, styles et du projet.

Principes clés :

  • Traitez la sortie Figma MCP (généralement React + Tailwind) comme une représentation de la conception et du comportement, non comme un style de code final
  • Remplacez les classes utilitaires Tailwind par les utilitaires préférés du projet ou les jetons du système de conception
  • Réutilisez les composants existants (boutons, entrées, typographie, enveloppes d'icônes) au lieu de dupliquer les fonctionnalités
  • Utilisez le système de couleurs, l'échelle typographique et les jetons d'espacement du projet de manière cohérente
  • Respectez les modèles existants de routage, gestion d'état et récupération de données

Étape 6 : Atteindre la parité visuelle 1:1

Efforts pour atteindre une parité visuelle au pixel près avec la conception Figma.

Directives :

  • Priorisez la fidélité Figma pour correspondre exactement aux conceptions
  • Évitez les valeurs codées en dur - utilisez les jetons de conception disponibles dans Figma
  • Lorsque des conflits surviennent entre les jetons du système de conception et les spécifications Figma, préférez les jetons du système de conception mais ajustez minimalement l'espacement ou les tailles pour correspondre aux visuels
  • Suivez les exigences WCAG pour l'accessibilité
  • Ajoutez la documentation des composants selon les besoins

Étape 7 : Valider par rapport à Figma

Avant de marquer comme complet, validez l'interface utilisateur finale par rapport à la capture d'écran Figma.

Liste de contrôle de validation :

  • [ ] La mise en page correspond (espacement, alignement, dimensionnement)
  • [ ] La typographie correspond (police, taille, poids, hauteur de ligne)
  • [ ] Les couleurs correspondent exactement
  • [ ] Les états interactifs fonctionnent comme conçus (hover, actif, désactivé)
  • [ ] Le comportement réactif suit les contraintes Figma
  • [ ] Les actifs s'affichent correctement
  • [ ] Les normes d'accessibilité sont respectées

Règles d'implémentation

Organisation des composants

  • Placez les composants de l'interface utilisateur dans le répertoire du système de conception désigné du projet
  • Suivez les conventions de nommage des composants du projet
  • Évitez les styles en ligne sauf si vraiment nécessaire pour les valeurs dynamiques

Intégration du système de conception

  • TOUJOURS utilisez les composants du système de conception du projet lorsque possible
  • Mappez les jetons de conception Figma aux jetons de conception du projet
  • Lorsqu'un composant correspondant existe, étendez-le plutôt que d'en créer un nouveau
  • Documentez tous les nouveaux composants ajoutés au système de conception

Qualité du code

  • Évitez les valeurs codées en dur - extrayez les constantes ou jetons de conception
  • Gardez les composants composables et réutilisables
  • Ajoutez les types TypeScript pour les props du composant
  • Incluez les commentaires JSDoc pour les composants exportés

Exemples

Exemple 1 : Implémenter un composant Button

L'utilisateur dit : « Implémentez ce composant button Figma : https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15 »

Actions :

  1. Analysez l'URL pour extraire fileKey=kL9xQn2VwM8pYrTb4ZcHjF et nodeId=42-15
  2. Exécutez get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
  3. Exécutez get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") pour une référence visuelle
  4. Téléchargez toutes les icônes de boutons à partir du point de terminaison des actifs
  5. Vérifiez si le projet a un composant button existant
  6. Si oui, étendez-le avec une nouvelle variante ; si non, créez un nouveau composant en utilisant les conventions du projet
  7. Mappez les couleurs Figma aux jetons de conception du projet (p. ex., primary-500, primary-hover)
  8. Validez par rapport à la capture d'écran pour le remplissage, le rayon de bordure, la typographie

Résultat : Composant button correspondant à la conception Figma, intégré au système de conception du projet.

Exemple 2 : Créer une mise en page de tableau de bord

L'utilisateur dit : « Créez ce tableau de bord : https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5 »

Actions :

  1. Analysez l'URL pour extraire fileKey=pR8mNv5KqXzGwY2JtCfL4D et nodeId=10-5
  2. Exécutez get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") pour comprendre la structure de la page
  3. Identifiez les sections principales à partir des métadonnées (en-tête, barre latérale, zone de contenu, cartes) et leurs ID de nœud enfants
  4. Exécutez get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") pour chaque section majeure
  5. Exécutez get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") pour la page complète
  6. Téléchargez tous les actifs (logos, icônes, graphiques)
  7. Créez la mise en page en utilisant les primitives de mise en page du projet
  8. Implémentez chaque section en utilisant les composants existants lorsque possible
  9. Validez le comportement réactif par rapport aux contraintes Figma

Résultat : Tableau de bord complet correspondant à la conception Figma avec mise en page réactive.

Bonnes pratiques

Commencez toujours par le contexte

N'implémentez jamais basé sur des hypothèses. Récupérez toujours get_design_context et get_screenshot en premier.

Validation incrémentale

Validez fréquemment pendant l'implémentation, pas seulement à la fin. Cela détecte les problèmes tôt.

Documentez les écarts

Si vous devez vous écarter de la conception Figma (par exemple, pour l'accessibilité ou les contraintes techniques), documentez pourquoi dans les commentaires du code.

Réutilisation plutôt que recréation

Vérifiez toujours les composants existants avant d'en créer de nouveaux. La cohérence dans le codebase est plus importante que la réplication exacte de Figma.

Système de conception en premier

En cas de doute, préférez les modèles du système de conception du projet à la traduction littérale de Figma.

Problèmes courants et solutions

Problème : La sortie Figma est tronquée

Cause : La conception est trop complexe ou a trop de couches imbriquées pour être renvoyée dans une seule réponse. Solution : Utilisez get_metadata pour obtenir la structure du nœud, puis récupérez les nœuds spécifiques individuellement avec get_design_context.

Problème : La conception ne correspond pas après l'implémentation

Cause : Discordances visuelles entre le code implémenté et la conception Figma originale. Solution : Comparez côte à côte avec la capture d'écran de l'étape 3. Vérifiez les valeurs d'espacement, de couleurs et de typographie dans les données du contexte de conception.

Problème : Les actifs ne se chargent pas

Cause : Le point de terminaison des actifs du serveur Figma MCP n'est pas accessible ou les URL sont modifiées. Solution : Vérifiez que le point de terminaison des actifs du serveur Figma MCP est accessible. Le serveur sert des actifs aux URL localhost. Utilisez-les directement sans modification.

Problème : Les valeurs des jetons de conception diffèrent de Figma

Cause : Les jetons du système de conception du projet ont des valeurs différentes de celles spécifiées dans la conception Figma. Solution : Lorsque les jetons du projet diffèrent des valeurs Figma, préférez les jetons du projet pour la cohérence mais ajustez l'espacement/dimensionnement pour maintenir la fidélité visuelle.

Comprendre l'implémentation de la conception

Le flux de travail d'implémentation Figma établit un processus fiable pour traduire les conceptions en code :

Pour les concepteurs : Confiance que les implémentations correspondent à leurs conceptions avec une précision au pixel près. Pour les développeurs : Une approche structurée qui élimine les suppositions et réduit les allers-retours de révisions. Pour les équipes : Des implémentations cohérentes et de haute qualité qui maintiennent l'intégrité du système de conception.

En suivant ce flux de travail, vous assurez que chaque conception Figma est implémentée avec le même niveau de soin et d'attention aux détails.

Ressources supplémentaires