figma-design-to-code
Ce skill fait partie du repository officiel figma/mcp-server-guide, qui documente l'utilisation du Figma MCP server pour intégrer Figma directement dans les workflows de développement assistés par IA. Il s'agit d'un skill fonctionnel et complet — pas d'un simple squelette — qui définit précisément comment un agent doit procéder pour convertir un design Figma en code dans une base de code cible.
Rôle et périmètre
Le skill couvre exclusivement la direction Figma → code : extraire le contexte de design depuis Figma à l'aide de l'outil get_design_context, puis l'adapter au stack réel du projet. Il est déclaré comme prérequis obligatoire : l'agent doit l'invoquer avant tout appel à get_design_context. Pour la direction inverse (générer ou modifier un design dans Figma à partir de code), un skill distinct — figma-generate-design — est prévu.
Workflow structuré par gates
Le skill impose un protocole en cinq gates de validation (G1, G2-G4 combinés, G5) que l'agent doit franchir dans l'ordre avant d'écrire ou de finaliser du code. Ces gates couvrent : la récupération du contexte de design, l'adaptation au stack cible, la réutilisation des composants et tokens existants dans le projet, l'application des hints de réponse par ordre de priorité (Code Connect, documentation, annotations, tokens, valeurs brutes), et enfin la fidélité des assets (icônes, images exportées).
Utilisation dans un agent
Lorsqu'un utilisateur formule une demande du type « implémente ce design Figma » ou « transforme cet écran en code », l'agent charge ce skill et suit son workflow avant d'appeler le Figma MCP server. Le paramètre skillNames de get_design_context doit inclure figma-design-to-code (ou resource:figma-design-to-code si le skill est chargé via une MCP resource) à des fins de traçabilité. Le skill inclut également des instructions de récupération sur erreur (URL sans node-id, timeout, réponse creuse).