Connecter Claude Code à Figma avec MCP : Transformez vos designs en code

Vous passez deux heures à décrire un bouton bleu avec des coins arrondis et une ombre portée à votre outil d'IA préféré.

Le résultat ?

Un bouton qui ressemble vaguement à ce que vous aviez en tete, mais jamais tout à fait.

Les marges ne sont pas les bonnes, la police est approximative, et cette fameuse ombre portée a disparu quelque part entre votre prompt et le rendu final.

Ce problème, des milliers de développeurs et de designers le vivent chaque jour.

La traduction manuelle entre un fichier Figma et du code fonctionnel reste l'un des goulots d'étranglement les plus frustrants du développement web.

Et c'est exactement ce que le protocole MCP vient résoudre.

Avec la connexion entre Claude Code et Figma via MCP, l'IA ne se contente plus de deviner ce que vous décrivez.

Elle voit directement vos maquettes.

Elle accede aux composants, aux variables de design, aux espacements, aux couleurs exactes.

Le code généré correspond réellement à ce qui a été designé.

Plus besoin de jouer les interprètes entre deux mondes qui ont toujours eu du mal à se parler.

Qu'est-ce que le protocole MCP et pourquoi il change la donne

MCP, pour Model Context Protocol, est un standard ouvert développé par Anthropic.

Son rôle est simple à comprendre : il crée une passerelle standardisée entre les modèles d'IA et les sources de données externes.

On peut le voir comme un adaptateur universel qui permet à un assistant IA de lire, comprendre et interagir avec des contenus qui dépassent le simple texte.

Le serveur MCP de Figma est une application spécifique de ce protocole.

Il expose les fichiers Figma, les composants, les tokens de design et les layouts d'une manière que les modèles d'IA peuvent exploiter directement.

Quand on le connecte à Claude Code, l'outil de développement en ligne de commande d'Anthropic, on obtient un workflow ou le design alimente directement la génération de code.

Avant MCP, la conversation entre un développeur et une IA ressemblait à un jeu de téléphone arabe.

Le développeur décrivait verbalement ce qu'il voyait dans Figma, l'IA interprétait comme elle pouvait, et le résultat nécessitait systématiquement des ajustements manuels.

Avec MCP, Claude Code accede directement au fichier source. Il comprend la hiérarchie des éléments, les propriétés de chaque composant, les relations entre les couches. La différence se mesure en heures de travail économisées.

Astuce : le protocole MCP ne se limite pas à Figma. Il fonctionne avec de nombreuses sources de données, ce qui en fait un outil polyvalent pour toute agence spécialisée en intelligence artificielle.

Ce qu'il faut préparer avant de commencer

La configuration nécessite quelques éléments.

Claude Code s'installe via npm avec la commande npm install -g @anthropic-ai/claude-code.

Il faut aussi un compte Claude Pro ou Max pour accéder à l'outil.

Coté Figma, les deux méthodes de connexion (serveur distant et serveur local) ont des prérequis différents, et c'est un point que beaucoup de tutoriels oublient de préciser clairement.

Le serveur MCP distant de Figma, hébergé sur https://mcp.figma.com/mcp, est accessible sur tous les plans Figma, y compris les plans gratuits.

C'est la méthode recommandée par Figma, et elle ne nécessite pas l'application desktop.

Le serveur MCP local, lui, passe par l'application Figma Desktop et nécessite un siege Dev ou Full sur un plan Figma payant.

Il tourne localement sur votre machine à l'adresse http://127.0.0.1:3845/sse.

Le choix entre les deux dépend de votre situation.

Si vous travaillez en équipe avec des fichiers partagés et que vous voulez aussi pouvoir envoyer du code vers Figma (la fameuse fonctionnalité bidirectionnelle), le serveur distant est le meilleur choix.

Si vous préférez garder vos données locales et que vous disposez d'un plan payant, le serveur local fait le travail.

Méthode 1 : connexion via le serveur MCP distant (recommandée)

C'est la voie la plus directe.

Figma recommande cette approche depuis début 2026, et la plupart des fonctionnalités avancées, notamment la capture d'interface live et le workflow bidirectionnel, passent par ce serveur.

Ouvrez votre terminal et lancez la commande suivante :

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

Si Claude Code était déjà en cours d'exécution, redémarrez-le.

Les connexions MCP s'initialisent au démarrage, et ajouter un serveur en cours de session ne suffit pas.

Tapez ensuite /mcp dans Claude Code pour gérer vos serveurs MCP.

Sélectionnez le serveur Figma dans la liste, puis choisissez "Authenticate".

Un navigateur s'ouvrira pour vous demander d'autoriser l'acces de Claude Code à votre compte Figma.

Cliquez sur "Allow Access" et revenez dans votre terminal. Vous devriez voir un message confirmant que l'authentification a réussi.

Pour vérifier que tout fonctionne, utilisez la commande /mcp à nouveau.

Le serveur figma devrait apparaitre avec le statut "connected".

Bon à savoir : ajoutez le flag --scope user à la commande d'installation pour rendre le serveur disponible sur tous vos projets, pas uniquement le projet en cours. La commande devient claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp.

Il existe aussi un plugin officiel Figma pour Claude Code qui intègre le serveur MCP et des Agent Skills pour les workflows courants.

Pour l'installer : claude plugin install figma@claude-plugins-official.

Cette option ajoute des instructions pré-configurées qui aident Claude à mieux séquencer ses interactions avec Figma.

Méthode 2 : connexion via le serveur MCP local (Desktop)

Cette méthode fonctionne pour ceux qui préferent une connexion locale, sans passer par le serveur hébergé de Figma.

Ouvrez l'application Figma Desktop et assurez-vous qu'elle est à jour.

Créez ou ouvrez un fichier de design.

Cliquez sur le menu Figma en haut à gauche, allez dans Preferences, et activez "Enable Dev Mode MCP Server".

Une confirmation apparait, indiquant que le serveur tourne localement sur http://127.0.0.1:3845/sse.

Retournez dans votre terminal et exécutez :

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Vérifiez avec claude mcp list que le serveur apparait bien dans la liste.

Un point d'attention : ne faites pas tourner les deux serveurs (distant et local) en meme temps.

Faire coexister deux serveurs MCP qui accedent aux memes données Figma crée de la confusion pour l'agent IA et produit des résultats incohérents.

Méthode 3 : l'alternative open-source avec une clé API

Pour ceux qui souhaitent expérimenter sans dépendre du serveur officiel, il existe une troisième voie.

Elle passe par un package open-source et une clé API Figma personnelle.

Installez le package avec npm install -g figma-developer-mcp, puis créez un fichier .mcp.json dans votre dossier de projet avec la configuration suivante :

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "figma-developer-mcp",
      "args": ["--stdio"],
      "env": {
        "FIGMA_API_KEY": "VOTRE_CLE_API_FIGMA"
      }
    }
  }
}

La clé API se génere dans les paramètres de votre compte Figma, section "Personal Access Tokens".

Lancez Claude Code dans le dossier contenant le fichier .mcp.json, tapez /mcp, et le serveur devrait apparaitre comme connecté.

Cette méthode offre moins d'outils que le serveur officiel.

Elle convient pour des prototypes ou des tests, mais pour un usage professionnel régulier, le serveur distant de Figma reste plus complet et plus fiable.

Comment utiliser la connexion au quotidien

Une fois la connexion établie, deux approches s'offrent à vous pour travailler.

La premiere est basée sur les liens.

Vous sélectionnez un calque ou un frame dans Figma, copiez son lien depuis la barre d'adresse du navigateur (ou via clic droit > "Copy link to selection"), puis collez ce lien dans votre prompt Claude Code.

Par exemple : "Convertis ce design de carte en composant React avec Tailwind CSS : [lien-figma]".

Le serveur MCP extrait automatiquement l'identifiant du noeud à partir de l'URL et renvoie tout le contexte de design nécessaire.

La seconde, disponible avec le serveur MCP Desktop, repose sur la sélection.

Vous sélectionnez directement un élément dans Figma, puis demandez à Claude Code de travailler dessus.

Cette méthode est souvent plus précise parce qu'elle élimine toute ambiguité sur l'élément ciblé.

Ce qui rend cette intégration particulierement intéressante, c'est la fonctionnalité de capture d'interface live.

Vous pouvez demander à Claude Code de démarrer un serveur local pour votre application, puis de capturer l'interface telle qu'elle s'affiche dans le navigateur et de l'envoyer vers Figma sous forme de calques éditables.

Ce n'est pas une capture d'écran. Ce sont de vrais frames Figma, avec une arborescence de calques, des composants qu'on peut inspecter, dupliquer, modifier.

Code Connect : la fonctionnalité qui fait vraiment la différence

C'est probablement l'aspect le plus sous-estimé de cette intégration.

Code Connect permet de mapper les composants de votre design system Figma directement aux composants de votre base de code.

Sans cette liaison, l'IA génère du code générique.

Avec elle, le code généré utilise vos propres composants, vos imports, vos conventions de nommage.

Quand le serveur MCP traite un frame Figma contenant des composants connectés via Code Connect, il génère des wrappers spéciaux dans sa fenêtre de contexte.

Ces wrappers incluent les propriétés du composant Figma (variantes, props booléennes, contenu textuel), les instructions d'import, le snippet d'utilisation réel, et les instructions personnalisées que vous avez ajoutées.

Pour les équipes qui disposent d'un design system mature et de workflows bien rodés, cette combinaison MCP + Code Connect peut réduire le temps de développement initial de 50 à 70 % selon les tests réalisés par des équipes de production.

C'est le type de gain qui justifie l'investissement dans une création de site web pensée dès le départ pour l'intégration IA.

Point clé : la documentation officielle de Figma insiste sur le fait que Code Connect est le meilleur levier pour obtenir une réutilisation cohérente des composants dans le code généré. Sans lui, le modèle d'IA ne sait pas que votre composant Button existe dans src/components/ui/Button.tsx.

Les limites à connaitre avant de se lancer

Meme si cette intégration représente une avancée significative, elle n'est pas encore un workflow parfaitement fluide dans toutes les situations.

La mise à jour de code existant reste compliquée.

Claude Code excelle dans la génération de nouveaux composants à partir de zéro, mais quand un design évolue, il est difficile pour l'IA de faire des modifications chirurgicales sur du code existant sans bien comprendre l'architecture du design system.

On se retrouve souvent à régénérer un composant entier plutôt qu'à le modifier ponctuellement.

Les flux multi-écrans demandent un travail supplémentaire.

Convertir un onboarding de cinq écrans, par exemple, nécessite de traiter chaque frame individuellement, puis de demander à Claude Code de les assembler en un composant interactif.

Chaque étape consomme des tokens et du temps.

La logique métier ne survit pas au voyage retour.

Quand vous envoyez du code vers Figma, les éléments deviennent des calques éditables, ce qui est parfait pour le design.

Mais si un designer modifie ces calques et que vous les re-importez dans le code, les event handlers, le state management et la logique métier disparaissent.

Pour l'instant, il vaut mieux considérer le flux code vers Figma comme un aller simple avec des retours occasionnels, pas comme un aller-retour permanent.

Enfin, les aspects de sécurité méritent attention.

Les tokens d'acces Figma, s'ils sont compromis, donnent acces à l'ensemble des fichiers de votre workspace.

Stockez-les dans des variables d'environnement ou des gestionnaires de secrets, jamais dans l'historique du shell ou dans des fichiers de configuration versionnés sur Git.

Résolution des problèmes courants

Quand le serveur Figma n'apparait pas dans la liste après /mcp, la premiere chose à faire est de redémarrer complètement Claude Code.

Les connexions MCP s'initialisent au lancement, et un ajout en cours de session n'est pas toujours pris en compte.

Si une erreur d'authentification apparait, retournez dans /mcp, sélectionnez le serveur Figma, et relancez le processus d'authentification OAuth dans votre navigateur.

Vérifiez aussi que le compte Figma connecté est bien celui qui a acces aux fichiers sur lesquels vous travaillez.

Les résultats visuels imprécis (mauvaises formes, espacements approximatifs) sont plus fréquents avec la version open-source, qui dispose de moins d'outils que le serveur officiel.

Si vous rencontrez ce problème régulièrement, basculer vers le serveur MCP officiel de Figma améliore sensiblement la qualité du rendu.

Conseil pratique : commencez par un composant simple, pas par une page entiere. Un bouton, une carte, un champ de formulaire. Validez que le workflow fonctionne correctement sur un élément isolé avant de passer à des compositions plus complexes.

Ce que cette intégration signifie pour les PME françaises

Pour une PME qui fait développer son site web ou son application, la connexion Claude Code-Figma via MCP n'est pas qu'un gadget technique.

C'est une compression significative des délais entre la validation d'une maquette et la livraison du code correspondant.

Un designer produit ses maquettes dans Figma.

Le développeur, plutôt que de traduire manuellement chaque élément, connecte son environnement de développement au fichier Figma et génère une base de code fidele au design en quelques minutes.

Les itérations de correction visuelle, qui prenaient parfois des jours, se réduisent à quelques échanges.

Pour les entreprises qui travaillent avec une agence web ou une agence Webflow, cette intégration se traduit par des projets livrés plus vite, avec moins d'écarts entre le design validé et le produit final.

Les équipes qui ont adopté ce workflow rapportent des gains de vélocité mesurables, avec des flux produit complexes reconstruits en une fraction du temps habituel.

Et la tendance ne fait que s'accélérer. Figma ajoute régulierement de nouveaux outils à son serveur MCP, et les partenariats avec des éditeurs comme Anthropic, Cursor, VS Code et Windsurf élargissent continuellement l'écosysteme compatible.

Pour aller plus loin

Si vous souhaitez approfondir le sujet, la documentation développeur de Figma fournit des instructions détaillées sur chaque outil exposé par le serveur MCP, avec des exemples de prompts.

Le catalogue MCP de Figma liste tous les clients compatibles et les modalités de connexion pour chaque éditeur.

Pour explorer d'autres intégrations IA qui transforment les workflows des entreprises, consultez nos articles sur les agents IA et sur les dernières actualités de l'intelligence artificielle.

‍