J'ai Construit une App Complète en 2 Heures Sans Passer par Figma
Deux heures. C'est le temps qu'il m'a fallu pour passer d'un terminal vide à une application entièrement interactive avec des micro animations, des hover states et un design system complet — le tout sans ouvrir Figma une seule fois.
Et ensuite, j'ai renvoyé l'ensemble dans Figma sous forme de calques éditables.
Je sais que cette phrase a probablement fait bugger votre cerveau si vous êtes designer. Le mien aussi. Le workflow qu'on a tous intériorisé — designer dans Figma, transmettre au dev, attendre trois semaines, recevoir un truc qui ne ressemble en rien à la maquette — vient d'être complètement renversé. Construire d'abord, synchroniser avec Figma ensuite. Le design par le code. Et avant que vous me disiez que c'est un workflow de développeur déguisé en outil de design, laissez-moi vous montrer ce que j'ai réellement construit, parce que le résultat tromperait n'importe quel directeur artistique en lui faisant croire que ça sort du fichier Figma d'un product designer senior.
Le secret, c'est l'intégration Figma MCP de Claude Code combinée à un workflow que la plupart des designers n'ont pas encore découvert. J'ai passé une semaine à tester trois cas d'usage précis — traduction de design systems, prototypage rapide à partir de captures d'écran et conversion complète de landing pages — et les résultats m'ont fait repenser ce que "designer" signifie vraiment en 2026.
Mais voici le piège que personne ne mentionne dans les tutoriels : mal configurer l'environnement va cramer vos crédits en une heure. Je l'ai appris à mes dépens, et je vais vous éviter de faire la même erreur.
L'Erreur de Configuration que Font la Plupart des Designers
Ce qui déroute les designers la première fois qu'ils découvrent Claude Code, c'est ça : ils entendent "Claude," ils ouvrent claude.ai, ils sélectionnent Opus 4.6 dans le menu déroulant des modèles, et ils commencent à écrire des prompts pour générer du code. Trente minutes plus tard, leurs crédits ont disparu et ils ont un fichier HTML à moitié terminé dont ils ne savent que faire.
Ce n'est pas du tout comme ça que ça marche.
Claude Code s'exécute dans un environnement — voyez-le comme un espace de travail qui organise vos fichiers, gère vos agents IA et vous donne un vrai contexte de développement. L'outil fonctionne au mieux lorsqu'il est associé à un éditeur comme Cursor, bien que vous puissiez aussi le lancer via AntiGravity de Google ou des plateformes similaires. J'utilise Cursor parce que la gestion des fichiers paraît naturelle si vous avez déjà utilisé VS Code.
L'environnement compte parce que Claude Code a besoin de voir la structure de votre projet. Il doit savoir où se trouve votre CSS, où sont vos fichiers HTML, quels assets vous avez importés. Quand vous discutez simplement avec Claude dans une fenêtre de navigateur, il génère des extraits de code isolés sans connaissance du projet. Quand vous l'exécutez dans un environnement adapté, il génère du code qui s'intègre à votre véritable structure de fichiers, référence des chemins réels et s'appuie sur ce qui existe déjà.
La première configuration m'a pris environ 15 minutes. Maintenant, je peux lancer un nouveau projet en moins de 3 minutes. Voici le processus :
Étape 1 : Prenez le bon abonnement. Claude Code propose des plans par paliers. Le plan "Pro" convient pour l'expérimentation et l'apprentissage. Si vous travaillez sur de vrais projets — surtout avec plusieurs agents qui tournent simultanément — le plan "Max" vous donne des crédits illimités et le support des agents parallèles. Pour les designers qui testent, le Pro suffit. Une fois accro (et vous le serez), passez à la version supérieure.
Étape 2 : Installez Claude Code comme extension dans Cursor. Cela connecte l'IA directement à l'espace de travail de votre projet. Chaque prompt que vous écrivez a le contexte complet de vos fichiers.
Étape 3 : Commencez en local. Créez votre dossier de projet, initialisez-le et travaillez en local d'abord. L'intégration GitHub viendra plus tard quand vous voudrez héberger ou partager. Ne compliquez pas le démarrage.
Ce dernier point est plus important qu'on ne le croit. J'ai vu trois amis designers essayer de configurer Claude Code en créant d'abord un dépôt GitHub, en paramétrant des pipelines de déploiement, en montant du CI/CD — tout ça avant d'écrire une seule ligne de code. Ils suivaient des tutoriels de développeurs, pas des workflows de designers. Commencez en local. Faites fonctionner votre première version sur votre machine. Le cloud peut attendre.
Maintenant, la synchronisation Figma — c'est la partie qui change tout pour les workflows de design, et la mise en place est plus simple que vous ne le pensez.
Connecter Claude Code à Figma (La Partie qui Change Tout)
Synchroniser Claude Code avec Figma nécessite un token d'accès personnel. Voici exactement comment en générer un :
- Ouvrez Figma, allez dans les paramètres de votre compte
- Naviguez jusqu'à la section "Personal Access Tokens"
- Générez un nouveau token avec toutes les permissions — lecture, écriture, tout
- Définissez l'expiration à 90 jours (le maximum)
- Copiez ce token immédiatement — Figma ne l'affiche qu'une seule fois
De retour dans Claude Code, lancez la commande d'authentification avec votre token. Une fois connecté, vous disposez d'un pont bidirectionnel entre votre environnement de code et Figma. Les designs circulent dans les deux sens.
Pourquoi est-ce important ? Parce que le workflow traditionnel est unidirectionnel. Le design va au dev. Le dev l'interprète. Des choses se perdent en route. Avec l'intégration Figma de Claude Code, vous pouvez :
- Récupérer les spécifications de design directement depuis Figma dans vos prompts de code
- Renvoyer le HTML/CSS généré dans Figma sous forme de calques vectoriels éditables
- Garder les deux environnements synchronisés pendant que vous itérez
Je serai honnête — quand j'ai entendu pour la première fois "renvoyer du code dans Figma," j'ai supposé que ça créerait une capture d'écran rastérisée de mauvaise qualité. Que nenni. Le pipeline HTML to Design convertit votre code en véritables calques Figma. Du texte éditable. Des frames redimensionnables. Un vrai auto-layout. Ce n'est pas pixel-perfect à chaque fois, mais c'est suffisamment précis pour continuer à itérer dans les deux directions.
Ce flux bidirectionnel débloque quelque chose que je n'attendais pas : la capacité de prototyper en code (là où les interactions fonctionnent vraiment) puis d'affiner dans Figma (là où le peaufinage visuel est plus rapide). Le meilleur des deux mondes. Mais je m'avance — laissez-moi vous montrer les trois cas d'usage où cette configuration brille véritablement.
Cas d'Usage 1 : Traduire un Design System en Code de Production
C'était ma première expérience, et elle m'a convaincu du workflow entier.
J'avais un design system existant dans Figma — échelle typographique, palette de couleurs, définitions d'ombres, variantes de boutons, tokens d'espacement. Le genre de fondation que chaque équipe produit construit puis peine à traduire en code qui corresponde réellement. J'ai travaillé sur des projets où le fichier Figma du design system et l'implémentation CSS ont commencé à diverger en deux semaines. Ça arrive parce que maintenir les deux manuellement est fastidieux et source d'erreurs.
Voici ce que j'ai fait : j'ai ouvert le fichier du design system dans le Dev Mode de Figma, sélectionné les pages contenant mes tokens principaux et copié les références des composants. Puis je suis passé dans Claude Code avec un prompt spécifique décrivant ce que je voulais — une implémentation CSS complète du design system avec des custom properties appropriées, une typographie responsive et des classes de composants.
Claude Code a généré les fichiers CSS et HTML en environ 4 minutes.
La typographie correspondait. Les couleurs étaient les valeurs hexadécimales exactes tirées des spécifications Figma. Les variantes de boutons avaient le bon padding, border-radius et les bons styles d'états. J'ai ouvert le HTML généré dans Live Server (une simple extension de prévisualisation dans le navigateur) et comparé côte à côte avec le fichier Figma.
Ce n'était pas parfait — les valeurs d'ombres nécessitaient un léger ajustement, et un des poids de police s'était mis à 500 au lieu de 600. Mais c'étaient des corrections de 30 secondes. La précision structurelle était quelque chose qui aurait pris à un développeur une journée entière à construire de zéro, en supposant qu'il interprète correctement les spécifications Figma.
Conseil de pro : Pour traduire des design systems, alimentez Claude Code une catégorie à la fois. Ne déversez pas l'intégralité de votre système dans un seul prompt. Faites d'abord la typographie, puis les couleurs, puis les ombres, puis les composants. Le résultat est plus précis quand chaque prompt a un périmètre ciblé.
Le vrai retour sur investissement est venu deux semaines plus tard quand un client a demandé des modifications sur le style du bouton principal. Je l'ai mis à jour dans Claude Code, le CSS s'est propagé sur toutes les pages utilisant ce composant, et j'ai renvoyé le design mis à jour dans Figma pour validation. Un seul changement, les deux environnements mis à jour. Plus de "quel fichier est la source de vérité ?".
Rien que ça justifierait le temps de configuration. Mais le deuxième cas d'usage est celui où je me suis le plus amusé.
Cas d'Usage 2 : Prototypage Rapide à Partir de Captures d'Écran
Imaginez. Vous scrollez sur Dribbble, ou vous parcourez le site d'un concurrent, ou vous regardez une capture d'écran qu'un client vous a envoyée avec la note "quelque chose dans ce genre." Normalement, vous ouvririez Figma, recréeriez le layout de zéro, approximeriez les espacements, devineriez l'échelle typographique. Une heure plus tard, vous avez une maquette statique.
Avec Claude Code, j'ai pris une capture d'écran d'un design qui me plaisait — un dashboard SaaS avec une navigation latérale, des cards de métriques et un tableau de données — je l'ai glissée dans mon prompt Claude Code et j'ai décrit ce que je voulais : "Crée un fichier HTML unique avec du CSS embarqué qui reproduise ce layout. Inclus des animations hover sur les cards et un toggle fluide de la barre latérale."
Quatre-vingt-dix secondes plus tard, j'avais un prototype fonctionnel dans mon navigateur.
Pas une maquette. Pas un wireframe. Une page fonctionnelle et interactive avec des hover states qui répondaient vraiment à mon curseur, une barre latérale qui se repliait avec une transition CSS fluide, et des cards de métriques qui se redimensionnaient correctement quand je changeais la taille de la fenêtre.
C'était prêt pour la production ? Non. Les données étaient fictives, les breakpoints responsives nécessitaient du travail, et certains espacements étaient légèrement décalés. Mais comme point de départ pour l'exploration — pour tester si une direction de layout fonctionne avant d'investir des heures en design haute fidélité — c'est imbattable.
J'ai commencé à utiliser ce workflow pour les appels de découverte avec les clients. Au lieu de présenter des mood boards statiques, je montre des prototypes interactifs construits dans les 20 minutes avant la réunion. Les clients peuvent cliquer dessus, redimensionner le navigateur, voir comment les éléments bougent. Le feedback est radicalement meilleur parce qu'ils réagissent à quelque chose qui semble réel.
L'avantage de vitesse est difficile à surestimer. Une exploration de layout qui me prenait 2-3 heures dans Figma prend maintenant 5-10 minutes dans Claude Code. Je peux générer quatre approches différentes dans le temps qu'il me fallait pour en construire une. Et celles qui ne marchent pas ? Je supprime le fichier et je passe à autre chose. Aucun attachement émotionnel à un frame Figma soigneusement élaboré.
Conseil de pro : Pour le prototypage à partir de captures d'écran, restez sur des fichiers HTML uniques avec CSS embarqué. Ne demandez pas à Claude Code de mettre en place un framework ou une architecture de composants pour des explorations rapides. Plus la structure de fichiers est simple, plus l'itération est rapide.
C'est là que ça devient intéressant — parce que le troisième cas d'usage est celui où j'ai rencontré les plus grands défis.
Cas d'Usage 3 : Convertir une Landing Page Complète de Figma en Code
C'était le test ambitieux. J'avais une landing page complète designée dans Figma — section hero, grille de fonctionnalités, témoignages, tableau de prix, footer. Des illustrations personnalisées, des arrière-plans en dégradé, toute la production.
J'ai récupéré le lien Figma et j'ai demandé à Claude Code de convertir le design complet en HTML et CSS.
Le premier résultat était... mitigé. La structure était bonne — chaque section existait, le flux du layout correspondait au design, la typographie était juste. Mais les illustrations personnalisées n'avaient pas été traduites (prévisible — l'IA ne peut pas recréer de l'art vectoriel à partir d'une référence de lien), et certains angles de dégradé étaient décalés.
Voici ce que j'ai appris et ce qui a sauvé le projet : n'envoyez pas la page entière d'un coup. Découpez-la en sections.
J'ai relancé le processus en envoyant d'abord à Claude Code le lien de la section hero. Le résultat était nettement plus précis — le dégradé correspondait, la typographie du titre était correcte, le bouton CTA avait le bon padding et border-radius. J'ai validé, puis envoyé la section fonctionnalités, puis les témoignages, construisant la page de manière incrémentale.
Section par section, la landing page a pris forme en environ 45 minutes. Chaque prompt était ciblé, et Claude Code pouvait consacrer toute son attention à réussir une section plutôt qu'à approximer une page entière.
Les illustrations personnalisées constituaient la seule vraie lacune. J'ai fini par les exporter de Figma en SVGs et les déposer manuellement dans le dossier du projet. Claude Code les référençait ensuite correctement dans les prompts suivants. Pas totalement automatisé, mais une étape manuelle mineure dans un processus par ailleurs fluide.
Pour la touche finale, j'ai utilisé des prompts itératifs : "Ajoute un toggle dark mode avec une transition fluide" (2 minutes), "Fais animer les cards de prix à l'apparition au scroll" (90 secondes), "Ajoute un tiroir de navigation mobile" (3 minutes). Chaque ajout s'est intégré proprement parce que Claude Code comprenait la structure du code existant.
Le produit fini — une landing page entièrement responsive, animée, avec dark mode — m'aurait pris 2-3 jours à coder à la main ou 4-5 heures d'allers-retours avec un développeur. Temps total du design Figma au code fonctionnel : environ 2 heures, faux départ inclus.
Parlons Franchement : Ce Que Cet Outil Ne Sait Pas Encore Faire
J'ai brossé un tableau plutôt rose, et c'est parce que les résultats m'ont sincèrement impressionné. Mais je mentirais si je disais que le workflow est sans faille, et vous méritez de connaître les limites avant d'investir du temps dans cette configuration.
Claude Code génère du code front-end. HTML, CSS, JavaScript pour les interactions et les animations. Si votre projet a besoin d'un backend — authentification des utilisateurs, connexions à une base de données, logique côté serveur — vous entrez en territoire développeur. L'outil ne générera pas vos API endpoints ni vos schémas de base de données à partir d'un fichier Figma. Pour les sites marketing et les prototypes interactifs, ça n'a pas d'importance. Pour les applications produit, vous aurez toujours besoin d'un support backend.
Les illustrations personnalisées restent une étape manuelle. Comme je l'ai mentionné, l'art vectoriel complexe doit être exporté de Figma séparément. Claude Code peut référencer des fichiers image dans votre projet, mais il ne peut pas recréer des illustrations dessinées à la main à partir d'une spécification de design. Prévoyez de gérer les assets manuellement.
La précision Figma-vers-code dépend de l'organisation du design. Si votre fichier Figma utilise correctement auto-layout, des calques nommés et des structures de composants, le résultat de Claude Code est remarquablement fidèle. Si votre fichier Figma est un bazar de frames positionnés en absolu avec des noms du type "Frame 247"... le résultat reflète ce chaos. Une bonne hygiène de design dans Figma mène à un meilleur code en sortie. Comme avec les développeurs humains, d'ailleurs.
L'itération est indispensable. Je n'ai jamais obtenu un résultat parfait au premier prompt pour quoi que ce soit au-delà de composants simples. Le workflow c'est : générer, prévisualiser, identifier les écarts, demander des corrections, recommencer. En général 2-3 itérations. C'est toujours radicalement plus rapide que le codage manuel traditionnel, mais n'attendez pas de la magie du premier coup.
La consommation de crédits varie énormément. La génération de composants simples entame à peine votre budget. La conversion d'une landing page complète avec raffinement itératif peut consommer 20-30% de l'allocation quotidienne du plan Pro. Si vous faites ça professionnellement, prévoyez le plan Max et épargnez-vous l'angoisse de voir les crédits fondre en plein projet.
Une prédiction : dans les six prochains mois, la précision Figma-vers-code s'améliorera significativement à mesure que ces modèles progresseront dans la compréhension des relations spatiales et des design tokens. L'écart entre "généré" et "artisanal" est déjà plus petit que ce que la plupart des gens imaginent. Il se réduit rapidement.
Ce Que les Designers Devraient Vraiment Mesurer
Après une semaine d'utilisation de ce workflow sur des projets clients et des expériences personnelles, voici les chiffres.
Traduction de design systems : 15-20 minutes pour un système de tokens complet (typographie, couleurs, ombres, boutons). Équivalent manuel : 4-6 heures.
Prototypage rapide à partir de captures d'écran : 5-10 minutes par exploration de layout. Équivalent manuel : 2-3 heures par maquette.
Conversion de landing page complète : 1,5-2,5 heures itération comprise. Équivalent manuel : 2-3 jours de collaboration designer-développeur.
Allers-retours avec Figma : J'ai renvoyé du code dans Figma 8 fois au cours de la semaine. 6 d'entre elles ont produit des calques propres et éditables sur lesquels mon équipe a pu travailler directement. 2 ont nécessité un léger nettoyage manuel dans Figma. Soit un taux de synchronisation propre de 75%, ce qui a honnêtement dépassé mes attentes.
Délai de retour des feedbacks clients : C'est la métrique qui compte le plus pour moi. Des prototypes interactifs générés le jour même signifiaient que les clients pouvaient donner leur feedback dès la première réunion au lieu d'attendre un deuxième tour de revue. Deux projets sont passés de la phase de découverte à la direction validée en une seule session. Ça ne m'était jamais arrivé avec des maquettes statiques.
Les gains rapides sont évidents — vitesse, coût, vélocité d'itération. Le gain à long terme est plus subtil mais plus important : les designers capables de construire des prototypes interactifs et des front-ends prêts pour la production occupent une position fondamentalement différente dans l'industrie. Vous n'attendez plus que quelqu'un d'autre donne vie à votre vision. Vous la construisez vous-même et vous prouvez qu'elle fonctionne avant que quiconque puisse discuter de sa faisabilité.
Le Workflow qui Fonctionne Vraiment
Après avoir testé toutes les combinaisons imaginables, voici le workflow que j'ai adopté pour les projets de design :
Pour l'exploration et le travail conceptuel : Commencez dans Claude Code. Générez des prototypes rapides à partir de captures d'écran ou de descriptions verbales. Ne touchez pas à Figma tant que vous n'avez pas trouvé une direction qui vous convient. C'est contre-intuitif pour les designers formés aux workflows Figma-d'abord, mais la vitesse de l'exploration par le code change la donne.
Pour les design systems de production : Construisez dans Claude Code, synchronisez avec Figma pour la revue d'équipe. Mettez à jour dans l'un ou l'autre environnement selon les besoins. La synchronisation bidirectionnelle garantit qu'aucun ne devient obsolète.
Pour les landing pages et sites marketing : Designez les sections clés dans Figma pour validation des parties prenantes, puis convertissez en code section par section dans Claude Code. Ajoutez les interactions et animations en code (là où elles fonctionnent réellement), puis renvoyez les versions finales dans Figma pour documentation.
Pour les présentations clients : Montrez toujours la version interactive. Les maquettes statiques sous-vendent votre travail. Une session de 5 minutes sur Claude Code avant une réunion peut transformer un design plat en prototype cliquable qui conclut des affaires.
Le fil conducteur dans tout ça : Claude Code ne remplace pas Figma. Il donne à Figma un partenaire capable de produire. Le design et le code cessent d'être des phases séparées d'un projet et deviennent deux vues de la même chose.
Si on m'avait dit il y a un an que je recommanderais aux designers d'apprendre des commandes de terminal, j'aurais ri. Mais le terminal que j'utilise ne me demande pas d'écrire du JavaScript de zéro. Il me demande ce que je veux construire, et il le construit pendant que je prends les décisions créatives.
Ce n'est pas un workflow de développeur déguisé en designer. C'est ce que les outils de design auraient dû être depuis le début.
🤝 Travaillons Ensemble
Vous cherchez à construire des systèmes d'IA, automatiser des workflows ou faire évoluer votre infrastructure tech ? Ce serait un plaisir de vous accompagner.
- 🔗 Fiverr (développements sur mesure et intégrations) : fiverr.com/s/EgxYmWD
- 🌐 Portfolio : mejba.me
- 🏢 Ramlit Limited (solutions entreprise) : ramlit.com
- 🎨 ColorPark (design et branding) : colorpark.io
- 🛡 xCyberSecurity (services de sécurité) : xcybersecurity.io
