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, calques, 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 permettre aux assistants de communiquer avec des outils externes via une interface commune. Figma propose 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 évoque déjà une après-midi désastreuse, 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 répond. Tout ce qui la prend en charge est appelé un serveur MCP, et un serveur n’est en réalité qu’un adaptateur : d’un côté, il communique avec Figma ; de l’autre, il parle à Claude dans un format que Claude comprend déjà.

Ainsi, « Figma MCP » désigne, en bref, 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 image plate, mais à partir d’une 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 body/regular plutôt que « le plus petit gris ».

Il existe un serveur officiel de Figma destiné aux workflows de 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 façon : une liste d’outils qu’il peut appeler lorsque votre demande le nécessite. Si vous souhaitez d’abord découvrir le contexte général, nous avons rédigé une explication de MCP en langage clair, ainsi que des raisons de son existence.

Que permet réellement Figma MCP à Claude ?

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

• Transformez un cadre sélectionné en code front-end qui correspond au fichier. Pas une approximation grossière à partir d’une image, mais des espacements, une hiérarchie et des noms de composants issus 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, paliers d’espacement, rayons d’angle, exportés sous forme de variables dans le format utilisé par votre base de code.
• Auditez un fichier à l’aune de son propre système. Quels calques 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 et discrètement modifiés.
• Rédigez des notes et des spécifications de transfert. Les états, les cas limites, les états vides et ce qui se passe en cas d’erreur, décrits à partir des cadres réels plutôt que de mémoire.
• Relisez les textes UX dans leur contexte. Chaque chaîne d’un flux, lue dans l’ordre, afin de 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 à toutes ces solutions : Figma MCP supprime l’étape du copier-coller entre le design et tout ce qui suit. C’est réellement utile, et c’est aussi tout l’avantage. Il ne prend pas de décisions de design.

Comment configurer un serveur MCP pour Figma ?

Les détails varient selon le serveur et le client, et tous deux changent suffisamment 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 principe.

1. Choisissez un serveur. Commencez par celui de Figma si votre objectif est de passer du design au 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 en cours d’exécution. Les deux types 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 active, 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 l’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 nécessaires. Il vous suffit d’ajouter 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 présente, la connexion est établie.
6. Donnez-lui quelque chose à examiner. La plupart des flux de travail vous demandent de sélectionner un cadre dans Figma ou d’y coller un lien, puis de poser votre question. Claude ne lit que ce que vous lui indiquez.

Deux points posent souvent 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 le fichier 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 limites réelles 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 suffit 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 appartient à une organisation partagée, réfléchissez-y avant d’en générer un.
• Tout se casse lorsque les éléments sont déplacés. Les API changent, les serveurs sont réécrits, une mise à jour du client modifie le format de configuration. Tout ce que vous construisez par-dessus nécessite une maintenance occasionnelle.
• Les fichiers volumineux consomment beaucoup de contexte. Un écran de 400 calques produit une grande quantité de données structurées. Pointer vers une seule frame fonctionne bien. Pointer vers un fichier entier, souvent beaucoup moins.
• Des 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éritera. Le connecteur lit ce qui existe, il ne range pas le fichier.
• Il donne accès, pas du discernement. Claude peut désormais voir votre design. La question de savoir s’il l’évalue comme un designer senior est totalement 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 fait 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 rencontrent le second, pas le premier.

Si ce que vous voulez vraiment, c’est que Claude vous fournisse une véritable critique de design, un plan de recherche ou une API de composant qu’un architecte de systèmes de design pourrait approuver, vous n’avez pas besoin de connecteur. Vous avez besoin que Claude travaille comme ce spécialiste. C’est ce que fait un fichier de Skill : un court document Markdown que vous téléversez une fois et qui donne à Claude un rôle, une méthode et une norme de rendu. 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 d’AI en design produit UX/UI

Gratuit

ce Skill

Flux, états, hiérarchie et logique d’interaction, analysés comme le ferait un designer produit : à quoi sert l’écran, ce qui manque et ce que fait l’utilisateur lorsque 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 vraies valeurs de votre fichier, puis leur applique une méthode au lieu d’improviser.

Pour la partie tokens et composants

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

$14.99

ce Skill

Nommage des tokens, API de composants, structure des variantes et règles déterminant ce qui 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 même de concevoir quoi que ce soit

Melisande - UX Researcher AI Skill

Gratuit

ce Skill

Plans de recherche, scripts d’entretien non directifs et méthode pour transformer les transcriptions en enseignements exploitables par une équipe. Également gratuit pour le moment, 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 compte au total 32 Skills gratuits, et l’ensemble design plus large se trouve dans les Skills créatifs, de contenu et de design. Si vous souhaitez suivre l’installation étape par étape, consultez comment installer un Skill Claude.

Figma MCP : questions fréquentes

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 ayant accès aux fichiers, ainsi que d’un client AI compatible avec MCP. Certains clients AI exigent un forfait payant 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 une copie du fichier 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 workflows de conversion du design en 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 pour la plupart des éditeurs compatibles avec l’AI.

Ai-je toujours besoin d’un Skill de design si Figma MCP est configuré ?

Elles répondent à des questions différentes. MCP détermine ce que Claude peut voir. Un Skill détermine la manière dont Claude travaille avec ce qu’il voit, c’est pourquoi les deux se complètent au lieu de se concurrencer. Nous avons comparé directement les deux approches dans Claude Skills vs MCP.