Figma MCP : transformer vos maquettes en code avec l’IA (guide complet)
Donner une capture d’écran de maquette à une IA et lui demander de la coder, ça fonctionne… à peu près. Les espacements sont approximatifs, les couleurs inventées et vos composants existants ignorés. Le serveur MCP officiel de Figma change la donne : au lieu d’une image, l’assistant reçoit la structure de la maquette, les variables de votre design system et les correspondances avec vos composants de code.
Que vous soyez développeur front-end ou designer qui code, voici comment l’installer et l’utiliser pour obtenir un code vraiment fidèle au design.
Figma MCP en bref
| Point clé | Détail |
|---|---|
| Éditeur | Figma (officiel) |
| Serveur distant | https://mcp.figma.com/mcp |
| Serveur local | http://127.0.0.1:3845/mcp (application Figma desktop) |
| Accès | Serveur distant ouvert à toutes les offres, avec des limites selon le siège |
| Clients | Claude Code, Cursor, VS Code, Windsurf, Codex… |
| Idéal pour | Intégration de maquettes, design systems, génération de diagrammes |
📇 Retrouvez la fiche Figma MCP dans notre annuaire des serveurs MCP : commande d’installation, liens officiels et catégorie.
Que fait le serveur Figma MCP ?
Le serveur expose plusieurs familles d’outils :
Lire le design (design vers code)
get_design_context: récupère le contexte complet d’un calque ou de la sélection (structure, styles, texte) pour générer du code.get_variable_defs: liste les variables et styles utilisés (couleurs, espacements, typographie).get_screenshot: capture la sélection pour que le modèle ait aussi le rendu visuel.get_metadata: donne une vue légère de la structure (identifiants, noms, positions, tailles), utile pour les très grands écrans.download_assets: récupère les icônes et images de la maquette.
Relier Figma à votre code
- Les outils Code Connect associent un composant Figma à un composant de votre dépôt. L’assistant réutilise alors votre
<Button>au lieu d’en créer un nouveau.
Écrire dans Figma (code vers design)
- Le serveur distant permet aussi de créer des fichiers, de générer des diagrammes FigJam à partir d’une description ou d’une syntaxe Mermaid, ou de transformer une interface web existante en calques Figma. Certaines de ces fonctions sont encore en bêta.
Installer Figma MCP
Serveur distant (recommandé)
C’est l’option qui offre le plus de fonctionnalités, sans application à installer. Avec Claude Code :
claude mcp add --transport http figma https://mcp.figma.com/mcp
Tapez ensuite /mcp dans Claude Code et connectez votre compte Figma. Dans Cursor ou VS Code, déclarez un serveur HTTP avec la même URL :
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}
Serveur local (application desktop)
Si votre équipe préfère passer par l’application Figma installée, activez le serveur MCP depuis le mode Dev de l’application, puis pointez votre client vers http://127.0.0.1:3845/mcp. Cette option nécessite un siège Dev ou Full sur une offre payante. Son avantage : l’assistant peut travailler directement sur votre sélection en cours, sans lien à copier.
Premiers pas : comment lui parler
Avec le serveur distant, la méthode la plus simple consiste à copier le lien d’une frame ou d’un calque (clic droit, « Copier le lien ») et à le coller dans votre demande :
- « Implémente cette frame en React avec Tailwind : [lien Figma]. Utilise les composants de
src/components/ui. » - « Récupère les variables de couleur et d’espacement de cette page et génère un fichier de design tokens CSS. »
- « Exporte les icônes de cette frame en SVG dans
public/icons. » - « Compare cette maquette avec la page actuelle de l’application et liste les différences. »
- « Génère un diagramme FigJam du parcours d’inscription décrit dans ce document. »
Cas d’usage concrets
Intégrer un écran complet. L’agent lit la structure, récupère les variables et une capture, puis écrit un composant qui respecte vos tokens au lieu de valeurs codées en dur.
Synchroniser un design system. Grâce à get_variable_defs, vous générez ou mettez à jour vos tokens (CSS, Tailwind, thème) directement depuis Figma.
Réutiliser vos composants existants. Avec Code Connect, l’assistant sait que tel bouton Figma correspond à tel composant de votre code. Le résultat s’intègre naturellement dans votre projet.
Documenter et schématiser. La génération de diagrammes FigJam permet de visualiser une architecture ou un parcours utilisateur en quelques secondes.
Bonnes pratiques pour utiliser Figma MCP
1. Structurez vos fichiers Figma
L’IA lit ce que vous lui donnez. Des calques nommés clairement (« Header », « CardProduit ») plutôt que « Frame 437 », l’auto layout plutôt que des positions absolues, des composants plutôt que des groupes : tout cela se traduit directement par un code plus propre.
2. Utilisez des variables pour vos couleurs et espacements
Si vos maquettes utilisent des variables Figma, l’assistant récupère des noms de tokens (color/primary, spacing/md) au lieu de valeurs brutes. C’est la clé d’un code cohérent avec votre design system.
3. Travaillez par petites sélections
Demander l’intégration d’une page entière en une fois produit souvent un résultat moyen et consomme beaucoup de contexte. Découpez : d’abord le header, puis chaque section, puis l’assemblage. Pour les écrans très chargés, get_metadata donne une vue d’ensemble légère avant d’entrer dans le détail.
4. Indiquez votre stack et vos conventions
Précisez le framework, la librairie de styles et le dossier des composants. Mieux encore, inscrivez ces règles une fois pour toutes dans CLAUDE.md ou dans les règles de Cursor : « Utilise toujours Tailwind et les composants de src/components/ui, jamais de valeurs de couleur en dur. »
5. Mettez en place Code Connect
C’est un petit investissement de départ qui paie énormément. Chaque composant relié évite à l’assistant de réinventer un bouton, une carte ou un champ de formulaire.
6. Vérifiez visuellement le résultat
Le code généré est un excellent point de départ, pas une garantie au pixel près. Comparez le rendu avec la maquette, idéalement en combinant Figma MCP avec un serveur comme Playwright MCP pour faire une capture de votre page.
7. Surveillez vos limites d’utilisation
Le nombre d’appels autorisés dépend de votre offre et de votre siège Figma. Des sélections ciblées et des demandes précises vous éviteront d’atteindre ces limites en pleine intégration.
Problèmes fréquents et solutions
L’assistant ne trouve pas la frame. Vérifiez que le lien pointe bien vers un calque (il contient un paramètre node-id) et que votre compte a accès au fichier.
Le serveur local ne répond pas. Assurez-vous que l’application Figma desktop est ouverte, à jour, et que le serveur MCP est activé en mode Dev.
Le code utilise des valeurs en dur. Vos maquettes n’utilisent probablement pas de variables, ou l’assistant n’a pas appelé get_variable_defs. Demandez-le explicitement.
Questions fréquentes
Faut-il une offre Figma payante ?
Le serveur distant est accessible sur toutes les offres, avec des limites d’utilisation qui varient selon le siège. Le serveur local, lui, demande un siège Dev ou Full sur une offre payante.
Serveur distant ou local : lequel choisir ?
Figma recommande le serveur distant, qui propose le plus de fonctionnalités (dont l’écriture dans les fichiers). Le serveur local est pratique pour travailler sur la sélection en cours dans l’application.
Figma MCP fonctionne-t-il avec Vue, Svelte ou le natif mobile ?
Oui. Le serveur fournit le contexte du design ; c’est votre assistant qui génère le code dans le framework que vous lui indiquez.
Mes maquettes sont-elles envoyées au modèle d’IA ?
Les informations de la sélection demandée sont transmises au modèle utilisé par votre client. Respectez les règles de confidentialité de votre entreprise pour les projets sensibles.
En résumé
Figma MCP comble enfin le fossé entre la maquette et le code. En donnant à votre assistant la structure, les variables et vos composants, il produit une intégration beaucoup plus fidèle qu’à partir d’une simple capture. Soignez vos fichiers Figma, travaillez par petites sélections et reliez vos composants avec Code Connect : le gain de temps est réel.