Connecter Claude à Figma avec MCP : le guide complet 2026

Pendant des années, le passage du design au code a reposé sur une seule chose : quelqu'un qui regarde une maquette d'un œil, son éditeur de l'autre, et qui recopie à la main des valeurs d'espacement, des codes couleur et des tailles de police. Un travail lent, répétitif, et dans lequel l'écart se creuse à chaque itération, parce que la maquette évolue d'un côté pendant que le site avance de l'autre.

Le protocole MCP change la nature du problème. Plutôt que de décrire un design à une IA, on lui donne directement accès au fichier Figma : la structure des calques, les variables, les composants, les exports. Et surtout, depuis l'ouverture du canvas Figma aux agents, la connexion fonctionne dans les deux sens : l'IA ne se contente plus de lire vos maquettes, elle peut aussi écrire dedans.

Ce guide couvre les trois façons de connecter Claude à Figma, ce que la connexion sait réellement faire, et la partie que la plupart des tutoriels n'abordent jamais : comment on s'en sert au quotidien dans une agence, sur de vrais projets clients.

MCP, en deux minutes

MCP signifie Model Context Protocol. C'est un standard ouvert, publié par Anthropic, qui définit une façon unique pour les modèles d'IA de se connecter à des outils et à des sources de données extérieures. Avant lui, chaque intégration était un développement spécifique ; avec lui, un éditeur comme Figma publie un serveur, et tous les clients compatibles peuvent s'y brancher. C'est la raison pour laquelle le même serveur Figma fonctionne avec Claude, Claude Code, Cursor, VS Code ou Codex.

La différence concrète pour vous tient en une phrase : sans MCP, vous décrivez une maquette à une IA qui en devine le reste ; avec MCP, elle lit le fichier source. Elle connaît le nom exact de vos composants, la valeur de vos variables de couleur, la hiérarchie de vos calques, les réglages d'auto-layout. Le résultat ne dépend plus de la qualité de votre description, mais de la qualité de votre fichier Figma — ce qui est une excellente nouvelle pour les équipes qui travaillent proprement, et un rappel sévère pour les autres.

Ce que le serveur MCP de Figma sait réellement faire

La plupart des articles sur le sujet s'arrêtent au design-vers-code. C'est la fonction la plus connue, mais c'est devenue la plus petite partie du périmètre. Voici l'ensemble, regroupé par usage.

Lire un design

L'outil central est get_design_context : il renvoie le contexte complet d'un calque ou d'une sélection — structure, styles, hiérarchie — et produit par défaut du React avec Tailwind, que vous pouvez rediriger vers n'importe quelle autre technologie en le précisant dans votre demande. Autour de lui gravitent get_metadata, qui renvoie une structure allégée quand la sélection est trop lourde, get_screenshot pour que l'agent voie le rendu, get_variable_defs pour récupérer les variables et styles utilisés, download_assets pour exporter images et icônes aux bons formats, et get_motion_context pour récupérer les données d'animation d'un élément animé.

Écrire dans Figma

C'est le changement majeur. L'outil use_figma permet de créer, modifier, supprimer et inspecter des objets dans les fichiers Figma Design, les tableaux FigJam et les présentations Figma Slides : pages, frames, composants, variantes, variables, styles, textes, images, auto-layout. Fait notable, l'agent commence par regarder votre design system et le contenu existant avant de créer quoi que ce soit de nouveau — ce qui en fait un outil de mise en cohérence bien plus que de génération brute.

Renvoyer une interface en ligne vers Figma

Avec generate_figma_design, vous demandez à Claude de lancer un serveur local pour votre site ou votre application, de capturer l'interface telle qu'elle s'affiche réellement, et de l'envoyer dans Figma. Il ne s'agit pas d'une capture d'écran collée dans un cadre : ce sont de vrais calques éditables, dans un nouveau fichier, un fichier existant ou votre presse-papier.

Générer des diagrammes FigJam

L'outil generate_diagram produit un diagramme FigJam à partir d'une syntaxe Mermaid ou d'une simple description en français : organigramme, diagramme d'états, diagramme de séquence, schéma d'architecture, modèle de données, diagramme de Gantt. Pratique pour documenter une arborescence ou un parcours utilisateur sans le dessiner à la main.

Relier le design system au code

Trois outils travaillent ensemble ici : get_libraries liste les bibliothèques rattachées à un fichier, search_design_system cherche un composant, une variable ou un style existant dans ces bibliothèques, et get_code_connect_map relie un composant Figma à son équivalent réel dans votre base de code. Sans cette liaison, l'IA génère du code générique ; avec elle, elle réutilise vos propres composants, vos imports et vos conventions.

Ce qu'il vous faut avant de commencer

Côté Figma, le serveur distant est accessible dès lors que vous avez un compte, sans application de bureau. Le serveur local, lui, impose l'application Figma Desktop à jour. Côté Claude, vous avez le choix entre l'application Claude, pour travailler en conversation, et Claude Code, l'outil en ligne de commande, si vous intervenez dans une base de code.

Un point mérite d'être connu avant de choisir, parce qu'il change le confort au quotidien : la sélection directe ne fonctionne qu'avec le serveur local. Avec le serveur desktop, vous sélectionnez un frame dans Figma et vous demandez simplement « implémente ma sélection ». Avec le serveur distant, vous devez copier le lien du frame et le coller dans votre demande — l'agent ne visite pas l'URL, il en extrait l'identifiant du nœud. Rien de bloquant, mais c'est un geste de plus à chaque fois.

Méthode 1 : connecter Figma à l'application Claude

C'est la méthode que la plupart des articles oublient, alors qu'elle concerne le plus grand nombre : elle ne demande ni terminal, ni ligne de commande, ni connaissances techniques. Figma liste Claude comme client compatible à part entière, avec accès en lecture et en écriture, sur les serveurs distant comme local, pour Figma Design, Figma Make et FigJam.

L'installation passe par le répertoire de plugins de Claude : on ajoute le plugin Figma, on autorise l'accès à son compte Figma via la fenêtre d'authentification qui s'ouvre, et c'est terminé. Dans la conversation, il suffit ensuite de coller le lien d'un frame et de formuler sa demande en français.

C'est la bonne porte d'entrée pour un designer, un chef de projet ou un dirigeant qui veut extraire des variables, faire mettre au propre un fichier, générer un diagramme ou récupérer des assets, sans jamais ouvrir un éditeur de code.

Méthode 2 : connecter Figma à Claude Code

Si vous développez, c'est la connexion la plus utile : Claude Code lit le design et écrit directement dans vos fichiers de projet.

Avec le plugin officiel (recommandé)

Figma recommande de passer par son plugin, qui installe à la fois la configuration du serveur MCP et des compétences prêtes à l'emploi pour les tâches courantes. Une seule commande suffit :

claude plugin install figma@claude-plugins-official

Ces compétences ne sont pas accessoires : les outils d'écriture dans Figma s'appuient dessus pour séquencer correctement leurs actions. Sans elles, les résultats sont nettement moins fiables.

En configuration manuelle

Si vous préférez ajouter le serveur vous-même :

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

Un conseil qui évite de recommencer à chaque projet : ajoutez --scope user. Par défaut, Claude Code installe le serveur uniquement pour le projet en cours.

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

Relancez ensuite Claude Code — les connexions MCP s'initialisent au démarrage, un ajout en cours de session n'est pas pris en compte. Tapez /mcp, sélectionnez figma, puis Authenticate. Votre navigateur s'ouvre, vous autorisez l'accès, et vous devriez voir dans le terminal la confirmation de connexion. Un second /mcp vous permet de vérifier que le serveur est bien actif.

Méthode 3 : le serveur local via Figma Desktop

Le serveur local a un vrai intérêt : il vous permet de travailler à partir de ce que vous avez sélectionné à l'écran, sans copier le moindre lien. En contrepartie, il demande l'application de bureau et offre un périmètre plus restreint.

L'activation se fait dans Figma, et non dans un fichier de configuration. Ouvrez un fichier dans l'application de bureau à jour, basculez en Dev Mode (raccourci Maj + D), puis, dans la section MCP server du panneau d'inspection, cliquez sur Enable desktop MCP server. Un message confirme que le serveur tourne en local.

Côté Claude Code, une commande suffit ensuite :

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

Attention à un détail qui traîne encore dans beaucoup de tutoriels : l'adresse se termine par /mcp, et non par /sse comme dans les premières versions. Si vous recopiez une configuration trouvée en ligne et que rien ne se connecte, commencez par vérifier ce point.

Le même panneau donne accès à deux réglages utiles : la gestion des images, qui détermine si le serveur fournit un lien local ou télécharge réellement les fichiers dans votre projet, et l'activation de Code Connect, qui inclut vos correspondances de composants dans les réponses.

Dernier conseil : ne faites pas tourner les deux serveurs en même temps. Deux sources concurrentes sur les mêmes données donnent des résultats incohérents.

Comment on s'en sert chez Gokuu

Une connexion technique ne vaut que par l'usage qu'on en fait. Voici concrètement ce que cette intégration a changé dans notre façon de travailler, et surtout ce qu'elle n'a pas changé.

La page d'accueil, on la code toujours à la main

C'est notre premier principe, et il peut surprendre dans un article consacré à l'automatisation. La page d'accueil est l'endroit où se joue la différence entre un site qui ressemble à tous les autres et un site qui porte une vraie identité de marque. Rythme des sections, respirations, détails d'animation, hiérarchie du discours : ce sont des décisions de métier, pas des problèmes de traduction. Une IA produit très vite une page d'accueil correcte, et c'est exactement le problème — correcte, c'est-à-dire interchangeable.

Nous gardons donc l'IA à distance du moment où l'identité se décide, et nous la mobilisons massivement sur tout ce qui vient après : les pages intérieures, les déclinaisons, la mise en cohérence. La valeur se crée au premier écran, le temps se perd sur les trente suivants.

Mettre au propre et réorganiser les fichiers Figma

Tous ceux qui travaillent sur Figma connaissent la situation : un fichier qui a vécu, des calques nommés « Frame 247 », des espacements posés à l'œil, des pages empilées sans logique, des composants dupliqués au lieu d'être réutilisés. Personne n'a jamais le temps de ranger, et plus le fichier grossit, moins l'envie vient.

C'est là que l'écriture dans le canvas prend tout son sens. On demande à Claude de renommer les calques selon une convention, de restructurer les pages, d'appliquer l'auto-layout là où il manque, d'aligner les espacements sur l'échelle du design system, de remplacer les éléments dupliqués par des instances du bon composant. Le travail est fastidieux pour un humain, parfaitement cadré pour une machine, et le gain ne se limite pas à l'esthétique du fichier : un fichier propre produit ensuite un bien meilleur code, puisque l'agent lit ce que vous avez rangé.

Décliner le design system

C'est notre usage le plus rentable. Une fois les fondations posées lors de la conception de la maquette — palette, échelle typographique, espacements, composants de base — il reste toujours une longue traîne : les variantes manquantes d'un composant, les états qu'on n'a pas dessinés, les déclinaisons mobiles, la propagation d'un changement de token sur l'ensemble du fichier.

L'agent commence par chercher ce qui existe déjà dans les bibliothèques avant de créer quoi que ce soit, ce qui évite précisément le travers qu'on redoute : voir apparaître un énième bouton bleu légèrement différent des six autres. On lui demande de générer les variantes d'une carte, de créer les états de survol et d'erreur d'un formulaire, de décliner une section en version mobile, et on arbitre le résultat.

Faire remonter le site codé dans Figma

Le quatrième usage est le moins intuitif et l'un des plus utiles. Quand un site a vécu quelques mois, la maquette d'origine ne correspond plus à la réalité : des ajustements ont été faits en production, des sections ont bougé, personne n'a reporté les changements. Plutôt que de redessiner, on capture l'interface en ligne et on la renvoie dans Figma sous forme de calques éditables. Le fichier redevient une base de travail fidèle pour la prochaine évolution.

Ce qu'on ne lui confie pas

La direction artistique, la hiérarchie du discours commercial, le choix de ce qu'on montre et de ce qu'on tait, et la validation finale. L'IA exécute remarquablement bien ce qui est cadré ; elle n'a aucune idée de ce qui fait signer un client dans votre métier. Notre règle est simple : elle accélère la production, jamais la décision.

Les prompts qui fonctionnent vraiment

La qualité du résultat dépend beaucoup de la formulation. Trois principes ressortent de notre pratique.

Nommer la technologie attendue. Par défaut, le serveur renvoie du React avec Tailwind. Si vous travaillez autrement, dites-le explicitement : « génère cette sélection en HTML et CSS simples », « génère cette sélection en Vue ». C'est la source numéro un de résultats décevants chez ceux qui ne travaillent pas en React.

Pointer vos composants. Une demande du type « génère cette sélection en utilisant les composants de src/components/ui » change radicalement la sortie : au lieu de code générique, vous récupérez du code qui s'intègre dans votre projet.

Poser les règles une fois pour toutes. Le serveur fournit une invite dédiée, create_design_system_rules, qui génère un fichier de règles décrivant votre design system et votre stack. Enregistré au bon endroit, ce fichier est relu à chaque génération et évite de répéter les mêmes consignes à chaque demande. C'est dix minutes de configuration qui rentabilisent tout le reste.

Dernier réflexe utile : commencez petit. Un bouton, une carte, un champ de formulaire. Validez que la chaîne fonctionne sur un élément isolé avant de lancer l'agent sur une page entière.

Les limites à connaître

Cette intégration est impressionnante, elle n'est pas magique. Les points suivants méritent d'être connus avant de bâtir un process dessus.

Les gros frames saturent le contexte. Sélectionner une page entière produit une masse d'informations que le modèle digère mal. Figma recommande explicitement de travailler section par section, en s'appuyant au besoin sur la structure allégée pour repérer ce qu'il faut détailler.

Modifier du code existant reste délicat. L'IA excelle à générer un composant neuf, beaucoup moins à retoucher chirurgicalement un composant déjà en place quand le design évolue. On se retrouve souvent à régénérer plutôt qu'à ajuster.

La logique métier ne survit pas au retour vers Figma. Quand vous renvoyez une interface codée vers le canvas, vous obtenez des calques, pas des comportements. Les gestionnaires d'événements et la logique applicative disparaissent. Considérez ce flux comme un aller avec des retours ponctuels, pas comme une synchronisation permanente.

La qualité dépend de celle du fichier Figma. C'est la limite la plus honnête : un fichier mal structuré produit du code mal structuré. L'IA ne devine pas votre intention derrière un empilement de calques sans nom.

Les accès méritent de la rigueur. Une autorisation d'accès à Figma ouvre la porte à l'ensemble des fichiers auxquels votre compte a accès. Vérifiez avec quel compte vous authentifiez la connexion, surtout si vous travaillez sur des fichiers clients.

Quand ça ne marche pas

Le serveur n'apparaît pas. Redémarrez complètement le client : les connexions MCP s'initialisent au lancement. C'est la cause la plus fréquente, et de loin.

L'authentification échoue. Relancez le processus depuis /mcp et vérifiez surtout que le compte Figma utilisé a bien accès aux fichiers concernés — l'erreur vient souvent d'un second compte personnel connecté par défaut dans le navigateur.

Le serveur local ne répond pas. Vérifiez que l'application Figma Desktop est ouverte, qu'un fichier est ouvert, que le serveur est bien activé dans le panneau Dev Mode, et que l'adresse configurée se termine par /mcp.

Le rendu est approximatif. Réduisez la taille de la sélection et précisez la technologie attendue. Si le problème persiste sur des composants récurrents, c'est le signe qu'il faut configurer Code Connect.

Ce que ça change concrètement pour une entreprise

Si vous faites réaliser votre site, cette intégration ne vous concerne pas directement — mais elle concerne votre budget et vos délais. Le temps que votre prestataire passait à recopier des valeurs depuis une maquette est en grande partie absorbé, et ce temps peut être réinvesti ailleurs : dans la stratégie, les contenus, les tests, le référencement. C'est à cette condition que le gain vous revient plutôt que de disparaître dans la marge.

Ce que cela ne change pas, en revanche, mérite d'être dit clairement : la qualité d'un site continue de se jouer sur le travail en amont. Une maquette bien pensée génère du bon code ; une maquette bâclée génère du mauvais code, simplement plus vite. L'IA déplace l'effort vers la conception, elle ne le supprime pas. C'est d'ailleurs un bon critère pour juger un prestataire aujourd'hui : s'il vous promet un site deux fois moins cher parce qu'il utilise l'IA, demandez-lui ce qu'il fait du temps gagné. C'est l'équilibre que nous cherchons sur chaque projet de création ou de refonte de site internet.

Questions fréquentes

Faut-il un abonnement Figma payant ?

Le serveur distant est accessible aux comptes Figma, sans application de bureau. Certaines fonctions tiennent au type de siège dont vous disposez : la création ou la modification de fichiers suppose les droits d'édition correspondants. Pour de la lecture et de la génération de code, un compte standard suffit généralement.

Claude ou Claude Code : lequel choisir ?

L'application Claude si vous travaillez en conversation, sur le fichier Figma lui-même : mise au propre, variables, diagrammes, exports. Claude Code si le résultat doit atterrir dans une base de code. Rien n'empêche d'utiliser les deux selon le moment du projet.

Est-ce que ça remplace un designer ?

Non, et l'usage réel montre plutôt l'inverse : l'outil est d'autant plus efficace que le fichier est bien conçu, donc qu'un designer a fait son travail en amont. Il remplace du temps de production répétitif, pas le jugement qui décide de ce qu'il faut produire.

Peut-on générer un site WordPress directement depuis Figma ?

Pas directement, et c'est une confusion fréquente. Le serveur produit du code front-end à partir de vos maquettes ; l'intégration dans un environnement comme WordPress et un constructeur de pages reste un travail à part entière. En revanche, récupérer les variables, les espacements et les exports d'un design pour les reproduire fidèlement dans votre constructeur fait gagner un temps considérable.

Mes fichiers clients sont-ils exposés ?

La connexion donne accès aux fichiers auxquels le compte authentifié a accès. C'est un point de vigilance réel en agence : utilisez le compte approprié, et sachez que le serveur local existe précisément pour les organisations qui veulent garder le traitement sur leur poste.

Peut-on faire l'inverse, envoyer du code vers Figma ?

Oui, c'est l'une des évolutions majeures du serveur. Vous pouvez capturer l'interface en ligne d'un site et la renvoyer dans Figma sous forme de calques éditables, ou faire créer et modifier directement des frames, composants et variables dans un fichier.

Que se passe-t-il si Figma change son serveur ?

C'est un vrai sujet : le serveur évolue vite, et plusieurs tutoriels en ligne décrivent déjà une configuration obsolète. Si une commande trouvée ailleurs ne fonctionne pas, la documentation développeur de Figma reste la seule source à jour.

Conclusion : un pont, pas un pilote automatique

Connecter Claude à Figma supprime la partie la plus ingrate du travail web : la traduction manuelle entre ce qui a été dessiné et ce qui est construit. Dans les deux sens, désormais. Pour une agence, le gain ne se mesure pas en lignes de code générées, mais en heures rendues disponibles pour ce qui compte vraiment — la stratégie, la direction artistique, la conversion.

C'est pour cela que nous continuons de coder nos pages d'accueil à la main tout en confiant à l'IA la mise au propre, les déclinaisons et la maintenance du design system. L'outil est excellent là où le travail est cadré. Le reste, c'est encore notre métier — celui que nous exerçons au quotidien chez Gokuu, agence de communication à Saint-Étienne.