Depuis mars 2026, Figma Make (outil de prototypage Figma) impose un système de crédits limitant. Pour contourner cette contrainte, j'ai basculé vers Claude Code et le protocole MCP afin d'automatiser mes tâches répétitives tout en gardant le contrôle stratégique. Retour d'expérience sur ce workflow qui transforme ma pratique du design et me permet de me recentrer sur l'expérience utilisateur.
Le handoff traditionnel évolue. Entre les outils IA de Figma qui deviennent payants et les tâches répétitives (schématiser un parcours utilisateur, décliner des composants d'UI), j'ai décidé de changer d'approche : sortir partiellement de Figma pour piloter mon design depuis un terminal.
Depuis mars 2026, j'utilise Claude Code via le protocole MCP (Model Context Protocol). L'idée n'est pas de laisser l'IA designer à ma place, mais d'utiliser un assistant capable de lire mon Design System et mes variables en temps réel via le plugin Figma Desktop Bridge.
Ce workflow automatise l'exécution mécanique pour me permettre de me recentrer sur l'architecture produit et la stratégie UX. Voici comment je combine NotebookLM pour l'analyse d'insights, ma réflexion métier et Claude Code pour l'exécution technique.
Pourquoi j'ai quitté les outils IA natifs de Figma
Le problème du système de crédits
Figma a intégré des fonctionnalités IA séduisantes, comme Figma Make. Cependant, depuis mars 2026, le passage à un système de crédits mensuels a changé la donne. Pour un designer qui itère beaucoup (tests de variations, concepts), ce quota devient vite un frein à la créativité. Soit on rationne ses prompts, soit on paie.
L'alternative : une solution plus flexible
En basculant vers Claude Code via l'API, j'ai trouvé une solution à la fois plus flexible et techniquement plus avancée. Là où Figma Make se limite souvent à générer des blocs visuels à copier-coller, Claude Code via MCP offre des capacités étendues :
- Gestion directe des variables (tokens de couleur, espacements, typographies).
- Analyse d'accessibilité basée sur les données réelles du fichier.
- Manipulation directe du canvas Figma sans passer par l'étape intermédiaire du copier-coller.
Exemple d'un workflow Claude Code à Figma. Source video : https://www.figma.com/blog/introducing-claude-code-to-figma/
Étape 1 : Connecter le terminal au canevas
Pour que Claude « voit » mon design, mon installation repose sur deux composants :
- Figma Desktop Bridge : Un serveur MCP local qui fait le pont avec l'application Figma Desktop. Il expose l'API Figma, permettant à Claude de lire et modifier le JSON de mes fichiers.
- Claude Code (CLI) : L'interface en ligne de commande par laquelle j'envoie mes instructions.
L'importance d'un Design System rigoureux
Une fois authentifié, Claude accède à mes calques et mes variables. C'est ici que la rigueur du Design System paie : si vos tokens de couleurs et de texte sont propres, Claude les identifie comme une source de vérité.
Sans cette structure (variables globales, nomenclature cohérente), Claude génère du bruit. La qualité de l'organisation du fichier Figma détermine la qualité de l'IA. Pour un développeur, c'est l'équivalent d'avoir un code bien typé : cela réduit les hallucinations de l'agent.
Étape 2 : Le workflow "Thinker vs Doer"
Mon processus suit une chaîne logique où l'IA n'est qu'un exécutant de ma réflexion stratégique :
- Analyse (NotebookLM) : J'importe mes transcriptions de réunions (workshops, interviews, points UX/PO/Dev). L'outil en extrait les points de friction et les règles de gestion. C'est ma base de connaissance factuelle.
- Arbitrage (Ma réflexion UX) : C'est l'étape critique. Je filtre les insights pour décider de la stratégie. Pour le moment, je travaille directement avec des prompts, mais j'explore l'usage du Markdown comme source de vérité pour structurer mes décisions de manière versionnée.
- Action (Claude Code) : Une fois la stratégie fixée, je demande à Claude de matérialiser la solution dans Figma en s'appuyant sur mes composants existants.
Cas d'usage n°1 : Le flowchart de règles métier
C’est là que je gagne le plus de temps. Transformer un document de spécifications de 10 pages en flux visuel est une tâche purement mécanique.
Le workflow
NotebookLM synthétise les règles, je valide la logique, puis Claude génère le flux directement dans Figma via le terminal.
Exemple de prompt concret
Lis les règles métier suivantes :
- Si utilisateur vérifié → validation automatique
- Si utilisateur non vérifié → envoi lien confirmation
- Si pas de réponse sous 48h → alerte support
Dans Figma, génère un diagramme de flux sur la page 'Logic'.
Utilise les composants de ma bibliothèque de diagrammes.
Le résultat
Une structure complète en quelques minutes. Je ne perds plus mon énergie à aligner des flèches, mais à vérifier que le parcours utilisateur couvre bien tous les cas d'erreur. Sur un projet récent, j'ai réduit ce temps de production de plusieurs heures à 30 minutes.
Erreurs courantes et comment les éviter
Pour réussir ce virage Agentic Design, voici les pièges que j'ai identifiés :
- Prompts trop vagues : Demander de juste « faire une belle interface » ne fonctionne pas. Soyez spécifique sur les composants et les variables à utiliser.
- Négliger l'accessibilité : L'IA peut oublier les contrastes. Je demande systématiquement : « Vérifie que ce composant respecte les normes WCAG AA sur mon fond actuel. »
- L'absence d'itération : On obtient rarement le résultat parfait du premier coup. Il faut piloter l'agent étape par étape : structure d'abord, détails ensuite.
Limites et précautions
Claude Code n'est pas une solution miracle. Sans Design System structuré, il génère des interfaces génériques. De plus, il ne remplace jamais :
- L'empathie utilisateur pour comprendre les émotions profondes.
- Le jugement stratégique pour savoir dire non à une fonctionnalité inutile.
- Le design émotionnel qui porte l'identité de marque.
FAQ : Passer au design assisté par agent
Faut-il savoir coder ?
Non, mais il faut comprendre la structure des données (JSON, variables). Une culture Craft et une connaissance des principes de base de développement facilitent grandement le dialogue avec Claude.
Quel est le coût réel ?
L'usage de l'API est facturé au token. C'est bien plus rentable que les crédits Figma Make pour un usage intensif, car on ne paie que ce que l'on consomme réellement.
Combien de temps pour maîtriser ce workflow ?
Comptez environ 3 jours pour stabiliser votre setup technique et apprendre à rédiger des prompts efficaces pour vos agents.
Pour conclure : Plus de stratégie, moins de répétition
L'usage de Claude Code et du MCP modifie la répartition de mon temps. Automatiser la production de schémas ou de composants répétitifs est un moyen de me concentrer sur l'arbitrage stratégique et la viabilité des parcours.
L'objectif est de s'extraire de la production pure pour redevenir un pilote du produit. Je laisse l'IA gérer la structure et la répétition pour me concentrer sur les points de friction complexes et les besoins métier.
La suite ? Approfondir l'usage du Markdown pour documenter mes décisions et explorer Code Connect pour lier enfin les composants Figma au code de production. Ce workflow me permet déjà de livrer des solutions plus robustes, sans y passer des nuits.
