Claude + Figma : transformer vos designs en code via MCP

Implémenter une maquette à partir d’une capture d’écran, c’est demander à un modèle de deviner : il estime les marges, invente des couleurs approximatives, ignore les composants réutilisables. Le serveur MCP Figma supprime cette devinette. Il donne à l’outil agentique l’accès au design tel qu’il est défini dans Figma — variables, styles, hiérarchie des calques, composants — et permet de générer du code fidèle à la source. La différence entre un rendu « à peu près » et un code aligné sur votre design system tient à ce contexte.

À la différence des autres connecteurs de cette série, le MCP Figma ne s’adresse pas d’abord à l’application de chat : il est pensé pour les outils de développement agentiques. Avec Claude, le terrain naturel est donc Claude Code. Avant de voir la configuration, posons les bases du protocole.

MCP : le protocole qui connecte Claude à vos outils

MCP (Model Context Protocol) est un standard ouvert créé par Anthropic pour permettre à un modèle d’interagir avec des services externes. Un connecteur MCP expose des outils que le modèle peut appeler de lui-même : lire un fichier, interroger une base, ou — dans le cas de Figma — récupérer le contexte d’un design et générer le code correspondant.

Le mécanisme est le même partout. Vous connectez un serveur MCP à votre client (ici Claude Code). Le client découvre les outils exposés. Quand votre demande correspond à l’un d’eux, le modèle l’appelle, récupère le résultat et l’utilise dans sa réponse. Le serveur Figma devient ainsi la source de vérité sur vos maquettes.

Le serveur MCP Figma : à quoi il sert

Figma propose un serveur MCP officiel dont la mission est d’amener le contexte de vos fichiers dans les outils agentiques de code. Il existe en deux versions : un serveur distant, hébergé par Figma à l’adresse https://mcp.figma.com/mcp, et un serveur desktop qui tourne en local via l’application Figma. Figma recommande la version distante pour la plupart des usages : elle offre l’ensemble de fonctionnalités le plus large et s’active sans installation locale.

Le serveur distant est disponible sur tous les sièges et tous les plans Figma. Le serveur desktop, lui, requiert un siège Dev ou Full sur un plan payant et s’adresse à des cas d’organisation ou d’entreprise spécifiques. Les deux passent par une authentification via votre compte Figma. Nous comparons les deux versions en détail plus bas.

Configurer le connecteur Figma dans Claude Code

La méthode recommandée par Figma pour Claude Code passe par son plugin officiel, qui installe à la fois le serveur MCP et des compétences (Agent Skills) pour les workflows courants. Voici les étapes pour la version distante.

Pour le serveur desktop, la logique diffère : ouvrez l’application Figma, passez en Dev Mode sans rien sélectionner sur le canevas, activez le serveur MCP dans le panneau latéral, puis copiez l’URL locale fournie pour la renseigner dans la configuration de votre outil. Le serveur distant étant un MCP standard, il peut aussi s’ajouter comme connecteur dans d’autres clients compatibles ; mais le workflow design-vers-code prend tout son sens dans un éditeur agentique.

Ce que le connecteur permet concrètement

Une fois connecté, Claude dispose d’outils dédiés à la lecture — et parfois à l’écriture — de vos designs. Voici les usages principaux.

Récupérer le contexte d’un design

L’outil central extrait le contexte d’un cadre ou d’un composant sélectionné : structure, styles, dimensions, hiérarchie. C’est ce qui permet à Claude de générer un code qui colle à la maquette plutôt qu’à une approximation visuelle. Il peut aussi récupérer une capture pour valider le rendu.

Variables et design tokens

Le serveur expose les définitions de variables : couleurs, typographies, espacements, rayons. Claude peut ainsi écrire un code qui réutilise vos tokens existants au lieu d’inventer des valeurs en dur. Pour une équipe qui maintient un design system, c’est la garantie d’un code 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 est en place, Claude génère du code qui pointe vers vos vrais composants plutôt que d’en recréer. Le serveur fournit la carte de correspondance pour guider la génération.

Écrire dans Figma

Au-delà de la lecture, le serveur permet de créer et de modifier du contenu directement dans Figma Design et FigJam depuis l’outil agentique. Figma fait évoluer rapidement ces capacités d’écriture : leur périmètre exact est à vérifier au moment où vous configurez le serveur.

Trois workflows concrets

Les limites à connaître

Le serveur est puissant, mais il a des contraintes qu’il vaut mieux anticiper.

• Orienté outils de code — le MCP Figma est conçu pour les éditeurs agentiques (Claude Code, Cursor, VS Code). Le workflow design-vers-code n’a pas le même intérêt dans une simple application de chat.
• Siège requis pour le serveur desktop — la version locale exige un siège Dev ou Full sur un plan payant. La version distante, plus large en fonctionnalités, reste le choix par défaut.
• Qualité liée à la structure du fichier — un design bien nommé, bien composé et bien variabilisé donne un bien meilleur code qu’un fichier brouillon. Le serveur transmet ce qu’il trouve : un design propre en entrée, un code propre en sortie.
• Limites d’usage — l’accès est soumis à des limites de débit selon votre plan Figma. Pour un usage intensif, consultez les conditions en vigueur dans la documentation développeur de Figma.
• Un point de départ, pas un livrable final — le code généré accélère le travail mais demande relecture et ajustements, surtout sur la logique, l’accessibilité et les cas limites.

MCP Figma n’est pas réservé à Claude Code : Cursor, VS Code et les autres

MCP est un standard ouvert. Le même serveur Figma — la même URL mcp.figma.com/mcp pour la version distante — fonctionne donc avec la plupart des outils agentiques de code. Ce qui change d’un outil à l’autre, c’est la manière d’ajouter le serveur, pas le serveur lui-même. Voici les différences d’installation à connaître.

Claude Code

La méthode recommandée passe par le plugin officiel : claude plugin install figma@claude-plugins-official, puis autorisation via /plugin. C’est le parcours détaillé dans ce guide. Un ajout manuel du serveur distant en ligne de commande reste possible.

Cursor

Dans le menu de configuration MCP de Figma (Dev Mode), sélectionnez Cursor : un bouton Add ouvre les réglages MCP de Cursor avec l’URL pré-remplie. Vérifiez l’URL, cliquez sur Install, puis sur Connect pour l’authentification.

VS Code

Même principe : depuis le menu Figma, sélectionnez VS Code, cliquez sur Add pour ouvrir la page d’installation, vérifiez l’URL https://mcp.figma.com/mcp (type http), installez, puis authentifiez-vous avec votre compte Figma.

Le serveur est également compatible avec Codex, Windsurf et Gemini CLI, ainsi qu’avec tout client supportant les serveurs MCP. Côté Gemini CLI, l’authentification de la session se fait via la commande /mcp auth figma.

Serveur Figma distant ou desktop : lequel choisir

Les deux versions donnent accès au contexte de vos designs, mais ne visent pas les mêmes usages. La version distante est le choix par défaut pour la quasi-totalité des cas. La version desktop répond à des besoins d’organisation ou d’entreprise spécifiques, notamment quand le travail doit rester local.

En résumé : commencez par la version distante. Ne passez au serveur desktop que si une contrainte d’organisation ou de localité l’impose.

Notre avis

Le serveur MCP Figma s’attaque au maillon faible du design-vers-code : la perte d’information entre la maquette et l’implémentation. En donnant à Claude le contexte exact d’un fichier — variables, composants, structure — il fait passer la génération de code d’une interprétation visuelle à une transposition fidèle. Pour les développeurs front et les équipes qui maintiennent un design system, le gain de temps et de cohérence est réel, surtout combiné à Code Connect.

La qualité du résultat dépend toutefois de deux choses. D’abord, la propreté de vos fichiers Figma : un design bien structuré produit un code exploitable, un fichier désordonné produit du bruit. Ensuite, votre vigilance à la relecture : le code généré est un excellent point de départ, pas un livrable prêt à fusionner sans contrôle. Utilisé avec ces réserves, le connecteur Figma est l’un des plus utiles de la série pour qui code des interfaces.