Claude + Figma : transformer vos designs en code via MCP
Vous pointez Claude vers une maquette Figma. Il lit la structure réelle du design, avec ses composants, ses variables et ses espacements, puis écrit un code aligné dessus au lieu d’interpréter une capture d’écran. Le serveur MCP de Figma fonctionne dans Claude Code comme dans l’application de chat. Voici comment le configurer, ce qu’il permet et ses limites.
Implémenter une maquette à partir d’une capture d’écran oblige un modèle à deviner. Il estime alors les marges, invente des couleurs approximatives et ignore les composants réutilisables. Le serveur MCP de Figma supprime cette part de devinette : il donne à Claude l’accès au design tel qu’il est défini dans Figma, avec ses variables, ses styles, ses calques et ses composants. Le code généré reste ainsi fidèle à votre design system.
Figma propose deux usages avec Claude. Dans Claude Code, le serveur transforme vos maquettes en code et renvoie vos interfaces vers Figma. Dans l’application de chat, le connecteur lit vos fichiers et génère des diagrammes FigJam. Avant de voir la configuration, rappelons les bases du protocole.
MCP : le protocole qui connecte Claude à vos outils
MCP, pour Model Context Protocol, est un standard ouvert créé par Anthropic. Un connecteur MCP expose des outils que le modèle appelle de lui-même, comme lire un fichier ou, dans le cas de Figma, récupérer le contexte d’un design. Notre article sur le protocole MCP détaille son fonctionnement.
Le mécanisme reste le même partout. D’abord, vous connectez un serveur MCP à votre client, et ce dernier découvre les outils proposés. Quand votre demande correspond à l’un d’eux, le modèle l’appelle et utilise le résultat dans sa réponse.
Sans MCP, un assistant code à partir d’une image et approxime. Avec le serveur de Figma, il lit les valeurs exactes, comme les variables de couleur, les tailles et les composants nommés. Il produit donc un code qui respecte votre design system.
Le serveur MCP de Figma : deux versions
Figma propose un serveur MCP officiel en deux versions. Le serveur distant, hébergé à l’adresse https://mcp.figma.com/mcp, est celui que Figma recommande : il offre les outils les plus récents et s’active sans installation. En local, le serveur desktop tourne dans l’application Figma et répond à des besoins d’entreprise précis.
Le serveur distant est ouvert à tous les sièges et tous les plans, mais les quotas changent fortement d’un siège à l’autre. Un siège View ou Collab ne donne en effet droit qu’à quelques appels par mois, ce qui explique pourquoi une page d’aide de Figma cite un siège Full ou Dev comme prérequis. Le serveur desktop exige, lui, un siège Dev ou Full sur un plan payant.
La vidéo ci-dessous, réalisée par le créateur francophone Raph Fages et non par Figma, montre la mise en place du serveur avec Claude.
Ajouter Figma dans l’application Claude
Figma figure dans le répertoire officiel des connecteurs de Claude. Ouvrez Personnaliser, puis Connecteurs, cliquez sur « + » et ajoutez Figma depuis le répertoire. Vous pouvez également passer par le bouton « + » d’une conversation, puis Connecteurs. Une page d’autorisation de Figma s’ouvre alors dans le navigateur.
Depuis janvier 2026, Figma fait aussi partie des connecteurs interactifs de Claude, accessibles sur toutes les offres. Il transforme un texte ou une image en diagramme FigJam, comme un organigramme ou un planning de Gantt. La fiche du connecteur liste aussi la lecture du contexte d’un design, des variables et des captures.
Configurer Figma dans Claude Code
Pour Claude Code, Figma recommande son plugin officiel, qui installe le serveur distant et des compétences (skills) pour les tâches courantes.
Dans le terminal, lancez claude plugin install figma@claude-plugins-official. Redémarrez Claude Code s’il était ouvert.
Tapez /plugin, ouvrez l’onglet Installed, sélectionnez figma et lancez l’autorisation. Une fois la connexion validée dans le navigateur, le serveur apparaît comme connecté.
Copiez l’URL d’un cadre Figma et demandez : « Implémente ce design en composant React, en respectant les variables et les espacements. » Claude récupère le contexte et génère le code.
Vous pouvez aussi ajouter le serveur à la main avec claude mcp add --transport http figma https://mcp.figma.com/mcp, puis vous authentifier avec /mcp. Pour le serveur desktop, ouvrez l’application Figma, passez en Dev Mode et activez le serveur dans le panneau de droite. La commande devient alors claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.
Ce que le connecteur permet concrètement
Récupérer le contexte d’un design
L’outil central, get_design_context, extrait la structure, les styles, les dimensions et la hiérarchie d’un cadre ou d’un composant. De plus, d’autres outils récupèrent une capture d’écran ou les métadonnées du fichier. Claude génère ainsi un code qui colle à la maquette plutôt qu’à une approximation visuelle.
Variables et design tokens
Le serveur expose les définitions de variables : couleurs, typographies, espacements et rayons. Claude écrit alors un code qui réutilise vos tokens existants au lieu d’inventer des valeurs en dur. Pour une équipe qui maintient un design system, le code reste cohérent avec la source.
Aligner code et design avec Code Connect
Code Connect relie un composant Figma à son équivalent dans votre base de code. Quand cette correspondance existe, Claude assemble vos vrais composants au lieu d’en recréer. Le serveur fournit la carte de correspondance, et propose même des suggestions pour la compléter.
Écrire dans Figma
Le serveur distant peut aussi créer et modifier du contenu dans Figma Design et FigJam, avec l’outil use_figma. Cette écriture demande cependant un siège Full, puisqu’un siège Dev reste en lecture seule hors brouillons. Figma la présente en bêta gratuite, appelée à devenir payante à l’usage. Chaque appel reste limité à 20 ko, et les images ne sont pas encore prises en charge.
Les sources divergent sur la disponibilité de l’écriture dans le chat : l’aide de Figma cite Claude Desktop parmi les clients compatibles, alors que la fiche du connecteur sur le site de Claude ne mentionne pas cet outil. Depuis février 2026, Claude Code peut enfin renvoyer une interface vers Figma avec la commande « Send this to Figma ». La fonction convertit ainsi l’interface en calques modifiables.
Trois workflows concrets
Donnez l’URL d’un écran. Claude lit le design, génère le composant dans votre framework et réutilise vos variables, ce qui vous donne un point de départ propre.
Claude récupère les variables d’un fichier et les transforme en tokens exploitables, en CSS, en Tailwind ou en fichier de thème.
Une interface prototypée dans Claude Code repart dans Figma en calques modifiables, pour que l’équipe design la retravaille.
Quotas et limites à connaître
La documentation développeur de Figma fixe des quotas d’appels selon le siège et le plan.
| Siège | Plan Starter | Professional et Organization | Enterprise |
|---|---|---|---|
| View ou Collab | Jusqu’à 20 appels par mois | Jusqu’à 6 appels par mois | Jusqu’à 6 appels par mois |
| Dev ou Full | Non concerné | 200 appels par jour | 600 appels par jour |
- La qualité dépend de la structure du fichier. Un design bien nommé, bien composé et bien variabilisé donne un bien meilleur code qu’un fichier brouillon.
- Le serveur desktop offre moins d’outils. Toute l’écriture dans Figma et plusieurs outils récents ne fonctionnent qu’avec le serveur distant.
- Le code généré reste un point de départ. Il accélère le travail, mais demande une relecture, surtout sur la logique, l’accessibilité et les cas limites.
Figma avec Cursor, VS Code et les autres
MCP est un standard ouvert, mais Figma restreint l’accès à son serveur : seuls les clients listés dans son catalogue MCP peuvent s’y connecter. Ce catalogue comprend notamment Claude, Cursor, VS Code, Codex et Gemini CLI.
Cursor
La méthode recommandée consiste à taper /add-plugin figma dans le chat de l’agent Cursor. Sinon, un lien d’installation directe reste disponible pour une configuration manuelle.
VS Code
Ouvrez la palette de commandes, choisissez « MCP: Open User Configuration », puis ajoutez le serveur https://mcp.figma.com/mcp de type http. Lancez-le et autorisez l’accès avec votre compte Figma.
Serveur distant ou desktop : lequel choisir
| Critère | Serveur distant | Serveur desktop |
|---|---|---|
| Hébergement | Chez Figma (mcp.figma.com) | En local, dans l’application Figma |
| Accès | Tous les sièges, avec quotas | Siège Dev ou Full, plan payant |
| Outils | Tous, dont l’écriture dans Figma | Lecture du design, sans écriture |
| Cas d’usage | Choix par défaut | Contraintes d’entreprise, Figma for Government |
En pratique, commencez par la version distante, et ne passez au serveur desktop que si une contrainte d’organisation l’impose.
Claude Design, un concurrent de Figma ?
En avril 2026, Anthropic a lancé Claude Design, un outil de création de maquettes, de prototypes et de présentations, en préversion pour les offres payantes. Il exporte vers Canva, PDF, PowerPoint ou HTML, et passe le relais à Claude Code. En revanche, l’annonce ne mentionne aucune intégration avec Figma. Pour les équipes déjà organisées autour de Figma, le serveur MCP reste donc la passerelle naturelle avec Claude.
Notre avis
Le serveur MCP de Figma s’attaque au maillon faible du passage du design au code : la perte d’information entre la maquette et l’implémentation. En donnant à Claude le contexte exact d’un fichier, il transforme une interprétation visuelle en transposition fidèle. Pour les développeurs front et les équipes qui maintiennent un design system, le gain de temps est réel, surtout avec Code Connect.
Le résultat dépend toutefois de la propreté de vos fichiers et de votre relecture. Vérifiez aussi votre siège Figma avant de vous lancer, car les quotas des sièges View et Collab suffisent à peine pour un test. Les autres articles de notre série, comme Canva, Playwright, Higgsfield, Pappers ou Composio, présentent d’autres connecteurs.
Retrouvez notre guide pour connecter Claude à vos outils du quotidien.