Figma MCP

Utilisez le serveur Figma MCP pour l'implémentation basée sur Figma. Pour les détails de configuration et de débogage (variables d'environnement, configuration, vérification), consultez references/figma-mcp-config.md.

Règles d'intégration Figma MCP

Ces règles définissent comment traduire les entrées Figma en code pour ce projet et doivent être suivies pour chaque modification basée sur Figma.

Flux obligatoire (à ne pas sauter)

Exécutez d'abord get_design_context pour récupérer la représentation structurée du ou des nœuds exacts.
Si la réponse est trop volumineuse ou tronquée, exécutez get_metadata pour obtenir la carte des nœuds de haut niveau, puis réexécutez get_design_context uniquement pour les nœuds requis.
Exécutez get_screenshot pour une référence visuelle de la variante du nœud en cours d'implémentation.
Seulement après avoir à la fois get_design_context et get_screenshot, téléchargez les ressources nécessaires et commencez l'implémentation.
Traduisez la sortie (généralement React + Tailwind) selon les conventions, styles et framework du projet. Réutilisez autant que possible les tokens de couleur, composants et typographie du projet.
Validez contre Figma pour une parité 1:1 en apparence et comportement avant de marquer comme terminé.

Règles d'implémentation

Traitez la sortie Figma MCP (React + Tailwind) comme une représentation du design 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 tokens du système de design le cas échéant.
Réutilisez les composants existants (par exemple, boutons, champs, typographie, enveloppeurs d'icônes) au lieu de dupliquer les fonctionnalités.
Utilisez le système de couleurs du projet, l'échelle typographique et les tokens d'espacement de manière cohérente.
Respectez les patterns de routage, gestion d'état et récupération de données déjà adoptés dans le dépôt.
Visez une parité visuelle 1:1 avec le design Figma. En cas de conflit, privilégiez les tokens du système de design et ajustez l'espacement ou les tailles au minimum pour correspondre aux visuels.
Validez l'interface utilisateur finale contre la capture d'écran Figma pour l'apparence et le comportement.

Gestion des ressources

Le serveur Figma MCP fournit un endpoint de ressources qui peut servir des ressources image et SVG.
IMPORTANT : Si le serveur Figma MCP retourne une source localhost pour une image ou un SVG, utilisez cette source d'image ou SVG directement.
IMPORTANT : N'importez PAS et n'ajoutez PAS de nouveaux paquets d'icônes, toutes les ressources doivent être dans la payload Figma.
IMPORTANT : N'utilisez PAS et ne créez PAS de placeholders si une source localhost est fournie.

Prompting basé sur les liens

Le serveur fonctionne avec des liens : copiez le lien du frame ou de la couche Figma et fournissez cette URL au client MCP lors de la demande d'aide pour l'implémentation.
Le client ne peut pas consulter l'URL mais extrait l'ID du nœud du lien ; assurez-vous toujours que le lien pointe vers le nœud ou la variante exacte que vous souhaitez.

Références

references/figma-mcp-config.md — configuration, vérification, débogage et rappels d'utilisation basée sur les liens.
references/figma-tools-and-prompts.md — catalogue des outils et patterns de prompts pour sélectionner les frameworks/composants et récupérer les métadonnées.