MCP de Figma : ce qu’il fait et comment le configurer

Figma MCP est un connecteur qui permet à un assistant AI de lire directement vos fichiers Figma : cadres, couches, composants, espacements, styles de couleur et texte, au lieu de deviner à partir d’une capture d’écran que vous avez collée. Il repose sur MCP, le Model Context Protocol, une norme ouverte publiée par Anthropic pour que les assistants puissent communiquer avec des outils externes via une interface commune. Figma fournit un serveur officiel, et la communauté en a créé plusieurs autres. La configuration consiste à ajouter un petit bloc de configuration à votre client AI et à autoriser l’accès à votre compte Figma, ce qui prend entre dix minutes et une après-midi selon votre aisance à modifier des fichiers de configuration. Si cette phrase ressemble déjà à une après-midi pénible, une solution plus simple vous attend plus bas sur cette page.

Qu’est-ce que Figma MCP, au juste ?

MCP est une norme, pas un produit. Elle définit la manière dont un assistant AI demande des informations à un système externe et la manière dont ce système lui répond. Tout ce qui la prend en charge est appelé serveur MCP, et un serveur n’est en réalité qu’un adaptateur : d’un côté, il communique avec Figma, et de l’autre, avec Claude dans un format que Claude comprend déjà.

Ainsi, « Figma MCP » désigne en raccourci un serveur qui s’interpose entre votre assistant et vos fichiers de design. Une fois qu’il fonctionne, Claude ne travaille plus à partir d’une simple image et commence à exploiter la structure. Il peut voir que le bouton est une instance de composant, que l’espacement intérieur est de 16 et non de 15, et que le style de texte s’appelle corps/normal plutôt que « le plus petit élément gris ».

Il existe un serveur officiel de Figma destiné aux flux de travail design-to-code, ainsi que des implémentations communautaires qui lisent les fichiers via l’API publique de Figma. Elles diffèrent par leur mode d’authentification et par la quantité d’informations du fichier qu’elles exposent, mais, du côté de Claude, elles se présentent toutes de la même manière : une liste d’outils qu’il peut appeler lorsque votre demande l’exige. Si vous souhaitez d’abord en savoir plus sur le contexte général, nous avons rédigé une explication en langage clair sur ce qu’est MCP et pourquoi il existe.

Que permet réellement Figma MCP à Claude ?

Ce qui est intéressant, ce n’est pas que « Claude puisse voir votre fichier ». C’est l’ensemble des tâches qui cessent d’être manuelles.

• Transformez un cadre sélectionné en code front-end fidèle au fichier. Pas une approximation grossière à partir d’une image, mais des espacements, une hiérarchie et des noms de composants tirés directement du design. Vous le révisez toujours. Vous cessez de retaper les valeurs.
• Extrayez les tokens de design d’un fichier. Styles de couleur, échelle typographique, niveaux d’espacement, rayons d’angle, exportés en variables dans le format utilisé par votre base de code.
• Auditez un fichier à l’aide de son propre système. Quelles couches utilisent une valeur hexadécimale codée en dur plutôt qu’un style, quels cadres utilisent des valeurs d’espacement qui n’existent nulle part ailleurs, quels composants ont été détachés puis discrètement modifiés.
• Rédigez les notes et spécifications de handoff. Les états, les cas limites, les états vides, ce qui se passe en cas d’erreur, décrits à partir des frames réels plutôt que de mémoire.
• Relisez les textes UX dans leur contexte. Chaque chaîne d’un parcours, dans l’ordre, pour repérer les trois mots différents utilisés pour la même action.
• Répondez aux questions sur un fichier volumineux. Où ce composant est-il utilisé, qu’est-ce qui a changé dans cette branche, quels écrans font encore référence à l’ancien logo ?

Le principe commun à tous ces serveurs : Figma MCP supprime l’étape du copier-coller entre la conception et tout ce qui suit. C’est réellement utile, et c’est aussi l’intégralité de l’avantage. Il ne prend pas les décisions de conception.

Comment configurer un serveur MCP Figma ?

Les détails varient selon le serveur et le client, et tous deux changent assez souvent pour qu’une commande copiée depuis un article de blog soit un bon moyen de perdre vingt minutes. La structure du processus reste stable : apprenez-en le fonctionnement.

1. Choisissez un serveur. Commencez par celui de Figma si votre objectif est de convertir une conception en code dans un éditeur. Consultez les serveurs communautaires si vous avez besoin d’accéder en lecture aux fichiers via l’API sans que l’application de bureau soit ouverte. Les deux sont répertoriés dans les annuaires publics de serveurs MCP.
2. Réglez les autorisations. Les outils officiels utilisent généralement votre session Figma déjà ouverte, avec un réglage à activer dans l’application. Les serveurs communautaires demandent habituellement un jeton d’accès personnel que vous générez dans les paramètres de votre compte Figma. Traitez ce jeton comme un mot de passe : il peut lire tout ce que vous pouvez lire.
3. Ajoutez le serveur à la configuration MCP de votre client. Claude Desktop, Claude Code et la plupart des éditeurs compatibles avec AI lisent tous un fichier de configuration qui répertorie les serveurs que vous souhaitez rendre disponibles, avec la commande permettant de lancer chacun d’eux et les identifiants dont il a besoin. Vous ajoutez une entrée.
4. Redémarrez le client. Presque tous les signalements du type « ça ne fonctionne pas » concernent un client qui n’a jamais été redémarré après la modification de la configuration.
5. Vérifiez la connexion. Votre client affichera les serveurs connectés et les outils proposés par chacun. Si la liste des outils est visible, la connexion est établie.
6. Donnez-lui quelque chose à examiner. La plupart des workflows vous demandent de sélectionner un frame dans Figma ou d’y coller un lien, puis de poser votre question. Claude ne lit que ce que vous lui indiquez.

Deux choses posent problème lors de la première tentative. Les serveurs qui fonctionnent via l’application de bureau Figma nécessitent que l’application soit ouverte et que le fichier soit chargé : rien ne se passera donc si vous l’avez fermée. Et la plupart des serveurs sont principalement axés sur la lecture : ils sont bien plus efficaces pour vous dire ce que contient un fichier que pour le modifier.

Quelles sont les véritables limites de Figma MCP ?

Bon à savoir avant d’y passer l’après-midi.

• Vous avez besoin d’un client compatible avec MCP. Il peut s’agir d’une application de bureau, d’un éditeur ou d’un terminal. Une fenêtre de chat dans un navigateur avec une offre gratuite ne suffira pas.
• L'accès est en pratique tout ou rien. Un token personnel permet généralement d'atteindre tous les fichiers auxquels votre compte peut accéder. Si votre compte se trouve dans une organisation partagée, réfléchissez-y avant d'en générer un.
• Tout se casse quand les choses changent. Les API évoluent, les serveurs sont réécrits, une mise à jour du client modifie le format de configuration. Tout ce que vous construisez par-dessus cela nécessite une maintenance occasionnelle.
• Les fichiers volumineux consomment le contexte. Un écran de 400 calques produit beaucoup de données structurées. Pointer vers un seul frame fonctionne bien. Pointer vers un fichier entier, souvent pas.
• Les fichiers désordonnés produisent des résultats désordonnés. Si vos calques s'appellent Frame 217 et que la moitié des styles sont détachés, le code généré en hérite. Le connecteur lit ce qui est là, il ne met rien en ordre.
• Il donne accès, pas du discernement. Claude peut désormais voir votre design. Qu'il évalue ce design comme un designer senior est une question complètement distincte, et c'est celle qu'il vaut la peine de résoudre ensuite.

Et si MCP demandait plus de configuration que vous ne le souhaitez ?

Voici la distinction qui permet de gagner beaucoup de temps. MCP contrôle ce à quoi Claude peut accéder. Il ne dit rien sur la qualité du travail de Claude une fois qu'il y est. Ce sont deux problèmes différents, et la plupart des équipes de design sont confrontées au second, pas au premier.

Si ce que vous voulez vraiment, c'est que Claude vous donne une véritable critique de design, un plan de recherche ou une API de composants qu'un architecte de systèmes de design approuverait, vous n'avez pas besoin d'un connecteur. Vous avez besoin que Claude travaille comme ce spécialiste. C'est ce que fait un fichier Skill : un court document Markdown que vous téléchargez une fois et qui donne à Claude un rôle, une méthode et une norme de résultat. L'installation prend environ trois minutes et fonctionne avec tous les forfaits, avec ou sans MCP. Plusieurs des Skills de design ci-dessous sont actuellement gratuits, vous pouvez donc tester l'idée avant de dépenser quoi que ce soit.

Le designer, pas le connecteur

Denholm - Skill AI de conception produit UX/UI

Gratuit

cette skill

Flux, états, hiérarchie et logique d'interaction, évalués comme le ferait un product designer : à quoi sert l'écran, ce qui manque, ce que fait l'utilisateur quand quelque chose tourne mal. Collez un écran ou décrivez-le, aucun connecteur n'est nécessaire.

Voir Denholm →

L'association qui fonctionne le mieux en pratique : MCP pour la lecture, un Skill pour la réflexion. Claude extrait les valeurs réelles de votre fichier, puis leur applique une méthode au lieu d'improviser.

Pour la partie tokens et composants

Vashti - Skill AI d'architecture des systèmes de design

$29

cette skill

Nommage des tokens, API de composants, structure des variantes et règles déterminant quand un élément mérite sa place dans le système. C'est exactement la couche de jugement qui s'ajoute aux données brutes transmises par un connecteur Figma.

Voir Vashti →

Avant de concevoir quoi que ce soit

Melisande - Skill AI de recherche UX

Gratuit

cette skill

Plans de recherche, scripts d'entretien non directifs et méthode pour transformer des transcriptions en enseignements exploitables par une équipe. Également à 29 $, ce qui en fait un moyen peu coûteux de vérifier si les skills modifient réellement vos résultats.

Voir Melisande →

La collection gratuite comprend au total 32 skills gratuites, et l'ensemble de design plus large se trouve dans les skills créatives, de contenu et de design. Si vous souhaitez suivre l'installation étape par étape, consultez comment installer une skill Claude.

Questions fréquentes sur Figma MCP

Figma MCP est-il gratuit ?

Le protocole est une norme ouverte et les serveurs eux-mêmes sont généralement gratuits à installer. Vous avez besoin d'un compte Figma avec accès aux fichiers, ainsi que d'un client AI compatible avec MCP. Certains clients AI exigent une offre payante pour les fonctionnalités qui rendent cette solution intéressante ; le coût se situe donc de ce côté plutôt que du côté du connecteur.

Claude peut-il modifier mon fichier Figma via MCP ?

Partez du principe que non, sauf indication contraire du serveur spécifique que vous avez choisi. La plupart de ces connecteurs sont conçus pour la lecture : extraction de la structure, des valeurs et du contenu. L'accès en écriture est plus rare et plus fragile ; vous devriez le tester sur un fichier dupliqué plutôt que sur un fichier utilisé en production.

Figma MCP fonctionne-t-il avec Claude Code ?

Oui, dans le sens où Claude Code prend généralement en charge les serveurs MCP, ce qui explique précisément pourquoi cette association est populaire pour les projets de design-to-code. Le frame est lu d'un côté et le composant est écrit de l'autre, au cours de la même session. Il en va de même pour Claude Desktop et la plupart des éditeurs compatibles avec l'AI.

Ai-je toujours besoin d'une skill de design si Figma MCP est configuré ?

Elles répondent à des questions différentes. MCP détermine ce que Claude peut voir. Une skill détermine comment Claude travaille avec ce qu'il voit, c'est pourquoi les deux se complètent plutôt que de se concurrencer. Nous avons comparé directement les deux approches dans Claude Skills vs MCP.