Utiliser Figma via le serveur MCP Dev Mode
Cette skill ancre le designer dans le serveur MCP Figma Dev Mode — le MCP officiel de Figma qui expose le contexte de design, les variables, les captures d'écran, les métadonnées et la recherche de design system à Claude. Appliquez-la chaque fois qu'une tâche doit lire un design Figma — extraire la structure, les tokens, les captures d'écran ou les chaînes. Les skills composites comme design-review, content-style-guide, preparing-design-handoff et evolving-design-system-components font appel à celle-ci chaque fois qu'un fichier Figma est référencé.
Le serveur MCP Figma expose aussi des outils d'écriture (création de fichiers, upload d'assets, génération de diagrammes, mapping Code Connect, mutation d'objets Figma). Ceux-ci sont volontairement hors périmètre pour cette skill — ses allowed-tools sont en lecture seule. Si une tâche a vraiment besoin d'une mutation Figma, invoquez directement l'outil MCP sous-jacent avec le consentement explicite de l'utilisateur plutôt que d'étendre la surface de cette skill.
Prérequis : le serveur MCP doit être installé
Le serveur MCP Figma Dev Mode n'est pas inclus dans ce plugin. C'est le propre produit de Figma et l'utilisateur l'installe et s'authentifie lui-même — soit le serveur desktop (qui demande un siège Dev ou Full sur un plan Figma payant), soit le serveur distant. Si les outils MCP Figma ne sont pas disponibles dans la session, arrêtez et demandez à l'utilisateur d'installer et d'authentifier le serveur MCP Figma avant de continuer.
Certains outils MCP sont distants uniquement et indisponibles sur le serveur desktop ; vérifiez la documentation Figma quand un outil ne se trouve pas où vous l'attendez. Les notes détaillées de configuration se trouvent dans references/setup.md.
Anatomie d'une URL Figma
Chaque interaction commence par une URL Figma. Les deux éléments importants sont la fileKey et la nodeId.
https://www.figma.com/design/<fileKey>/<fileName>?node-id=<nodeIdWithDashes>&...Conversion : la node-id de l'URL utilise - comme séparateur (123-456), mais le serveur MCP attend : (123:456). Convertissez avant de la passer à un outil.
Si l'utilisateur colle une URL sans node-id, l'URL pointe vers le fichier entier. Demandez quel frame il veut dire avant d'extraire quoi que ce soit — opérer sur le fichier entier est rarement ce qui est voulu et retourne bien trop de contexte.
Les outils de lecture, par travail à accomplir
Le serveur MCP Figma expose de nombreux outils. Choisissez le plus petit qui répond à la question.
| Travail à accomplir | Outil | Notes |
|---|---|---|
| Lire le contexte de design d'un frame (code + screenshot + métadonnées) | get_design_context |
Point d'entrée le plus courant. Accepte un paramètre framework ; par défaut React + Tailwind. |
| Obtenir juste l'esquisse structurelle | get_metadata |
XML épuré des IDs de couche, noms, types, positions, tailles. Peu coûteux. |
| Obtenir juste l'image rendue | get_screenshot |
Référence visuelle sans le code ni le bruit de tokens. |
| Extraire les design tokens utilisés dans la sélection | get_variable_defs |
Variables et styles — couleurs, espacement, typographie. |
| Découvrir les bibliothèques disponibles du fichier | get_libraries |
Affiche quelles bibliothèques de design abonnées/disponibles sont liées. |
| Trouver un composant dans le design system | search_design_system |
Requête texte contre les composants, variables, styles. |
| Inspecter un tableau FigJam | get_figjam |
Même rôle que get_metadata mais pour le contenu FigJam. |
| Identifier l'utilisateur Figma authentifié | whoami |
Utile quand le type de permission / siège a de l'importance. |
Outils Code Connect (lecture seule)
Ceux-ci mappent les composants Figma à leurs équivalents en code. Principalement pertinents dans evolving-design-system-components ; rarement nécessaires pour la critique ou la révision de contenu.
get_code_connect_map— retourne les mappings existants, les fichiers source et les snippets pour les instances sélectionnées.get_code_connect_suggestions— mappings suggérés pour les composants sélectionnés.get_context_for_code_connect— définitions de propriétés et options de variante pour un composant.
(Les deux outils Code Connect en écriture — add_code_connect_map et send_code_connect_mappings — sont hors périmètre pour cette skill. Invoquez-les directement avec le consentement explicite de l'utilisateur si nécessaire.)
Règles de décision
- N'utilisez pas
get_design_contextpar réflexe. Il retourne le code et les screenshots même quand la question est « de quelle couleur est ce fond » —get_variable_defsrépond à cela en une fraction du contexte. - Commencez avec
get_metadatapour vous orienter. Quand le but est « dis-moi ce qu'il y a dans ce frame », le XML de métadonnées est moins cher que le contexte complet et généralement suffisant pour choisir le prochain mouvement. - Utilisez
get_screenshotpour la référence humaine,get_metadatapour le raisonnement machine. Ne chargez pas les deux sauf si les deux sont nécessaires. - Ne générez pas de code à partir de cette skill. La génération de code de production appartient aux skills de sortie spécifiques au repo comme
figma-to-angulardans le repo clients. Cette skill s'arrête au contexte de design extrait.
Composition avec d'autres skills
design-review. Quand vous critiquez un design, commencez parget_screenshot+get_metadatapour vous orienter. Tirezget_variable_defssi les tokens font partie de la critique (couleurs hors système, espacement incohérent). Escaladez versget_design_contextseulement quand la forme du code elle-même est la question.content-style-guide. Utilisezget_design_contextouget_metadatapour afficher chaque chaîne visible par l'utilisateur dans un frame, puis passez chaque chaîne au travers du guide de style. Ne réécrivez pas la copie Figma depuis cette skill — retournez les résultats avec des alternatives proposées et laissez le designer appliquer.preparing-design-handoff. Utilisezget_metadatapour vérifier que le fichier a les sections Ready-for-Dev attendues avec des noms alignés aux stories d'engineering. Utilisezget_variable_defspour confirmer que les tokens sont liés à la bibliothèque plutôt que des hex bruts.evolving-design-system-components. Utilisezsearch_design_systemetget_librariesavant de proposer un nouveau pattern — la plupart des cas « nous avons besoin de cette chose nouvelle » s'avèrent être « cette chose existe dans la bibliothèque et nous ne le savions pas ». Utilisez les outils de lecture Code Connect quand la question s'étend à la façon dont un composant Figma mappe à son équivalent en code.
Demander à l'utilisateur avant d'extraire
Avant de récupérer, exposez ce que vous allez demander et pourquoi :
« Je vais d'abord tirer
get_metadatapour ce frame afin de voir la structure des couches, puisget_variable_defspour les tokens qu'il utilise — cela devrait répondre à la question d'espacement sans charger le contexte de design complet. OK ? »
C'est plus rapide que de s'excuser plus tard pour un appel trop large et aide le designer à apprendre quel outil MCP répond à son type de question.
Format de sortie pour les extractions Figma
Quand vous rapportez ce qu'il y a dans un fichier Figma, structurez la réponse ainsi :
- Frame et étape — nom du fichier, nom du frame, étape si connue (30/60/90).
- Structure — esquisse des couches au niveau pertinent pour la question (ne collez pas le XML brut).
- Tokens et liaisons de bibliothèque — ce qui est lié au design system vs ce qui est une valeur brute.
- Chaînes visibles par l'utilisateur (quand la copie fait partie de la tâche) — signalées avec les résultats de content-style-guide.
- Questions ouvertes — tout ce qui est ambigu dans le fichier que le designer devrait clarifier avant que le travail avance.
Ressources supplémentaires
references/setup.md— installation et authentification du serveur MCP Figma Dev Mode (desktop vs distant), exigences de type de siège et dépannage des outils indisponibles.- Référence canonique par outil Figma :
developers.figma.com/docs/figma-mcp-server/tools-and-prompts/— la source de vérité pour les paramètres d'outil, les formes de retour et la disponibilité desktop-vs-distant.