Claude Code + Figma MCP : convertir vos maquettes en code (2026)

Claude Code et Figma : de la maquette au code sans copier-coller

Combien d'heures passez-vous à retranscrire une maquette Figma en code : relever les couleurs hexadécimales une par une, mesurer les espacements au pixel près, recréer chaque bouton et chaque carte à la main ? Cette étape « design-to-code » est l'une des plus fastidieuses du métier de développeur front-end — et l'une des plus faciles à déléguer à un agent IA.

En connectant Claude Code à Figma via le protocole MCP, vous supprimez le copier-coller. Vous sélectionnez une frame dans Figma, vous décrivez votre stack en une phrase, et l'agent d'Anthropic lit directement la structure du design — couleurs, espacements, composants, variables — pour produire du code React, Vue ou Tailwind fidèle à la maquette. Dans ce guide 2026, vous allez voir comment installer la connexion, quels outils l'agent utilise réellement, et comment transformer une vraie maquette en composant intégrable de bout en bout.

Sommaire

Pourquoi connecter Claude Code à Figma ?

Figma est devenu le point de départ de la quasi-totalité des interfaces web et mobiles. Mais entre la maquette validée par le designer et le composant réellement en production, il reste un travail ingrat : traduire des pixels en code. Ce travail est répétitif, source d'erreurs (une marge oubliée, une couleur approximative) et il mobilise du temps de développeur sur une tâche à faible valeur ajoutée.

Jusqu'ici, deux mauvaises options existaient. Soit vous exportiez des captures d'écran et recodiez « à l'œil », soit vous utilisiez des plugins d'export qui crachaient un HTML illisible, impossible à maintenir. Le MCP Figma change la donne parce qu'il ne donne pas à l'IA une image, mais la structure réelle du design : la hiérarchie des calques, les noms de composants, les variables de couleur et d'espacement, l'Auto Layout.

Concrètement, brancher Claude Code sur Figma vous permet de :

Si l'analyse visuelle de designs vous intéresse plus largement, notre guide sur Claude Code et les images : analyser captures d'écran et maquettes montre l'approche par capture — complémentaire du MCP, qui va lui beaucoup plus loin en fidélité.

Le MCP Figma : comment ça marche

La connexion repose sur le MCP (Model Context Protocol), un standard ouvert qui permet à un agent IA de dialoguer avec des applications externes via des « outils » bien définis. Le serveur MCP de Figma expose à Claude Code des fonctions comme « récupérer le contexte de design de la sélection », « lister les variables », « générer du code aligné sur les composants » ou « écrire sur le canvas ».

Quand vous formulez une demande, Claude Code choisit les bons outils, les appelle dans le bon ordre, lit les données renvoyées par Figma et écrit le code correspondant — exactement comme un développeur qui inspecterait le design, mais piloté par votre phrase. Si le fonctionnement du protocole vous intéresse en détail, notre guide dédié au MCP (Model Context Protocol) dans Claude Code détaille le mécanisme et son écosystème.

L'avantage de MCP, c'est la composition : une fois plusieurs serveurs configurés (Figma, GitHub, un serveur maison…), Claude Code peut enchaîner « lire la maquette Figma », « générer le composant » et « ouvrir une pull request » dans une seule session. Le même standard alimente d'autres intégrations : notre article sur Claude Code et Notion via MCP illustre la même mécanique appliquée à la gestion de bases de données.

Serveur distant ou desktop : lequel choisir ?

Figma propose deux versions du serveur MCP, et le bon choix dépend de votre contexte.

Le serveur distant (mcp.figma.com/mcp) est hébergé par Figma. Il ne nécessite aucune installation locale, fonctionne sur tous les plans et tous les sièges, et embarque le jeu d'outils le plus complet — y compris l'outil use_figma qui écrit directement sur le canvas. C'est le choix recommandé pour la très grande majorité des utilisateurs : rapide à brancher, à jour automatiquement, sans configuration.

Le serveur desktop tourne localement, via l'application de bureau Figma. Son intérêt : il lit la frame réellement ouverte et sélectionnée dans votre éditeur, ce qui colle bien à un workflow « je conçois et je code en parallèle ». En contrepartie, il demande d'activer le serveur dans les préférences de l'app et de garder Figma ouvert. Pour les équipes qui veulent maîtriser de bout en bout leur infrastructure d'agents IA — serveurs auto-hébergés, exécution locale, contrôle des permissions — le site formation-openclaw.com documente bien les enjeux d'auto-hébergement et d'agents IA open-source en entreprise, une lecture utile avant d'industrialiser ce type de connecteur.

En résumé : serveur distant pour démarrer vite et couvrir 90 % des besoins, serveur desktop si vous voulez que l'agent suive précisément votre sélection en cours dans l'app.

Installer le MCP Figma dans Claude Code

L'installation la plus simple passe par le plugin officiel Figma, qui bundle à la fois la configuration MCP et des Agent Skills prêtes à l'emploi. Dans votre terminal, lancez :

claude plugin install figma@claude-plugins-official

Ensuite, gérez la connexion depuis Claude Code avec la commande /mcp :

/mcp

Sélectionnez figma dans la liste, puis Authenticate. Une page s'ouvre dans votre navigateur : connectez-vous à Figma et cliquez sur Allow Access. De retour dans le terminal, vous devez voir le message :

Authentication successful. Connected to figma

Confirmez à tout moment que le serveur est bien connecté en retapant /mcp. Si vous préférez une configuration manuelle sans plugin, vous pouvez aussi ajouter directement le serveur distant :

claude mcp add --transport http figma https://mcp.figma.com/mcp

Le plugin reste préférable, car il apporte des Skills spécialisées pour le design-to-code. Pour créer vos propres routines par-dessus (par exemple « génère le composant ET son test »), notre article sur les Skills et commandes personnalisées de Claude Code montre comment encapsuler un workflow Figma en une seule commande réutilisable.

Les outils clés : get_design_context, use_figma et Code Connect

Une fois connecté, Claude Code dispose de plusieurs outils Figma. Trois méritent votre attention.

get_design_context est le cœur du design-to-code. Il récupère, pour la frame ou le composant sélectionné, le contexte structuré du design : dimensions, couleurs issues des variables, espacements, hiérarchie des calques, propriétés d'Auto Layout. C'est cette donnée — et non une simple image — qui permet à l'agent de produire un code fidèle.

use_figma est l'outil d'écriture sur le canvas, disponible sur le serveur distant. Il ouvre la porte à des scénarios où l'agent ne se contente pas de lire le design mais le modifie : appliquer des tokens, renommer des calques, générer des variantes.

Code Connect relie vos composants Figma à vos composants de code réels. C'est la fonctionnalité qui transforme un joli prototype jetable en code intégrable : au lieu de recréer un générique, Claude Code réutilise le bouton exact de votre design system, avec ses props. Pour une base de code qui expose déjà proprement ses composants et ses données, l'agent produit alors du code quasi prêt à commiter. Les équipes qui structurent bien leurs API et données tabulaires — comme le documente ImmoAPI — savent à quel point une source propre change la qualité de ce que l'IA en tire ; le principe est identique pour un design system bien tenu.

Tutoriel : transformer une maquette en composant React

Prenons un cas concret : vous avez une frame « Carte produit » dans Figma et vous voulez le composant React + Tailwind correspondant.

Étape 1 — Sélectionner la frame. Dans Figma, cliquez sur la frame « Carte produit » pour la sélectionner. Le serveur MCP saura de quelle partie du design vous parlez.

Étape 2 — Décrire précisément la sortie. Dans Claude Code, formulez un prompt qui nomme l'outil, la stack et vos conventions :

Utilise l'outil Figma get_design_context sur ma sélection pour générer
un composant React nommé ProductCard.
Contraintes :
- Tailwind CSS, pas de CSS en dur
- reprends les couleurs et espacements des variables du design
- rends la carte responsive (mobile first)
- typage TypeScript, props pour le titre, le prix et l'image

Étape 3 — Laisser l'agent inspecter. Claude Code appelle get_design_context, récupère les tokens de couleur, les marges et la structure, puis écrit le composant. Il ne devine pas la palette : il lit vos variables.

Étape 4 — Vérifier le rendu. Lancez votre serveur de dev et comparez à la maquette. Pour un contrôle automatisé du rendu dans le navigateur, vous pouvez enchaîner avec Claude Code et Playwright MCP afin de tester visuellement le composant généré.

Étape 5 — Itérer en langage naturel. « L'ombre est trop marquée, aligne-la sur la variable shadow-sm », « ajoute un état hover sur le bouton ». L'agent ajuste sans que vous touchiez au CSS.

En quelques minutes, une frame devient un composant typé, responsive et aligné sur votre thème. Le même enchaînement fonctionne pour une application mobile : notre guide pour créer une app mobile avec Claude Code (React Native & Expo) applique la logique design-to-code au monde natif.

6 cas d'usage design-to-code

Voici des tâches réelles que vous pouvez déléguer dès aujourd'hui :

1.Génération de composants. « Transforme cette frame en composant Vue avec Tailwind, props typées. »

2.Extraction de tokens. « Liste toutes les variables de couleur et d'espacement de ce fichier et génère mon tailwind.config.js. »

3.Mise en page complète. « Reproduis cette page d'accueil en HTML/CSS sémantique, sections accessibles. »

4.Portage responsive. « Cette maquette est en desktop ; propose la version mobile en respectant la grille. »

5.Alignement design system. « Régénère ce formulaire en réutilisant mes composants Code Connect existants. »

6.Documentation d'UI. « Décris les états et variantes de ce composant pour ma doc Storybook. »

Le point commun : Claude Code lit une source structurée (le design) et produit un livrable directement exploitable, sans que vous ayez à retranscrire quoi que ce soit à la main.

Bonnes pratiques pour un code fidèle à la maquette

La qualité du code dépend autant de votre design que de votre prompt. Quelques réflexes font une vraie différence :

Nettoyez le fichier Figma en amont. Nommez vos calques, utilisez des variables pour les couleurs et espacements, appliquez l'Auto Layout. Un design structuré donne un code structuré.

Sélectionnez la bonne granularité. Un composant à la fois donne de meilleurs résultats qu'une page entière d'un coup. Découpez.

Précisez toujours la stack. Framework, système de styles, conventions de nommage, TypeScript ou non : plus le prompt est explicite, moins l'agent improvise.

Branchez Code Connect si vous avez un design system. C'est la clé pour obtenir du code réutilisable plutôt qu'un prototype.

Vérifiez le rendu, pas seulement le code. Comparez toujours visuellement à la maquette avant de commiter.

Bien utilisé, Claude Code ne remplace pas votre jugement d'intégrateur : il absorbe la retranscription mécanique pour que vous vous concentriez sur l'accessibilité, la performance et les cas limites.

Claude Code en action (vidéo)

Pour visualiser le rythme de travail réel avec l'agent — décrire, laisser exécuter, vérifier, ajuster — cette démonstration de la chaîne Sophiène.IA montre Claude Code pilotant un vrai projet. Le même enchaînement s'applique au design-to-code : on sélectionne la frame, on décrit la sortie, l'agent génère, on valide.

Limites et pièges à éviter

Le design-to-code par IA est puissant, mais quelques réflexes évitent les déconvenues :

La fidélité dépend du design. Sur un fichier « aplati », sans variables ni composants, l'agent devine et le résultat demande plus de retouches.

Le code généré n'est pas toujours accessible. Vérifiez les contrastes, les rôles ARIA et la navigation clavier : l'IA privilégie le rendu visuel.

Attention aux valeurs en dur. Sans variables Figma, l'agent peut coder des couleurs et marges en dur ; demandez explicitement l'usage de vos tokens.

Statut bêta et tarification. Le MCP Figma est gratuit en bêta en 2026 mais deviendra facturé à l'usage ; anticipez ce point pour un usage à grande échelle.

Confidentialité. Le contenu du design est envoyé au modèle. Pour des projets sensibles, limitez le périmètre partagé et vérifiez la politique de rétention. Notre article sur la sécurité des assistants IA de code fait le tour de la question.

**Envie d'aller plus loin et de déléguer vraiment la partie répétitive de votre intégration front-end à l'IA ?** Découvrez [comment vous faire remplacer par l'IA](https://go.saas-ia.io/se-faire-remplacer-par-lia) sur les tâches d'intégration fastidieuses, et récupérez vos heures pour la conception et la qualité.

Conclusion

Avec le MCP Figma, Claude Code fait sauter le maillon le plus pénible de la chaîne front-end : la retranscription manuelle des maquettes en code. En lisant la structure réelle du design — variables, composants, Auto Layout — plutôt qu'une simple image, l'agent produit des composants React, Vue ou Tailwind fidèles, responsives et alignés sur votre design system via Code Connect. Commencez petit : un seul composant, un fichier Figma bien nommé, un prompt précis sur votre stack. Mesurez le temps gagné, puis étendez la méthode à des pages entières et à des routines réutilisables. C'est souvent ce premier composant généré en trente secondes qui change durablement votre façon d'intégrer.