Après 100 jours de vibe-coding en tant que designer, j'ai trouvé que ce workflow était le plus fluide pour livrer des designs rapidement (avec une qualité supérieure).
Tout ce que vous savez sur la transmission aux développeurs est faux, car Figma MCP rend la livraison 5 fois plus rapide maintenant.
La nouvelle méthode : vous livrez vous-même ! (*mettez ceci en favori si vous ne l'avez pas encore lu*)
https://x.com/felixleezd/status/2020529060225716486
Maintenant, quand vous utilisez Figma MCP, Claude Code peut lire votre Figma réel -> chaque couleur, chaque espacement, chaque variante de composant.
Littéralement, plus de perte de traduction design-développement.
J'ai construit ce jeu d'un seul coup en utilisant Figma MCP <> Claude Code, d'ailleurs. C'est incroyablement époustouflant.
https://x.com/felixleezd/status/2016919389682171976
Et un diagramme pour vous montrer le workflow 2026 :
1┌─────────────────────────────────────────────────────────────────────────┐2│ │3│ BEFORE (Handoff Hell) AFTER (Vibe Coding) │4│ ──────────────────── ─────────────────── │5│ │6│ Design Design │7│ ↓ ↓ │8│ Spec doc Claude reads Figma directly │9│ ↓ ↓ │10│ Dev interprets You prompt: "Build this" │11│ ↓ ↓ │12│ Review Production code │13│ ↓ ↓ │14│ Feedback loop ×10 Ship 🚀 │15│ ↓ │16│ "Close enough" Timeline: Minutes │17│ │18│ Timeline: Weeks │19│ │20└─────────────────────────────────────────────────────────────────────────┘
Aucune connaissance en programmation requise.
Ici, j'ai rédigé un guide d'introduction sur tout ce que vous devez savoir pour travailler avec Figma MCP et Claude Code.
Mettons-le en place.
partie 1 > Comment configurer Figma MCP
Étape 1 : Obtenez votre token Figma
1Figma.com → Cliquez sur le profil (en haut à gauche) → Paramètres → Sécurité2→ Jetons d'accès personnels → Générer un nouveau jeton → Copiez immédiatement
Étape 2 : Connectez-vous à Claude Code
1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx
Étape 3 : Vérifiez la connexion
1Dans Claude Code, tapez : /mcp2Vous devriez voir : figma ✓ connecté
partie 2 > Comment Claude Code voit votre Figma
1┌─────────────────────────────────────────────────────────────────────────┐2│ YOUR FIGMA FILE │3├─────────────────────────────────────────────────────────────────────────┤4│ │5│ ┌─────────────────────────────────────────────────────────────────┐ │6│ │ WHAT CLAUDE CAN READ │ │7│ ├─────────────────────────────────────────────────────────────────┤ │8│ │ ✓ Layer names & hierarchy ✓ Auto Layout settings │ │9│ │ ✓ Colors (fills, strokes) ✓ Component variants │ │10│ │ ✓ Typography styles ✓ Spacing & padding │ │11│ │ ✓ Effects (shadows, blur) ✓ Constraints │ │12│ │ ✓ Design tokens/variables ✓ Text content │ │13│ └─────────────────────────────────────────────────────────────────┘ │14│ │15│ ┌─────────────────────────────────────────────────────────────────┐ │16│ │ WHAT CLAUDE CANNOT READ │ │17│ ├─────────────────────────────────────────────────────────────────┤ │18│ │ ✗ Actual image pixels ✗ Prototype interactions │ │19│ │ ✗ Comments & feedback ✗ Version history │ │20│ └─────────────────────────────────────────────────────────────────┘ │21│ │22└─────────────────────────────────────────────────────────────────────────┘
partie 3 > modèle de workflow éprouvé complet
Phase 1 : Analysez l'intégralité de votre design 🧪
1Lisez mon design Figma à l'adresse :2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]34Donnez-moi :51. Un aperçu de la structure de la page62. La liste des sections principales73. La palette de couleurs utilisée84. Les styles typographiques95. Les composants que vous pouvez identifier
Phase 2 : Extrayez les tokens de design 🪙
1À partir du fichier Figma, extrayez et créez :231. Une configuration Tailwind avec :4 - Les couleurs personnalisées correspondant au design5 - Les familles et tailles de police6 - L'échelle d'espacement basée sur ce que vous voyez782. Un fichier de variables CSS en sauvegarde910Formatez les couleurs avec des noms sémantiques (primaire, secondaire, accent, neutre).
Phase 3 : Générez des composants ⚡️
1Regardez le [NOM DU COMPOSANT] dans mon fichier Figma.23Générez un composant React qui :4- Correspond au style exact (couleurs, espacement, typographie)5- Utilise Tailwind CSS6- Supporte toutes les variantes que j'ai définies (le cas échéant)7- Est entièrement typé avec TypeScript8- Inclut les états de survol/focus basés sur le design
Phase 4 : Construisez des sections complètes 🖥️
1Générez la section [NOM DE LA SECTION] à partir de mon design Figma.23Exigences :4- Correspondre exactement au design5- Rendez-la responsive :6 - Mobile (<768px) : [décrire la mise en page]7 - Desktop (≥768px) : [décrire la mise en page]8- Utilisez du HTML sémantique (section, nav, main, article)9- Incluez tout le texte du design
partie 4 > les 3 principaux cas d'utilisation de Figma MCP
1┌─────────────────────────────────────────────────────────────────────────┐2│ MCP IN ACTION │3└───────────────────────────────┬─────────────────────────────────────────┘4 │5 ┌───────────────────────┼───────────────────────┐6 ▼ ▼ ▼7┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐8│ FIGMA DESIGN │ │ FIGJAM │ │ FIGMA MAKE │9│ ───────────── │ │ ───────────── │ │ ───────────── │10│ │ │ │ │ │11│ Design files │ │ Wireframes & │ │ AI-generated │12│ → Production │ │ user flows → │ │ UI → Inject │13│ code │ │ Working app │ │ into codebase │14│ │ │ │ │ │15│ ⭐ MOST USED │ │ 🎯 POWERFUL │ │ ⚡ FASTEST │16└───────────────────┘ └───────────────────┘ └───────────────────┘17 │ │ │18 ▼ ▼ ▼19┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐20│ "Build my landing │ │ "Read my user │ │ "Take this Make │21│ page from this │ │ flow and create │ │ design and add it │22│ Figma design" │ │ the Next.js │ │ to my existing │23│ │ │ route structure" │ │ portfolio app" │24└───────────────────┘ └───────────────────┘ └───────────────────┘
Figma MCP (FigJam) x Claude Code - extrait de mon tutoriel AI First Designer School
partie 5 > workflows avancés pour chacun
workflow A : Design System → Site complet
1STEP 1 STEP 2 STEP 32───────────────────────────────────────────────────────────────────3"Read my design "Generate base "Build homepage4system file and components: Button, using these5extract all tokens" Card, Input, Badge" components"6 │ │ │7 └────────────────────────┴────────────────────────┘8 │9 ▼10 STEP 4: Add pages one by one11 "Now build the pricing page"12 "Now build the about page"
workflow b : speedrun d'une seule page
1Lisez [URL], extrayez les tokens, générez une page complète avec toutes les sections,2rendez-la responsive, utilisez Next.js + Tailwind. Allez-y.34 ┌──────────────────────────────────────────────────────────┐5 │ ⚠️ Works best when your Figma file is well-organized │6 │ with proper naming and Auto Layout throughout │7 └──────────────────────────────────────────────────────────┘
workflow c : composant d'abord (pour designers expérimentés)
1┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐2│ Tokens │ → │ Atoms │ → │ Molecules│ → │ Sections│ → │ Page │3│ (colors,│ │ (button,│ │ (card, │ │ (hero, │ │ (full │4│ fonts) │ │ input) │ │ nav) │ │ footer) │ │ page) │5└─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘
partie 6 > checklist Figma (avant de commencer)
1┌─────────────────────────────────────────────────────────────────────────┐2│ NAMING │3│ [ ] Layers use semantic names hero-section ✓ Frame 427 ✗ │4│ [ ] Components are clearly named Button/Primary ✓ Component 1 ✗ │5│ [ ] Variants have descriptive props size=lg ✓ variant=2 ✗ │6├─────────────────────────────────────────────────────────────────────────┤7│ STRUCTURE │8│ [ ] Auto Layout on ALL containers Flexbox ready ✓ Absolute mess ✗│9│ [ ] Flat hierarchy (minimal nesting) Clean DOM ✓ Div soup ✗ │10│ [ ] Sections clearly separated Easy parsing ✓ Chaos ✗ │11├─────────────────────────────────────────────────────────────────────────┤12│ TOKENS │13│ [ ] Colors defined as styles Extractable ✓ Hardcoded ✗ │14│ [ ] Typography as text styles Consistent ✓ Random ✗ │15│ [ ] Spacing is consistent Systematic ✓ Arbitrary ✗ │16└─────────────────────────────────────────────────────────────────────────┘
🔖 (recommandé) Vous voulez absolument mettre ceci en favori.
quelques derniers conseils de pro sur l'utilisation de Figma MCP
11. NOMBREZ LES COUCHES COMME DES CLASSES CSS2 nav-links ✓ Group 5 ✗342. TRAVAILLEZ SECTION PAR SECTION5 Hero → Features → Testimonials → Footer6 (Ne demandez pas toute la page d'un coup)783. RÉFÉRENCEZ FIGMA DIRECTEMENT9 "Regardez la carte dans la section Features"10 (Pas : "Créez une carte avec des coins arrondis")11124. EXPORTEZ D'ABORD LES ASSETS13 Les images nécessitent une exportation manuelle → dossier /public14 Ensuite dites à Claude : "L'image du héros se trouve dans /public/hero.png"15165. PARTAGEZ VOTRE STACK AU DÉPART17 "J'utilise Next.js 14 + Tailwind + TypeScript"18 (Claude s'adaptera à vos conventions)
référence de démarrage rapide :
1Je souhaite convertir mon design Figma en code.23URL Figma : [COLLEZ VOTRE URL]45Stack : Next.js 14 + Tailwind CSS + TypeScript67Veuillez :81. D'abord, analyser le design et me dire ce que vous voyez92. Extraire la palette de couleurs et créer une configuration Tailwind103. Ensuite, je vous dirai quelle section construire en premier1112Procédons étape par étape.
Et vous êtes prêt à partir. 😉🔥 Merci d'avoir lu !
Cet article est basé sur mon cours complet de Vibe-Coding **(si vous souhaitez me soutenir) ⭐️. Il comprend :
- Guides d'installation (Mac + Windows)
- Orientation sur Claude Code + Cursor
- Tutoriel du premier projet
- GitHub + contrôle de version
- Déploiement Vercel
- Domaines personnalisés
- Intégration Supabase + OpenAI
- NOUVEAUX chapitres sur les agents IA et Figma MCP !
NOUVEAU : Depuis que j'ai écrit cet article,
@figma a également lancé son Claude Code vers Figma ; je prévois de couvrir cela dans la semaine à venir !
🏛️ Postulez pour rejoindre notre communauté (AI-first designer school) en tant que membre fondateur (cours complets disponibles) : https://adplist.org/vibe-code-designers
🔖 Mettez ceci en favori pour y revenir.
🔄 Si vous trouvez cela utile, repostez ou partagez-le et donnez votre avis. Parce que plus de designers peuvent apprendre à construire.
