Implémenter la conception

Aperçu

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 garantit une intégration cohérente avec le serveur MCP Figma, l'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 de 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 mappages Code Connect, basculez vers figma-code-connect.
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 frame spécifique à implémenter)
OU quand vous utilisez figma-desktop MCP : L'utilisateur peut sélectionner un nœud directement dans l'application Figma desktop (aucune URL requise)
Le projet devrait avoir un système de conception établi ou une bibliothèque de composants (de préférence)

Workflow requis

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

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

Option A : Analyser à partir de l'URL Figma

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

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

Extraire :

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)

Remarque : Quand vous utilisez le MCP desktop local (figma-desktop), fileKey n'est pas passé en tant que paramètre aux appels d'outils. Le serveur utilise automatiquement le fichier actuellement ouvert, seul nodeId est donc 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'application Figma Desktop (figma-desktop MCP uniquement)

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

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

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

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

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 design tokens
Structure des composants et variantes
Espacements et valeurs de padding

Si la réponse est trop volumineux 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 une 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 tous les assets (images, icônes, SVG) retournés par le serveur MCP Figma.

IMPORTANT : Suivez ces règles concernant les assets :

Si le serveur MCP Figma retourne une source localhost pour une image ou un SVG, utilisez cette source directement
NE RIEN importer ou ajouter de nouveaux packages d'icônes - tous les assets doivent provenir de la charge utile Figma
N'UTILISEZ PAS ou ne créez PAS de placeholders si une source localhost est fournie
Les assets sont servis via l'endpoint assets intégré du serveur MCP Figma

Étape 5 : Traduire aux conventions du projet

Traduisez la sortie Figma aux conventions, frameworks et styles de ce 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 un style de code final
Remplacez les classes utilitaires Tailwind par les utilitaires préférés du projet ou les tokens du système de conception
Réutilisez les composants existants (boutons, entrées, typographie, wrappers d'icônes) au lieu de dupliquer les fonctionnalités
Utilisez le système de couleurs, l'échelle typographique et les tokens d'espacement du projet de manière cohérente
Respectez les modèles de routage, gestion d'état et fetch de données existants

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

Effort pour 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 en dur - utilisez les design tokens de Figma quand disponibles
Quand des conflits surgissent entre les tokens du système de conception et les spécifications Figma, préférez les tokens 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 au besoin

Étape 7 : Valider par rapport à Figma

Avant de marquer comme complet, validez l'UI final par rapport à 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 (survol, actif, désactivé)
[ ] Le comportement réactif suit les contraintes Figma
[ ] Les assets s'affichent correctement
[ ] Les normes d'accessibilité 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
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

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 vers des constantes ou 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émentez 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 tous les icônes de boutons depuis l'endpoint assets
Vérifiez si le projet possède un composant bouton existant
Si oui, étendez-le avec la 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 ex. primary-500, primary-hover)
Validez par rapport à la capture d'écran pour le padding, le rayon de bordure, la typographie

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

Exemple 2 : Construire une mise en page Dashboard

L'utilisateur dit : "Construisez 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œuds enfants
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 tous les assets (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 où possible
Validez le comportement réactif par rapport aux contraintes Figma

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

Bonnes pratiques

Toujours commencer par le contexte

Ne jamais implémenter basé sur des hypothèses. Toujours récupérer d'abord get_design_context et get_screenshot.

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 dévier de la conception Figma (par ex. 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 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 possède trop de couches imbriquées pour être retournée en 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 : 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, les couleurs et la typographie dans les données du contexte de conception.

Problème : Les assets ne se chargent pas

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

Problème : Les valeurs des design tokens diffèrent de Figma

Cause : Les 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 tokens du projet diffèrent des valeurs Figma, préférez les 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 révisions aller-retour. 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