Skill figma-generate-design — Construire des écrans depuis le design system
Ce skill fait partie du repo officiel figma/mcp-server-guide, qui documente l'utilisation du Figma MCP server avec des agents IA. Il définit le workflow complet permettant à un agent de créer ou mettre à jour des vues Figma composées — pages entières, modals, dialogs, drawers, sidebars, panels — en partant du code source ou d'une description, et en s'appuyant sur les composants, variables et styles du design system publié dans le fichier Figma cible.
Ce que fait ce skill
Le SKILL.md est entièrement rédigé et opérationnel : il ne s'agit pas d'un squelette. Il décrit un workflow en six étapes ordonnées — comprendre le livrable, collecter les clés de composants et les variables, créer la frame conteneur, assembler les sections une par une, valider visuellement avec get_screenshot, et gérer les mises à jour d'écrans existants. Le skill impose d'utiliser les tokens du design system (variables de couleur, d'espacement, de rayon) plutôt que des valeurs codées en dur, et de privilégier les instances de composants importés via importComponentSetByKeyAsync.
Il inclut également un workflow parallèle optionnel avec generate_figma_design pour les web apps : capturer un screenshot pixel-perfect de l'application en cours d'exécution pendant que l'agent construit la vue avec les composants du design system, puis fusionner les deux pour obtenir à la fois la précision visuelle et les liaisons au design system. Ce workflow devient obligatoire dès que la source contient des images.
Dépendances et périmètre
Ce skill doit être chargé conjointement avec figma-use, qui contient les règles critiques appliquées à chaque appel use_figma (plages de couleurs, chargement des polices, etc.). Le SKILL.md délimite explicitement son périmètre par rapport aux autres skills du repo : figma-implement-design pour générer du code depuis un design existant, figma-code-connect pour les mappings Code Connect, et figma-use directement pour créer de nouveaux composants réutilisables.
Utilisation
Ce skill est déclenché par des instructions comme « write to Figma », « build a landing page in Figma », « convert this modal to Figma » ou « update the Figma screen to match code ». Il nécessite que le Figma MCP server soit connecté et que le fichier Figma cible dispose d'un design system publié ou d'une bibliothèque d'équipe accessible. Il s'utilise dans les clients compatibles Claude Code (via plugin Figma) ou Cursor.