figma-code-connect
Ce skill fait partie du repo officiel figma/mcp-server-guide, un guide d'utilisation du Figma MCP server. Il fournit à un agent Claude les instructions complètes pour générer des fichiers Code Connect au format parserless (.figma.ts), qui établissent la correspondance entre des composants Figma publiés et les composants de code d'un projet.
Ce que fait ce skill
Lorsqu'il est activé, ce skill guide l'agent à travers un workflow en six étapes : parsing de l'URL Figma, découverte des composants non encore mappés via l'outil MCP get_code_connect_suggestions, récupération des propriétés de composant via get_context_for_code_connect, identification du composant de code correspondant dans la base de code, génération du fichier .figma.ts avec les bonnes API d'extraction de propriétés, puis validation du fichier produit.
Le skill impose des contraintes précises : le format de sortie est toujours .figma.ts avec un tagged template figma.code`...`, jamais .figma.tsx ni figma.connect() (qui relèvent du format parser-based distinct). Il couvre le mapping de tous les types de propriétés Figma — TEXT, BOOLEAN, VARIANT, INSTANCE_SWAP, SLOT — avec les méthodes correspondantes (getString, getBoolean, getEnum, getInstanceSwap, getSlot) et détaille les pièges courants à éviter.
Prérequis et contexte d'utilisation
Ce skill nécessite que le Figma MCP server soit connecté et actif dans le client MCP, que les composants soient publiés dans une Figma team library, et que le plan Figma soit de niveau Organization ou Enterprise. Il est déclenché dès que l'utilisateur mentionne Code Connect, le mapping de composants Figma, ou souhaite créer ou mettre à jour des fichiers .figma.ts / .figma.js.
Des références complémentaires (api.md, advanced-patterns.md) sont mentionnées dans le skill pour les cas avancés (composants imbriqués multi-niveaux, passage de métadonnées entre templates parent/enfant).