Figma Code Connect — Skill de mapping design-vers-code
Ce skill fait partie du repository officiel figma/mcp-server-guide, qui documente et distribue les Agent Skills destinés à être utilisés avec le serveur MCP Figma. Il fournit à l'agent une procédure complète et détaillée pour créer des fichiers Code Connect au format .figma.ts — des templates qui relient des composants Figma publiés à leurs équivalents dans le codebase d'un projet.
Ce que fait ce skill
Lorsqu'il est activé, le skill guide l'agent à travers un workflow en six étapes : parsing de l'URL Figma, découverte des composants non mappés via l'outil MCP get_code_connect_suggestions, récupération des propriétés du composant via get_context_for_code_connect, identification du composant de code correspondant, génération du fichier .figma.ts, puis validation du résultat. Le skill couvre en détail le mapping de chaque type de propriété Figma (TEXT, BOOLEAN, VARIANT, INSTANCE_SWAP, SLOT) vers les méthodes de l'API Code Connect, ainsi que la gestion des cas avancés comme les composants imbriqués et les variants croisés.
Prérequis et contexte d'utilisation
Ce skill nécessite que le serveur MCP Figma soit connecté dans le client MCP (Cursor, Claude Code, VS Code, etc.) et que les composants ciblés soient publiés dans une team library Figma. Il est conçu pour des projets sur plan Organization ou Enterprise. Il complète les fichiers .figma.tsx basés sur le CLI de Code Connect, mais couvre uniquement les template files (.figma.ts) pilotés par les outils MCP.
Références internes
Le skill renvoie vers deux documents de référence situés dans references/ du même dossier : api.md pour la référence complète de l'API Code Connect, et advanced-patterns.md pour les patterns avancés de nesting et de passage de métadonnées entre templates parent et enfant.