figma-code-connect-components

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

Génère des règles de système de design personnalisées pour la base de code de l'utilisateur. À utiliser lorsque l'utilisateur dit "créer des règles de système de design", "générer des règles pour mon projet", "configurer des règles de design", "personnaliser les directives du système de design", ou souhaite établir des conventions spécifiques au projet pour les workflows Figma-vers-code. Nécessite une connexion au serveur Figma MCP.

Crée un nouveau fichier Figma vierge. À utiliser lorsque l'utilisateur souhaite créer un nouveau design Figma ou un fichier FigJam, ou lorsque vous avez besoin d'un nouveau fichier avant d'appeler use_figma. Gère la résolution du plan via whoami si nécessaire. Utilisation — /figma-create-new-file [editorType] [fileName] (ex. /figma-create-new-file figjam My Whiteboard)

Utilisez cette compétence avec figma-use lorsque la tâche consiste à traduire une page d’application, une vue ou une mise en page multi-section dans Figma. Déclencheurs : « écrire dans Figma », « créer dans Figma à partir du code », « pousser la page vers Figma », « prendre cette application/page et la construire dans Figma », « créer un écran », « construire une page d’atterrissage dans Figma », « mettre à jour l’écran Figma pour correspondre au code ». Il s’agit de la compétence de workflow privilégiée lorsque l’utilisateur souhaite construire ou mettre à jour une page, un écran ou une vue complète dans Figma à partir de code ou d’une description. Découvre les composants, variables et styles du système de conception via search_design_system, les importe et assemble les écrans de manière incrémentielle, section par section, en utilisant les

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.