Configurez le serveur MCP Figma dans Claude Code avec le plugin ou une seule commande manuelle, authentifiez-vous en deux clics et découvrez les outils de lecture et d’écriture qu’il expose. Comprend les cinq skills, Code Connect, les limites de débit par siège et les solutions aux pannes courantes.
Collez un lien Figma dans Claude Code et il peut lire la mise en page, les espacements, les couleurs et les composants de la frame avant d’écrire la moindre ligne de code. C’est tout l’intérêt du serveur MCP Figma, et l’installation prend deux commandes et un clic dans le navigateur. Le reste consiste à choisir les bons outils, à rester dans les limites de débit et à donner à l’agent assez de contexte pour qu’il cesse d’inventer ses propres boutons.
Cet article détaille l’installation exacte, les outils exposés par le serveur, les skills que Figma fournit pour les flux de travail d’écriture, une routine frame vers code que vous pouvez reprendre telle quelle, et les limites qui piègent souvent les utilisateurs. Les informations proviennent de la documentation développeur de Figma telle qu’elle se présente en octobre 2026. Vérifiez ces pages si une commande ne ressemble pas à ce que vous voyez sur votre machine.
Le serveur MCP Figma fait office de pont. D’un côté se trouve votre fichier Figma : calques, variables, composants, tableaux FigJam et ressources Make. De l’autre, un client MCP, ici Claude Code. Entre les deux, un ensemble d’outils permet à l’agent de poser des questions sur un design et, avec les autorisations appropriées, de le modifier.
La documentation de Figma décrit cinq usages. Le serveur peut créer et modifier du contenu Figma natif sur le canevas, transformer les frames sélectionnées en code, extraire le contexte du design comme les variables, les composants et les données de mise en page, récupérer des ressources depuis les fichiers Make, et garder le code aligné sur votre système de design grâce à Code Connect.
Le vrai changement tient au passage des captures d’écran à la structure. Une capture d’écran indique à un modèle à quoi ressemble un bouton. Le contexte du design lui indique que ce bouton est une instance d’un composant, qu’il utilise une variable d’espacement nommée et qu’il se trouve dans une rangée en auto-layout avec un écart fixe. Le code écrit à partir de cette structure se rapproche bien plus de ce que vous pouvez fusionner.
Figma propose deux versions du serveur. Le choix compte, car certains outils n’existent que sur l’une des deux.
| Serveur distant | Serveur desktop | |
|---|---|---|
| Connexion | Point de terminaison hébergé par Figma, https://mcp.figma.com/mcp | Local, via l’application de bureau Figma |
| Application de bureau requise | Non | Oui |
| Sélection des outils | Ensemble le plus large, y compris tous les outils réservés au distant | Ensemble plus restreint |
| Idéal pour | La plupart des utilisateurs | Déploiements Figma for Government, configurations uniquement locales |
Figma présente le serveur distant comme le meilleur choix pour la plupart des utilisateurs, et c’est celui qu’utilise la suite de cet article.
Il vous faut un fichier Figma Design, Make ou FigJam, une autorisation d’affichage ou de modification sur ce fichier, et idéalement un siège Full ou Dev. Les autres types de sièges peuvent se connecter, mais avec un quota mensuel bien plus réduit (les chiffres figurent dans la section consacrée aux limites ci-dessous). Seuls les clients MCP répertoriés dans le catalogue MCP de Figma peuvent se connecter, et Claude Code dispose de sa propre page de configuration dans ce catalogue.
Il existe deux méthodes qui aboutissent au même résultat. Choisissez le plugin si vous voulez aussi les skills de Figma, et la commande manuelle si vous préférez une configuration minimale.
claude plugin install figma@claude-plugins-official
Figma recommande cette méthode. Le plugin regroupe les paramètres du serveur MCP et les Agent Skills pour les flux de travail courants. Une seule installation vous donne donc le serveur et les instructions qui permettent aux outils d’écriture de se comporter correctement.
claude mcp add --transport http figma https://mcp.figma.com/mcp
Sans option de portée, le serveur n’est enregistré que pour le projet dans lequel vous vous trouvez. Si vous voulez le rendre disponible partout, ajoutez --scope user :
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
La portée utilisateur vous évite de répéter l’installation pour chaque dépôt.
Le serveur utilise une connexion par navigateur, donc rien n’est collé dans un fichier de configuration.
/mcp.Authentication successful. Connected to figma.Exécutez /mcp une fois de plus pour vérifier que le serveur s’affiche comme connecté. Demandez ensuite à Claude d’appeler l’outil whoami. Il renvoie l’utilisateur authentifié et ses plans, ce qui vous indique immédiatement si votre siège dispose d’un quota utilisable.
💡 Astuce : Si des outils disparaissent en cours de session,
/mcpest le premier endroit où regarder. Il affiche l’état de la connexion et permet de vous réauthentifier sans modifier de fichiers.
La référence des outils de Figma en répertorie des dizaines. Vous en utiliserez quelques-uns au quotidien, alors commencez par ceux-là et ignorez le reste jusqu’à ce qu’une tâche en ait besoin.
| Outil | Ce qu’il fait | Distant uniquement |
|---|---|---|
get_design_context | Extrait le contexte du design pour un calque ou une sélection | Non |
get_metadata | Renvoie un plan XML épuré d’une sélection | Non |
get_screenshot | Capture une image d’écran d’une sélection | Non |
get_variable_defs | Récupère les variables et les styles utilisés dans une sélection | Non |
get_code_connect_map | Renvoie les correspondances entre ID de nœud et composants de code | Non |
get_code_connect_suggestions | Propose des correspondances composant vers code | Non |
get_context_for_code_connect | Fournit les métadonnées de composants pour les modèles | Oui |
search_design_system | Recherche des composants, variables et styles dans les bibliothèques | Oui |
get_libraries | Liste les bibliothèques de design auxquelles vous êtes abonné et celles qui sont disponibles | Oui |
get_figjam | Convertit les diagrammes FigJam en XML | Non |
get_motion_context | Extrait les données d’animation | Non |
download_assets | Télécharge les exports et les images sources d’origine | Oui |
Commencez par get_design_context. C’est l’outil principal derrière « construis cette frame ». Associez-le à get_screenshot pour que l’agent dispose d’une cible visuelle, et à get_variable_defs pour que les couleurs et les espacements viennent de vos tokens plutôt que de valeurs hexadécimales devinées. Quand une frame est très grande, get_metadata fournit un plan épuré qui vous permet de cartographier la page avant de récupérer le détail calque par calque.
| Outil | Ce qu’il fait | Distant uniquement |
|---|---|---|
use_figma | Outil polyvalent pour créer, modifier et inspecter | Oui |
generate_figma_design | Génère des calques de design à partir d’interfaces | Oui |
generate_diagram | Construit un diagramme FigJam à partir de Mermaid | Oui |
create_new_file | Crée un fichier Design, FigJam ou Slides vierge | Oui |
generate_image | Génère une image matricielle téléchargeable | Oui |
upload_assets | Importe des images dans un fichier Figma | Oui |
add_code_connect_map | Associe un ID de nœud Figma à un composant de code | Non |
send_code_connect_mappings | Confirme les correspondances de composants proposées | Non |
Le serveur fournit aussi des outils pour les shaders et les plugins génératifs, ainsi que six outils weave_* qui exécutent des flux de travail Weave facturés en crédits. La plupart des travaux front-end ne les utilisent jamais. Un prompt mérite d’être connu par son nom : create_design_system_rules, qui génère un fichier de règles afin que le contexte de l’agent corresponde à votre base de code.
Les outils d’écriture sont puissants et faciles à mal utiliser. La documentation de Figma répertorie des skills dont l’agent a besoin pour les flux de travail correspondants, et l’installation du plugin les apporte avec elle. Si vous avez choisi la méthode manuelle, installez séparément les skills de Figma pour votre client.
| Skill | Utilisé pour |
|---|---|
figma-use | Flux de travail Figma Design |
figma-use-figjam | Opérations FigJam |
figma-use-slides | Figma Slides |
figma-shaders | Création et mise à jour de shaders |
figma-generative-plugins | Création et mise à jour de plugins génératifs |
Si votre travail consiste surtout à lire des designs et à écrire du code, vous les remarquerez à peine. Ils comptent dès que vous demandez à Claude Code de construire ou de modifier quelque chose à l’intérieur de Figma.
Même avec des outils parfaits, l’agent ne connaît pas vos conventions. Lancez le prompt create_design_system_rules et laissez-le rédiger un fichier de règles, puis réduisez-le à ce que votre équipe applique réellement, et conservez-le dans CLAUDE.md. Voici un exemple court :
Figma to code rules:
- Reuse components from src/components/ui before creating new ones.
- Map Figma variables to our CSS tokens. Never hardcode hex values.
- Use the project spacing scale, not the pixel values from the frame.
- Treat Figma output as a reference. Match our file structure and naming.
Quatre lignes de ce type suppriment la plupart des plaintes du type « pourquoi a-t-il encore écrit un nouveau bouton ».
get_design_context, et généralement get_screenshot et get_variable_defs également.Un prompt qui fonctionne bien :
Implement this frame using our existing components and tokens.
Do not add new dependencies. Figma link: <paste link here>
Après le premier passage, vérifiez quatre points dans le diff avant d’exécuter quoi que ce soit :
💡 Astuce : Travaillez une section à la fois. Une frame de page entière produit une montagne de contexte et une montagne de code, et votre quota d’appels de lecture s’épuise plus vite que prévu.
Code Connect permet à Figma de savoir que son composant Button est en réalité src/components/ui/Button.tsx. Une fois cette correspondance créée, Claude importe le vrai composant au lieu d’écrire un balisage neuf.
Quatre outils gèrent la boucle. get_code_connect_map lit les correspondances existantes. get_code_connect_suggestions en propose de nouvelles, send_code_connect_mappings confirme celles que vous acceptez, et add_code_connect_map écrit directement une seule correspondance. Ce dernier est exempté des limites de débit, ce qui est pratique lorsque vous cartographiez une bibliothèque entière.
Ces chiffres proviennent de la page de Figma consacrée aux limites de débit et à l’accès, au moment de la rédaction. Figma peut les modifier, donc vérifiez-les sur la page avant de planifier un déploiement en équipe.
| Type de siège | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | Jusqu’à 20 par mois | Jusqu’à 20 par mois | Jusqu’à 20 par mois | Jusqu’à 20 par mois |
| Dev, Full | Jusqu’à 200 par jour, 10 par minute | Jusqu’à 200 par jour, 15 par minute | Jusqu’à 600 par jour, 20 par minute | Non précisé dans le tableau |
Les limites s’appliquent aux outils qui lisent des données dans Figma. add_code_connect_map, create_new_file et whoami en sont exemptés.
Le siège détermine l’expérience. Un designer sur un siège View peut se connecter et explorer, mais le flux de travail quotidien revient aux développeurs disposant d’un siège Full ou Dev. Si seules deux personnes de votre équipe détiennent ces sièges, faites-en celles qui génèrent le code, et demandez à tous les autres de relire les pull requests.
💡 Astuce : Si Claude appelle trois outils de lecture par frame, 200 appels par jour disparaissent très vite. Demandez une seule section, et laissez
get_metadatachoisir le bon calque avant de récupérer le contexte complet.
Les outils n’apparaissent pas. Exécutez /mcp. Si figma est listé mais non connecté, sélectionnez-le et authentifiez-vous à nouveau. S’il est totalement absent, relancez la commande d’installation et redémarrez Claude Code.
Le résultat ignore vos composants. Il s’agit d’un problème de contexte, pas d’un problème d’outil. Ajoutez le fichier de règles à CLAUDE.md, créez des correspondances Code Connect pour vos dix composants les plus utilisés, et demandez dans le prompt de réutiliser les composants existants avant d’en écrire de nouveaux.
Vous atteignez la limite en pleine tâche. Réduisez le périmètre, vérifiez votre siège avec whoami, et confiez les travaux lourds à un siège Full ou Dev. Un siège View ou Collab offre environ 20 appels par mois, ce qui sert à une démonstration, pas à un flux de travail.
La plupart des frames Figma contiennent des rectangles gris de remplacement à l’emplacement des photos, et le code généré en hérite de la fadeur. Remplissez-les avec des images d’apparence réelle avant la remise et la version paraîtra terminée dès le premier lancement.
Sur PicassoIA, le catalogue de texte vers image comprend Seedream 5 Pro, GPT Image 2, Flux 2 Pro, Nano Banana Pro et P Image. Générez une photo principale, puis placez-la dans la frame à la main ou demandez à Claude de l’intégrer avec upload_assets. Figma dispose de son propre outil generate_image, mais un modèle d’image dédié vous donne plus de contrôle sur l’objectif, la lumière et la composition.
Pour le mouvement, transformez la même image fixe en courte séquence avec un modèle vidéo comme Seedance 2.5 Lite, Wan 3, Veo 3.1 Lite, LTX 2.5 Fast ou Kling v3 Video. Vérifiez sur la page de chaque modèle son option d’entrée image. Une boucle de cinq secondes derrière un titre suffit souvent à une page d’accueil.
La même plateforme peut aussi se charger de la réflexion. Claude Sonnet 5 fonctionne sur PicassoIA comme modèle de texte capable de lire les images, ce qui en fait un moyen rapide de rédiger le fichier de règles à partir d’une capture d’écran de votre système de design.
low, désactive la réflexion pour une réponse plus rapide et moins chère. Utilisez medium ou high lorsque la sortie doit raisonner sur de nombreux composants, et xhigh ou max pour les travaux délicats portant sur plusieurs fichiers.💡 Astuce : Un raisonnement plus poussé est disponible avec Claude Fable 5 et Claude Opus 4.7 sur la même plateforme.
Vous disposez maintenant de la boucle complète. Connectez le serveur, ajoutez un fichier de règles, construisez une section à la fois, puis cartographiez vos composants avec Code Connect afin que le résultat continue de s’améliorer.
La partie qu’on oublie facilement, ce sont les images. Une interface finie a besoin de vraies photos et d’un peu de mouvement, et Picasso IA vous donne les modèles pour les deux au même endroit. Choisissez un modèle d’image, décrivez la photo principale que vous voulez et voyez comment elle change la frame que vous venez de construire. Essayez ensuite l’un des modèles vidéo sur cette même photo et comparez les deux versions côte à côte. Ouvrez PicassoIA et créez dès aujourd’hui votre première image principale.
Choisissez votre langue
