Connecte Figma à Claude Code via le MCP Figma. Claude Code récupère directement tes composants et génère le code correspondant, sans copier-coller manuel.
Les étapes
ÉtapeActionOutilLivrable
1. Installer Claude Code et le plugin FigmaInstaller Claude Code dans le terminal (npm install -g @anthropic-ai/claude-code) puis le plugin Figma officiel (claude plugin install figma@claude-plugins-official) qui inclut le MCP server et les Agent Skills.Terminal + Claude CodePlugin Figma installé
2. Authentifier FigmaDans Claude Code, taper /plugin, naviguer jusqu'au serveur figma, lancer l'authentification OAuth. Autoriser l'accès sur la page Figma qui s'ouvre.Claude Code + FigmaConnexion MCP active
3. Copier le lien d'une frame FigmaDans Figma, sélectionner une frame ou un composant, clic droit → "Copier le lien de la sélection". Le node ID est inclus dans l'URL.FigmaURL du frame copiée
4. Demander la génération à Claude CodeColler le lien dans Claude Code avec ta demande ("Génère le composant React correspondant à ce frame, en utilisant Tailwind et nos tokens existants").Claude CodeCode React généré
Contexte d'usage
Vérifie vite si tu es dans la bonne configuration avant de te lancer.
Signaux qu'il est temps
→Ton équipe fait déjà tourner Claude Code pour d'autres tâches de dev
→Tu copies-colles régulièrement du CSS depuis Figma Dev Mode et tu perds du temps
→Tes designs évoluent vite et ton code décroche de la maquette — tu cherches à rattraper
Gains attendus
+Un composant Figma → code React en quelques minutes
+Avec Code Connect, Claude utilise tes vrais composants, pas des primitives HTML
+Le flux marche dans les deux sens : Claude peut renvoyer du code vers Figma sous forme de frames éditables
Risques
Prévoir une passe de revue manuelle sur les détails visuels
5. Itérer dans le codebaseClaude Code intègre le composant dans ton projet, respecte ton Design System via Code Connect si configuré. Tu itères par prompts successifs, directement dans ton environnement dev.Claude Code + ton IDEComposant intégré et testé
!
!Si Claude Code évolue ou change de pricing, ton workflow en dépend
