figma

Utilisez le serveur MCP Figma pour récupérer le contexte de conception, les captures d'écran, les variables et les ressources de Figma, et pour traduire les nœuds Figma en code de production. Déclenchez-le quand une tâche implique des URL Figma, des ID de nœud, l'implémentation design-to-code, ou la configuration et le dépannage de MCP Figma.

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

Figma MCP

Utilisez le serveur Figma MCP pour l'implémentation pilotée par 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 respectées pour chaque modification pilotée par Figma.

Flux requis (ne pas sauter)

  1. Exécutez get_design_context en premier pour récupérer la représentation structurée du ou des nœuds exacts.
  2. 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écupérez à nouveau uniquement le ou les nœuds requis avec get_design_context.
  3. Exécutez get_screenshot pour une référence visuelle de la variante de nœud en cours d'implémentation.
  4. Seulement après avoir obtenu à la fois get_design_context et get_screenshot, téléchargez tous les assets nécessaires et commencez l'implémentation.
  5. Traduisez la sortie (généralement React + Tailwind) selon les conventions, styles et framework de ce projet. Réutilisez autant que possible les tokens de couleur, composants et typographie du projet.
  6. Validez par rapport à 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/tokens du système de design le cas échéant.
  • Réutilisez les composants existants (par ex. boutons, champs de saisie, typographie, wrappers d'icônes) au lieu de dupliquer des 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 patterns de routage, gestion d'état et récupération de données déjà adoptés dans le repo.
  • Strivezvous pour une parité visuelle 1:1 avec le design Figma. Lorsque des conflits surviennent, préférez les tokens du système de design et ajustez minimalement l'espacement ou les tailles pour correspondre aux visuels.
  • Validez l'interface utilisateur finale par rapport à la capture d'écran Figma pour l'apparence et le comportement.

Gestion des assets

  • Le serveur Figma MCP fournit un endpoint assets qui peut servir des assets image et SVG.
  • IMPORTANT : Si le serveur Figma MCP retourne une source localhost pour une image ou un SVG, utilisez cette source image ou SVG directement.
  • IMPORTANT : NE PAS importer/ajouter de nouveaux packages d'icônes, tous les assets doivent être dans la charge utile Figma.
  • IMPORTANT : NE PAS utiliser ou créer d'espaces réservés si une source localhost est fournie.

Prompting basé sur les liens

  • Le serveur est basé sur les liens : copiez le lien de frame/couche Figma et fournissez cette URL au client MCP lors de la demande d'aide à l'implémentation.
  • Le client ne peut pas naviguer dans l'URL mais extrait l'ID de nœud du lien ; assurez-vous toujours que le lien pointe vers le nœud/variante exact que vous souhaitez.

Références

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