Implémenter la conception

Vue d'ensemble

Cette skill fournit un workflow 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 MCP Figma, une utilisation appropriée des design tokens et une parité visuelle 1:1 avec les conceptions.

Limites de la skill

Utilisez cette skill quand le livrable est du code dans le repository de l'utilisateur.
Si l'utilisateur demande de créer/éditer/supprimer des nœuds dans Figma lui-même, basculez vers figma-use.
Si l'utilisateur demande de construire ou mettre à jour un écran complet dans Figma à partir du code ou d'une description, basculez vers figma-generate-design.
Si l'utilisateur demande uniquement des mappings Code Connect, basculez vers figma-code-connect-components.
Si l'utilisateur demande de rédiger des règles d'agent réutilisables (CLAUDE.md/AGENTS.md), basculez vers figma-create-design-system-rules.

Prérequis

Le serveur MCP Figma 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é du fichier
- 1-2 est l'ID du nœud (le composant ou la frame spécifique à implémenter)
OU lors de l'utilisation de figma-desktop MCP : l'utilisateur peut sélectionner un nœud directement dans l'app desktop Figma (aucune URL requise)
Le projet devrait avoir un système de conception établi ou une bibliothèque de composants (recommandé)

Workflow obligatoire

Suivez ces étapes dans l'ordre. Ne sautez pas d'étapes.

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

Option A : Analyser depuis l'URL Figma

Quand l'utilisateur fournit une URL Figma, extrayez la clé du fichier et l'ID du nœud pour les passer comme arguments aux outils MCP.

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

Extrayez :

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

Note : Lors de l'utilisation du MCP desktop local (figma-desktop), fileKey n'est pas passé comme paramètre aux appels d'outils. 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é du fichier : kL9xQn2VwM8pYrTb4ZcHjF
ID du nœud : 42-15

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

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

Note : 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 une frame ou une couche pour extraire le contexte. L'utilisateur doit avoir l'app desktop 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 :

Les propriétés de mise en page (Auto Layout, contraintes, dimensionnement)
Les spécifications typographiques
Les valeurs de couleur et les design tokens
La structure des composants et les variantes
Les espacements et valeurs de remplissage

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

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

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

Exécutez get_screenshot avec la même clé de fichier et l'ID du 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 toutes les ressources (images, icônes, SVG) retournées par le serveur MCP Figma.

IMPORTANT : Respectez ces règles de ressources :

Si le serveur MCP Figma retourne 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 - toutes les ressources doivent provenir de la charge Figma
N'utilisez PAS et ne créez PAS de placeholders si une source localhost est fournie
Les ressources sont servies via l'endpoint de ressources intégré du serveur MCP Figma

Étape 5 : Traduire aux conventions du projet

Traduisez la sortie Figma dans le framework, les styles et les conventions du projet.

Principes clés :

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

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

Visez une parité visuelle au pixel près avec la conception Figma.

Directives :

Privilégiez la fidélité Figma pour correspondre exactement aux conceptions
Évitez les valeurs en dur - utilisez les design tokens de Figma quand disponibles
Quand des conflits surgissent entre les design tokens du système et les specs Figma, privilégiez les design tokens du système mais ajustez minimalement l'espacement ou les tailles pour correspondre aux visuels
Suivez les exigences WCAG pour l'accessibilité
Ajoutez la documentation des composants si nécessaire

Étape 7 : Valider contre Figma

Avant de marquer comme complétée, validez l'interface utilisateur finale contre la capture d'écran Figma.

Checklist 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 responsive suit les contraintes Figma
[ ] Les ressources se rendent correctement
[ ] Les normes d'accessibilité sont respectées

Règles d'implémentation

Organisation des composants

Placez les composants UI dans le répertoire du système de conception désigné du projet
Respectez les conventions de nommage des composants du projet
Évitez les styles en ligne sauf si vraiment nécessaires pour les valeurs dynamiques

Intégration du système de conception

UTILISEZ TOUJOURS les composants du système de conception du projet quand possible
Mappez les design tokens Figma aux design tokens du projet
Quand 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 en dur - extrayez-les vers des constantes ou des design tokens
Gardez les composants composables et réutilisables
Ajoutez des types TypeScript pour les props des composants
Incluez des commentaires JSDoc pour les composants exportés

Exemples

Exemple 1 : Implémenter un composant Button

L'utilisateur dit : "Implémenter ce composant bouton Figma : https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15"

Actions :

Analysez l'URL pour extraire fileKey=kL9xQn2VwM8pYrTb4ZcHjF et nodeId=42-15
Exécutez get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
Exécutez get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") pour la référence visuelle
Téléchargez toutes les icônes de bouton depuis l'endpoint des ressources
Vérifiez si le projet a un composant bouton existant
Si oui, étendez-le avec une nouvelle variante ; si non, créez un nouveau composant en utilisant les conventions du projet
Mappez les couleurs Figma aux design tokens du projet (par exemple, primary-500, primary-hover)
Validez contre la capture d'écran pour le remplissage, le rayon de bordure, la typographie

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

Exemple 2 : Construire une mise en page Dashboard

L'utilisateur dit : "Construire ce dashboard : https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5"

Actions :

Analysez l'URL pour extraire fileKey=pR8mNv5KqXzGwY2JtCfL4D et nodeId=10-5
Exécutez get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") pour comprendre la structure de la page
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 enfant
Exécutez get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") pour chaque section majeure
Exécutez get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") pour la page complète
Téléchargez toutes les ressources (logos, icônes, graphiques)
Construisez la mise en page en utilisant les primitives de mise en page du projet
Implémentez chaque section en utilisant les composants existants quand possible
Validez le comportement responsive contre les contraintes Figma

Résultat : Dashboard complet correspondant à la conception Figma avec mise en page responsive.

Bonnes pratiques

Toujours commencer par le contexte

Ne faites jamais l'implémentation basée 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.

Documenter 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éutiliser plutôt que recréer

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

Système de conception en priorité

En cas de doute, privilégiez les patterns du système de conception du projet sur 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 retournée dans une seule réponse. Solution : Utilisez get_metadata pour obtenir la structure des nœuds, 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 : Des 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 l'espacement, les couleurs et les valeurs typographiques dans les données du contexte de conception.

Problème : Les ressources ne se chargent pas

Cause : L'endpoint des ressources du serveur MCP Figma n'est pas accessible ou les URL sont modifiées. Solution : Vérifiez que l'endpoint des ressources du serveur MCP Figma est accessible. Le serveur sert les ressources aux URL localhost. Utilisez-les directement sans modification.

Problème : Les valeurs de design token diffèrent de Figma

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

Comprendre l'implémentation de conception

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

Pour les designers : Confiance que les implémentations correspondront à 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 workflow, vous garantissez que chaque conception Figma est implémentée avec le même niveau de soin et d'attention aux détails.

figma-implement-design