Figma a mis à jour son intégration MCP, et ça change ce qu’un agent IA comme Claude Code peut faire dans un workflow de design. Fini le copier-coller entre les outils. Claude lit votre fichier Figma, accède à votre design system, et travaille directement dedans.
Sur le papier, c’est séduisant. En pratique, c’est plus nuancé, et beaucoup plus intéressant que ce que les démos YouTube montrent. Voici ce qu’il faut savoir pour que ça tienne sur de vrais projets.
1. Le setup : ce qu’il faut installer et configurer
Avant le premier prompt, le setup doit être propre. Un setup bâclé, c’est 90 % des résultats décevants qu’on voit en ligne.
Ce dont vous avez besoin :
Claude Code installé en local. Le MCP Figma connecté via la section Connecteurs de Claude. Vous renseignez vos credentials Figma, vous suivez les étapes, c’est plutôt guidé.
Les Skills Figma. Figma fournit ses propres skills officiels pour le MCP, et le plus fondamental s’appelle figma-use. C’est lui qui pilote l’écriture sur le canvas : frames, composants, variables, auto layout. Sans ce skill, votre agent peut lire un fichier Figma mais pas y écrire correctement.
Si vous utilisez Claude Code ou Cursor, les skills s’installent automatiquement avec le plugin Figma. Vous installez le plugin via la doc officielle, et figma-use est disponible tout de suite, avec les autres (figma-implement-design, figma-create-new-file…).
Pour les outils sans plugin Figma intégré, il faut télécharger les skills manuellement. Figma met le pack à disposition sur la page d’aide officielle, ou via le repo mcp-server-guide sur GitHub. Demandez ensuite à votre agent de désarchiver le fichier et de placer le contenu au bon endroit, il sait où ça va.
Enfin, un dossier de projet structuré : votre dossier web, un dossier branding (couleurs, typographie, logos), et votre fichier Claude.md.
La structure recommandée :
/mon-projet/
├── .claude/
│ └── claude.md
├── branding/
│ ├── colors.md
│ ├── typography.md
│ └── logos/
└── web-design/
└── [vos exports et assets]
Une fois tout en place, faites un audit de connexion. Demandez à Claude de vérifier qu’il voit bien le MCP Figma, vos skills, votre Claude.md, et votre design system avec ses variables. Si quelque chose manque à ce stade, vous le saurez avant de perdre du temps sur de mauvais résultats.
2. Le fichier Claude.md : l’élément que personne ne mentionne assez
C’est ce qui sépare un workflow qui tourne d’un workflow qui crache des layouts génériques à chaque session.
Le fichier claude.md est lu par Claude Code au démarrage. C’est votre brief permanent, l’équivalent d’un cahier des charges que vous n’avez pas à réécrire à chaque prompt.
Ce qu’il doit contenir pour un projet Figma :
Les références du fichier Figma. L’URL exacte du fichier de design, et si vous travaillez sur plusieurs pages, l’URL de chaque page concernée. Sans ça, Claude ne sait pas où travailler.
Les règles de votre design system. Listez explicitement quelles variables utiliser pour les couleurs, les espacements, les border radius. Par exemple :
- Toujours utiliser les variables de couleur du groupe « Brand/ » pour les éléments principaux
- Espacements : utiliser uniquement les tokens spacing-4, spacing-8, spacing-16, spacing-24, spacing-48
- Border radius : 4px pour les éléments UI standard, 999px pour les pills et badges
Les conventions de nommage. Figma est très sensible à la structure des layers. Précisez comment nommer les frames, les groupes, les composants. Sinon vos layers deviennent un bazar ingérable après quelques sessions.
Les interdictions explicites, aussi importantes que les règles positives. Par exemple : interdiction de créer des styles locaux, interdiction des valeurs de couleur en dur (toujours passer par les variables), interdiction de créer des nouveaux composants sans les transformer en Master Component.
La méthode de travail. Indiquez à Claude qu’il doit travailler section par section, jamais sur une page entière d’un coup.
Construire ce fichier prend du temps au départ. Comptez une bonne heure, avec plusieurs allers-retours pour identifier ce qui marche. Mais une fois calibré, il est réutilisable d’un projet à l’autre.
3. Pourquoi demander un design complet ne fonctionne pas
C’est l’erreur que tout le monde fait au début, et elle est compréhensible. Vous avez une référence visuelle, vous la partagez avec Claude, vous demandez une landing page complète. Résultat : 25 minutes de processing, un layout générique, et la moitié de vos tokens brûlés.
Le problème vient de l’API. Figma fonctionne par opérations unitaires. Chaque élément créé est une requête distincte. Quand Claude essaie de générer une page entière, il enchaîne des centaines d’opérations en aveugle, sans pouvoir évaluer le résultat intermédiaire. La cohérence visuelle globale lui échappe.
La bonne approche fait l’inverse : composants d’abord, page ensuite.
4. La méthode qui fonctionne : composants d’abord
Étape 1. Créer les composants avant de toucher aux layouts
Commencez toujours par alimenter votre bibliothèque de composants. C’est là que Claude est le plus efficace et le plus fiable.
Un prompt type pour les boutons :
Crée un set complet de composants boutons en utilisant les variables
de mon design system. Inclure :
- 4 tailles : XL, L, M, S
- 3 styles : Solid, Outline, Ghost
- 2 border radius : 4px et 999px
- États : Default, Hover, Disabled, Loading
Nommer chaque variante selon la convention : Button/[Style]/[Size]
Placer l'ensemble sur la page "Components" du fichier Figma.
Résultat en moins de 3 minutes : un set de boutons complet, avec variants configurés, qui utilise vos variables de couleur. Pas parfait. Claude va parfois utiliser une icône chevron là où vous voulez une flèche. Mais structurellement propre et utilisable tout de suite.
Appliquez la même logique aux cards, icon boxes, form inputs, badges, alerts. Tous les éléments répétitifs de votre interface.
Étape 2. Construire la page section par section
Une fois les composants disponibles, attaquez la page. Toujours une section à la fois, en partageant à chaque fois l’URL de la page cible.
Prompt type pour une section hero :
Sur la page "Homepage" [URL], crée la section hero avec :
- Une frame full-width de 1440px de large, hauteur auto
- Utiliser le composant Button/Solid/L pour le CTA principal
- Utiliser le composant Button/Outline/L pour le CTA secondaire
- Texte de titre : utiliser le style "Heading/H1" de mes styles de texte
- Padding horizontal : token spacing-48, padding vertical : spacing-96
- Couleur de fond : variable Background/Primary
Plus votre prompt est précis sur les composants à utiliser et les tokens à appliquer, meilleur sera le résultat. Claude ne devine pas. Il exécute.
Étape 3. Travailler en parallèle
Une fois la méthode rodée, vous pouvez demander à Claude de générer la prochaine section pendant que vous affinez la précédente. Vous créez des variantes de composants, vous ajustez des couleurs. Lui continue à construire. C’est là que le gain de temps devient vraiment significatif.
5. Les limitations techniques à connaître
Les polices custom ne passent pas. Limitation connue de l’API Figma MCP. Même si vos fonts sont correctement définies dans vos variables et vos styles, Claude ne peut pas les appliquer. Il utilisera une font système par défaut. La parade : appliquer vos styles de texte manuellement après coup, ou créer un style de texte dans Figma qui référence votre font. Claude pourra alors appliquer le style même s’il ne peut pas manipuler la font directement.
Les layouts trop complexes génèrent des incohérences. Au-delà d’un certain niveau de complexité, Claude perd le fil de la cohérence globale. Gardez chaque prompt focalisé sur un périmètre restreint.
L’auto layout peut partir dans tous les sens. Claude crée de l’auto layout, ce qui est plutôt bon signe, mais les valeurs de gap et de padding ne sont pas toujours cohérentes avec votre système. Vérifiez les valeurs après chaque génération.
Le coût en tokens est réel. Une session mal cadrée peut consommer énormément. Soyez précis dans vos prompts, travaillez section par section, et évitez les allers-retours inutiles.
6. Ce que ça change vraiment dans un workflow professionnel
La bonne façon de cadrer cet outil, c’est celle d’un junior designer qui monte en compétence vite. Excellent sur les tâches systématiques et répétitives. Moins à l’aise dès qu’il faut prendre des décisions créatives ou gérer le détail visuel.
Ce que Claude fait bien et vite : initialiser les bibliothèques de composants, créer les variantes, poser les structures de base des sections, respecter un design system une fois bien documenté dans le Claude.md.
Ce que Claude ne fait pas : choisir qu’une composition asymétrique servira mieux le message que la grille symétrique évidente. Sentir qu’il faut plus d’air ici, moins là. Décider que cette couleur d’accent crée une tension visuelle qui renforce le CTA. Ça, c’est votre apport, et il n’est pas près d’être automatisé.
L’intégration Claude Code + Figma MCP ne remplace pas le travail de design. Elle élimine une part importante du temps ingrat, celui qui n’a aucune valeur créative mais qui grignote les projets. Setup soigné, Claude.md bien construit, méthode composants d’abord. Avec ces trois éléments, vous avez un workflow qui tient sur de vrais projets clients.