Si vous avez trouvé cet article en recherchant « figma mcp server not connecting » ou « where is the MCP toggle in Figma », vous êtes au bon endroit. La plupart des premières tentatives de configuration du serveur MCP de Figma échouent pour les deux mêmes raisons : des prérequis manquants et l’étape d’authentification ignorée après la configuration. Le bouton que vous cherchez n’apparaît peut-être même pas encore, et cela n’a rien à voir avec l’outil que vous utilisez.
Configurer correctement le serveur MCP de Figma, à distance ou sur poste local, exige un ordre précis et quelques prérequis peu évidents que la plupart des guides de configuration omettent complètement. C’est pourquoi tant de premières tentatives échouent.
Le bouton n’apparaîtra pas avant d’avoir lu ceci
- Commencez par le serveur MCP distant : il fonctionne avec toutes les formules et évite l’exigence de l’application de bureau.
- Le blocage le plus courant : le Dev Mode est payant, et l’authentification du serveur MCP distant doit être terminée dans le navigateur avant que quoi que ce soit puisse se connecter.
- Les comptes Figma gratuits ne peuvent pas accéder du tout aux fonctionnalités du serveur MCP en Dev Mode : c’est le prérequis que la plupart des guides cachent ou ignorent.
Ce que le serveur MCP de Figma apporte réellement à votre workflow
Le serveur MCP de Figma est une implémentation du Model Context Protocol, une norme ouverte qui permet aux clients d’IA d’exploiter un contexte structuré provenant d’outils externes. Concrètement, il intègre Figma directement dans le workflow de développement en donnant aux outils de programmation IA compatibles MCP un accès structuré à vos fichiers de conception : pas des captures d’écran, pas des exports, mais de véritables arborescences de composants, des tokens de design, des contraintes de mise en page et des données de variantes.
Sans lui, un assistant de programmation IA devine à partir de ce que vous lui collez. Avec lui, l’outil peut voir le véritable contexte de conception et aider les LLM à générer du code tenant compte du design et reflétant votre véritable système de conception. C’est là toute la différence. Entre « générer un composant React » et « implémenter cette frame sous forme de composant React en utilisant les tokens et la mise en page que je peux lire maintenant », il y a la différence entre du code qui nécessite trois cycles de révision et du code qui fonctionne globalement dès le premier passage. Don't Panic Labs a clairement documenté ce changement : le passage des approximations à un contexte structuré est la véritable évolution apportée par MCP dans le transfert du design vers le code.
Ce dont vous avez besoin avant de pouvoir connecter le serveur MCP de Figma
Avant de toucher à un fichier de configuration, vérifiez tous ces éléments. En oublier un vous coûtera 45 minutes à déboguer quelque chose qui n’est pas réellement cassé.
Une formule Figma payante éligible pour les fonctionnalités de bureau et du Dev Mode
Les utilisateurs de Figma avec une formule gratuite ne peuvent pas accéder au Dev Mode, ce qui signifie que l’option de serveur MCP de bureau est tout simplement indisponible. Si vous utilisez une formule gratuite et souhaitez connecter Figma à un outil d’IA, le serveur distant est votre seule option.
L’application de bureau Figma, installée et à jour, pour le serveur local
Le serveur MCP de bureau s’exécute depuis l’application de bureau Figma. Si vous utilisez uniquement la version navigateur, le bouton du serveur local n’existe pas pour vous. Téléchargez et mettez d’abord à jour Figma Desktop.
Un client MCP compatible pour le serveur distant
Tous les outils de programmation IA ne prennent pas en charge le Model Context Protocol. Ceux qui le prennent en charge sont notamment Claude Code, Cursor, VS Code avec GitHub Copilot activé et Codex. Si vos outils de programmation actuels ne figurent pas dans cette liste, le serveur n’a rien à quoi se connecter.
Les autorisations de votre compte Figma pour accéder au fichier Figma cible
L’étape d’authentification OAuth échouera silencieusement si votre compte ne dispose pas au minimum d’un accès en lecture au fichier que vous essayez de référencer. Vérifiez les autorisations du fichier avant de déboguer la connexion.
GitHub Copilot activé dans VS Code avant d’ajouter Figma MCP
Cette condition surprend souvent. Le développeur doit avoir Copilot actif, et pas seulement installé, pour que le serveur MCP de Figma fonctionne dans VS Code. La connexion semble réussir, mais les appels d’outils ne renvoient rien.
Comment activer le Dev Mode et le serveur MCP dans Figma
L’ordre des étapes compte ici davantage que ne le laissent entendre la plupart des guides. Le bouton du serveur MCP dans Figma ne se trouve pas dans le menu principal des paramètres. Il apparaît uniquement dans un fichier activement ouvert en Dev Mode, et seulement après avoir basculé ce fichier en Dev Mode. Ce cas revient sans cesse : quelqu’un ouvre les préférences de Figma à la recherche d’une section MCP, ne trouve rien, conclut que la fonctionnalité n’est pas disponible dans sa formule et ouvre un ticket. En général, le fichier n’est tout simplement pas encore en Dev Mode.
Voici le bon ordre :
Étape 1 : ouvrez le fichier Figma cible. Accédez au fichier contenant vos designs, celui à partir duquel votre développeur travaillera.
Étape 2 : passez en Dev Mode. Dans la barre d’outils en haut à droite, recherchez le bouton permettant de basculer entre le Design Mode et le Dev Mode. Cliquez dessus. L’interface change : vous verrez des panneaux orientés code, des outils d’annotation et des métadonnées destinées aux développeurs. Si le bouton n’est pas présent, votre compte ou votre formule ne donne pas accès au Dev Mode. C’est là que se trouve la limitation payante. Il n’existe pas de contournement pour l’option de bureau.
Étape 3 : trouvez le bouton du serveur MCP. Maintenant que vous êtes en Dev Mode, regardez dans les paramètres du panneau ou dans la section des outils de développement. Le serveur MCP de Figma propose un bouton spécifiquement dédié à l’activation du point de terminaison MCP : il ne devient visible qu’une fois le Dev Mode actif sur le fichier. Activez-le.
L’emplacement de ce bouton n’est pas évident. Il n’apparaît pas dans les paramètres du compte, les menus d’extensions ni ailleurs là où les utilisateurs s’attendent à trouver une configuration serveur. Figma l’a placé dans la vue de fichier du Dev Mode, car le serveur MCP est associé à un contenu spécifique dans Figma, et non à l’ensemble de votre compte. C’est en réalité une décision de conception raisonnable. Elle ne correspond simplement pas à l’endroit où les utilisateurs le cherchent la première fois que leurs outils de programmation en ont besoin.
Activation du serveur MCP de bureau et copie de l’URL du serveur local
Une fois le bouton activé dans le Dev Mode, l’application de bureau Figma génère une URL de serveur local. Elle ressemble à http://127.0.0.1:[port], avec un numéro de port spécifique attribué au moment de l’exécution. Vous devez copier cette URL et la coller dans la configuration MCP de votre éditeur de code.
C’est l’étape souvent ignorée. Le serveur MCP de bureau démarre, tout semble fonctionner correctement dans Figma, puis rien ne se connecte dans l’IDE. La raison : votre configuration de serveur MCP dans l’IDE ne sait toujours pas où chercher. Copiez l’URL complète du serveur local depuis le panneau Dev Mode de l’application de bureau Figma, ouvrez la configuration de votre éditeur et collez-la comme point de terminaison du serveur. Sans cela, vous n’êtes connecté au MCP de Figma qu’en théorie. L’outil de programmation et Figma fonctionnent dans des univers séparés.
Configuration du serveur MCP distant : le chemin recommandé
Pour la plupart des configurations, commencez ici. Le serveur distant disponible à l’adresse https://mcp.figma.com/mcp est la méthode recommandée par Figma, car elle ne requiert pas l’application de bureau Figma, fonctionne depuis tout client compatible MCP et est disponible avec davantage de types de formules que l’option de bureau et du Dev Mode.
Le principe général pour l’ajouter est le suivant : dans votre outil compatible MCP, ajoutez une nouvelle entrée de serveur MCP pointant vers https://mcp.figma.com/mcp. La façon de procéder dépend de l’outil : Claude Code, Cursor, VS Code et Codex possèdent chacun des interfaces légèrement différentes, présentées ci-dessous. Mais le principe est identique pour tous : ajoutez l’URL, déclenchez l’authentification, terminez-la dans le navigateur.
Cette dernière étape n’est pas facultative. Ajouter l’URL n’est pas la même chose que connecter le serveur. L’authentification est une étape obligatoire distincte qui se déroule dans une fenêtre de navigateur après la configuration. Dans Claude Code, par exemple, exécutez /mcp après avoir ajouté le serveur afin de confirmer l’état de la connexion. Si le serveur MCP de Figma est répertorié sans erreur d’authentification, vous êtes connecté. S’il apparaît avec un statut déconnecté ou en attente, l’authentification dans le navigateur n’est pas encore terminée.
Pour les outils agentiques tels que Claude Code, l’agent IA utilise Figma comme un outil qu’il peut appeler pendant une session. Une fois connecté et authentifié, il peut voir le serveur MCP de Figma dans sa liste d’outils disponibles et interroger directement le contexte de conception. Les nouvelles entrées de serveur MCP apparaissent dans le panneau d’outils immédiatement après une authentification réussie. L’absence d’authentification est le principal mode d’échec ici, et c’est celui que la plupart des guides traitent comme une simple case à cocher plutôt que comme une étape séquentielle obligatoire.
🤔 Attendez.
Ajouter l’URL du serveur à votre configuration ne signifie pas que le serveur est connecté. L’authentification doit être terminée dans le navigateur au cours de la même session : le serveur MCP de Figma reste déconnecté jusqu’à l’approbation OAuth, quelle que soit la qualité de saisie de l’URL. La configuration et la connexion sont deux choses différentes. La plupart des échecs lors de la première tentative se situent dans l’écart entre les deux.
Configuration de Cursor, VS Code et Codex pour utiliser le serveur MCP de Figma
Chaque outil de programmation IA suit un parcours de configuration légèrement différent. L’exigence d’authentification est identique pour les trois : ce qui change, c’est l’endroit où vous ajoutez le serveur et l’apparence de l’interface. Considérez le « client MCP » comme le cadre général : tout outil qui parle le Model Context Protocol peut se connecter, mais chaque client de votre environnement de développement a son propre rituel de configuration. Les outils alimentés par l’IA qui ne prennent pas nativement en charge MCP ne se connecteront pas, quelle que soit votre configuration.
Ajout du serveur MCP de Figma dans Cursor
Dans Cursor, la méthode la plus rapide passe par l’extension. Saisissez /add-plugin figma dans la barre de commandes ou utilisez le lien profond direct de la documentation de l’outil MCP de Figma. L’une ou l’autre méthode configure automatiquement le serveur MCP et enregistre le catalogue de compétences d’agent MCP de Figma, afin que les agents IA puissent interagir directement avec le contexte de conception Figma depuis l’éditeur. Vous n’avez pas besoin de modifier manuellement un fichier de configuration dans cette approche.
Point important : l’authentification reste requise après l’installation de l’extension. L’extension configure le côté client. Le côté Figma nécessite toujours une approbation OAuth. Ne supposez pas que l’installation de l’extension a terminé la connexion. Ce n’est pas le cas. Exécutez une requête de test et vérifiez qu’une invite d’authentification s’affiche dans le navigateur avant de considérer l’opération comme terminée.
Configuration du serveur MCP de Figma dans VS Code
Le Model Context Protocol est une norme ouverte, et l’implémentation de VS Code utilise un fichier de configuration JSON pour enregistrer les serveurs. Ouvrez la palette de commandes et exécutez MCP: Open User Configuration pour accéder à mcp.json. Ajoutez une entrée pour Figma en utilisant l’URL HTTPS distante comme adresse du serveur. Enregistrez le fichier, puis cliquez sur Start dans le panneau MCP. VS Code vous invitera à approuver l’accès dans une fenêtre de navigateur : acceptez-la.
Une exigence peu évidente : GitHub Copilot doit être activé avant que le serveur MCP de Figma puisse fonctionner dans VS Code. L’interface standardisée fournie par le Model Context Protocol nécessite Copilot comme couche cliente. Sans Copilot actif, l’entrée du serveur apparaît dans la configuration, mais les outils de programmation ne l’appellent jamais réellement. C’est l’une de ces situations où une norme ouverte est bien « prise en charge », mais ne fonctionne pas réellement tant que les prérequis n’ont pas été vérifiés.
Connexion de Figma MCP dans Codex
Dans Codex, utilisez l’interface Plugins ou la méthode CLI : codex mcp add figma --url https://mcp.figma.com/mcp. Cette commande enregistre le serveur et expose Figma comme un outil sur lequel les agents peuvent construire des requêtes. Les outils de Figma apparaissent dans l’interface de discussion uniquement une fois l’authentification terminée, selon la même étape OAuth dans le navigateur exigée par tous les autres clients. Si vous saisissez une invite liée au design immédiatement après avoir exécuté la commande d’ajout et n’obtenez aucune réponse utile, vérifiez d’abord l’authentification avant de supposer que la commande a échoué.
Comment cadrer vos prompts avec les URL de nœuds Figma pour une meilleure génération de code
C’est à ce stade que la plupart des personnes ayant connecté le serveur avec succès obtiennent encore des résultats médiocres. Le serveur MCP de Figma peut lire l’intégralité de vos fichiers de conception Figma. Cela ne signifie pas que vous devez le lui demander. Donner l’URL d’un fichier entier à un outil d’IA revient à tendre à quelqu’un un document de 200 pages et à lui demander « d’implémenter le truc ». Le code généré reflète ce que le LLM peut réellement analyser : un fichier complet saturera soit la fenêtre de contexte, soit produira une sortie générique qui ignore la frame précise qui vous intéresse.
La bonne approche : faites un clic droit sur la frame, le composant ou le calque spécifique que vous souhaitez implémenter, sélectionnez « Copy link to selection » ou récupérez l’URL dans la barre d’adresse du navigateur avec l’ID de nœud ajouté, puis collez cette URL de frame Figma spécifique dans votre prompt. L’URL du nœud indique exactement à l’outil connecté à MCP quelle partie du composant ou de la mise en page Figma lire. La génération de code qui en résulte reflète les véritables contraintes de mise en page, tokens de design et hiérarchie de composants pour ce nœud précis, et non une moyenne statistique de tout le fichier.
Pour trouver l’ID du nœud : dans Figma, cliquez sur une frame ou un calque. L’URL du navigateur se met à jour pour inclure un paramètre node-id. Copiez l’URL entière. C’est votre référence ciblée. Dans l’application de bureau Figma, faites un clic droit sur n’importe quel élément sélectionné et choisissez « Copy link to selection ». Le résultat est le même.
Lorsque vous rédigez des prompts de code de cette manière, incluez directement l’URL dans le texte du prompt. L’outil d’IA appellera le serveur MCP avec cette référence de nœud spécifique et écrira du code à partir de ce qu’il voit réellement.
📊 En pratique :
Un prompt tel que « Implémentez le design à l’adresse [URL Figma spécifique au nœud] sous forme de composant React en utilisant les tokens de notre système de conception » génère du code qui reflète les véritables valeurs d’espacement, tokens de police et structure des composants. Un prompt tel que « Générez un composant React pour une carte » produit ce que le modèle estime être l’apparence d’une carte. La seule différence est l’URL. La génération de code correspondant à votre design dépend presque entièrement de cette unique décision de cadrage.
C’est toute l’astuce. Ciblez le nœud, pas le fichier.
Comment vérifier que le serveur MCP de Figma fonctionne réellement
Un serveur connecté et un serveur fonctionnel ne sont pas la même chose. Voici à quoi ressemble réellement un serveur « fonctionnel », afin que vous n’ayez pas à deviner.
Vérification 1 : le client MCP répertorie « figma » sans erreur d’authentification. Dans Claude Code, exécutez /mcp. Dans VS Code, ouvrez le panneau MCP. Dans Cursor, vérifiez l’état de l’extension dans la barre latérale. Le serveur MCP expose une liste d’outils au client : si les outils Figma apparaissent sans statut déconnecté ni erreur, la connexion est active. Si la liste affiche un avertissement d’authentification ou un statut grisé, retournez dans le navigateur et terminez OAuth avant toute autre chose.
Vérification 2 : exécutez une requête de test avec une URL de nœud. Collez l’URL d’une frame Figma spécifique dans un prompt et demandez à l’agent IA de décrire la mise en page. S’il renvoie un véritable contexte de conception — valeurs d’espacement, noms de composants, références de tokens, syntaxe des couleurs — l’intégration lit les données réelles du fichier Figma. S’il fournit une description générique ou indique qu’il n’arrive pas à accéder au fichier, un élément de la chaîne d’authentification ou d’autorisations est encore défaillant.
Vérification 3 : le code généré reflète le véritable système de conception. Le code généré doit référencer les composants réels, les véritables tokens de design et la structure de mise en page de votre design Figma. Si le résultat aurait pu être généré sans aucun contexte Figma, le serveur MCP n’est pas appelé. C’est le test le plus utile dans le workflow de développement pour aider les LLM à produire un code tenant compte du design : la sortie du code change-t-elle lorsque vous ciblez une autre frame dans le prompt ? Si oui, MCP fonctionne. Si la sortie est identique quelle que soit l’URL de frame fournie, l’outil ne lit pas le contexte.
Pour les configurations de bureau : Figma affiche une confirmation « server enabled and running » dans le panneau Dev Mode. Recherchez-la avant de tester depuis l’éditeur. S’il indique que le serveur est en cours d’exécution mais que l’éditeur ne peut pas se connecter, vérifiez que vous avez copié et collé l’URL du serveur local dans la configuration de l’éditeur, et non l’URL distante mcp.figma.com.
[Le changelog de GitHub sur Figma MCP indique également qu’avec VS Code et Copilot, vous pouvez créer et modifier du contenu Figma natif directement depuis l’éditeur, en renvoyant une interface rendue sous forme de frame modifiable. Si cette boucle bidirectionnelle est votre objectif, elle est désormais bien réelle, et la même connexion que vous venez de configurer la prend en charge.]
Un modèle d’usage mérite d’être connu : si vous construisez des pipelines design-vers-code plus complexes et en plusieurs étapes — ceux où le code est révisé, envoyé vers un dépôt et contrôlé par rapport au système de conception selon une planification — un outil comme Latenode peut s’intégrer autour de la connexion MCP et orchestrer ce qui se passe après la génération du code. AI Agent Builder de Latenode peut coordonner un agent « lecteur » qui interroge le contexte Figma et un agent « rédacteur » qui produit le code, avec un nœud JavaScript qui post-traite la sortie pour appliquer les conventions de nommage avant que quoi que ce soit n’arrive dans la base de code. La tarification par exécution signifie qu’un workflow en 6 étapes de ce type compte comme une seule exécution, et non six. C’est utile à savoir si vous avez dépassé l’étape de la configuration individuelle et passez à l’automatisation à l’échelle d’une équipe.
