Qu'est-ce que Figma Make ?
Figma Make est le générateur d'apps par prompt de Figma dopé à l'IA[1]. Vous décrivez une idée par texte, et/ou ajoutez une frame ou image Figma, et il génère un prototype fonctionnel et interactif en quelques minutes. Zéro compétence en design ou code requise.
Figma Make est intégré au sein de l'écosystème Figma et génère du vrai code applicatif prêt à être publié ou partagé.
Créer un prototype par prompt gratuitement >
Les étapes pour créer une app avec Figma Make
Pour vous montrer comment utiliser Figma Make, je vais créer de zéro une app de tutorat en code pour enfants inspirée de l'interface de Duolingo, tout en utilisant d'autres fonctionnalités IA comme Figma Agent pour booster ma productivité comme un Pro.
Note : Ce tutoriel Figma Make utilise Figma Pro[2]. Mais même si vous utilisez la version limitée de l'offre Freemium de Figma AI, les étapes restent identiques.
Lancer et configurer Figma Make
Dès que vous ouvrez votre dashboard Figma, vous devriez voir la bannière Figma Make en haut sous forme de barre de prompt interactive. Démarrez de là ou via ‘www.figma.com/make’ (ma méthode préférée).
Ici, vous décrivez votre idée d'application en langage naturel. Vous pouvez ajouter des références UI (image, fichier Design MD, PRD, ou lien de frame Figma). Cerise sur le gâteau : vous choisissez le modèle d'IA pour propulser Figma Make (Gemini, GPT, ou Claude). Je pars sur un modèle axé design : Gemini 3.1 PRO.
Faire du web design avec Gemini 3.1 PRO >
Écrire le prompt et uploader les références
Le prompt peut détailler un écran unique ou tout un flow. Laissez l'IA décider du style ou donnez-lui des repères visuels et textuels. Mon conseil pour du "vibe coding" sérieux : soyez le plus détaillé possible.
Je lance le prompt pour l'écran de quiz de mon app (nommée Coddly) en ajoutant des captures d'écrans de Duolingo en référence :
"Crée une app de tutorat en code pour enfants appelée Coddly. Commence par un écran d'accueil/carte affichant un parcours d'apprentissage avec des niveaux verrouillés et déverrouillés. Puis un écran de leçon avec 2 types de questions : (1) sélectionner la bonne image (parmi 4) correspondant à une description de langage, (2) écrire une ligne de code simple en tapant sur des blocs de mots. Termine par un écran de félicitations affichant l'XP gagnée.
Utilise une UI ludique et gamifiée inspirée de l'interface Duolingo ci-jointe. Mais adopte une palette violette et jaune, des cartes arrondies, une mascotte, une barre de progression en haut et une navigation par onglets en bas."
Pendant le traitement, vous voyez son raisonnement en direct. Elle travaille en arrière-plan tant que l'onglet reste ouvert et vous alerte une fois le processus fini. Pas besoin de détailler l'écran de quiz par écrit : l'IA a très bien compris le contexte toute seule.
Génération du prompt : ~4 minutes et 54 crédits IA consommés. Résultat : une app interactive de 4 écrans fluide, avec un rendu ultra fidèle à mon brief.
Édition manuelle et via IA d'un écran
Maintenant, je veux intégrer notre nouvelle mascotte, changer le texte 'Unit 1' pour 'Coddly' et harmoniser l'en-tête sur tous les écrans. C’est là que l'édition bidirectionnelle de Figma Make fait des merveilles :
i) Édition manuelle point & click
J'active l'option Manual Edit sous la barre de chat. Je clique simplement sur l'élément textuel à modifier et je saisis mon texte.
Les modifications manuelles dans Figma Make ne coûtent aucun crédit. Idéal pour les petites retouches ponctuelles.
ii) Édition en demandant à l'IA
Pour des modifications globales ou complexes, le plus rapide est d'interroger directement le chatbot :
“Remplace le logo actuel des écrans de démarrage et de fin par l'image de la mascotte ajoutée dans le prompt. Rends également tous les en-têtes d'écrans identiques à celui de l'écran d'accueil.”
*Note : j'ai généré cette mascotte via l'outil text-to-vector de Figma Weave.
En 4 minutes et 90 crédits, ma mascotte était parfaitement positionnée sur mes 4 écrans.
Comment générer une UI unique avec Lovable >
Ajouter un nouvel écran via prompt
Nos écrans actuels validés, ajoutons une page pour afficher notre série de jours actifs (« Streak »). On le demande simplement en langage naturel, l'outil va calquer le style et la logique des écrans existants (sans avoir besoin de renvoyer la ref Duolingo).
“Ajoute un écran pour le suivi de série et les défis en accord avec le style de l'app. Cet écran doit être accessible via l'icône de cible dans la barre de navigation.”
Fait en 2 min, pour 56 crédits. Le résultat est ultra propre et cohérent.
On se rend vite compte du temps de dev gagné avec Figma Make pour générer des maquettes fonctionnelles reliées par rapport à un process manuel.
J'ai testé les meilleurs outils de Vibe Coding de 2026 >
Tester les interactions en mode preview
Étape finale avant d'attaquer le backend ou de déployer : le test de navigation dans la preview de Figma Make. Cliquez sur l'icône 'play' en haut à droite, une fenêtre s'ouvre.
Les interactions tournent nickel : les flux s'enchaînent bien, les boutons répondent, la validation du quiz fonctionne et les micro-animations sont percutantes. La preview ne consomme aucun crédit.
Vous pouvez partager ce lien de preview à vos collaborateurs ou le publier en tant qu'app hébergée directement via l'option ‘Publish’ de Figma Make.
Tester mon app Coddy sur Figma Make >
Exporter l'app Figma Make en code utilisable
Une fois l'app Coddly et ses 5 écrans validés en preview, place au handoff pour la prod. Figma Make vous propose deux méthodes.
La première : basculez sur l'onglet code et cliquez sur l'icône de téléchargement pour récupérer instantanément un zip des fichiers de code. À l'intérieur, un package React + TypeScript propre avec Tailwind CSS, une config Vite, et chaque écran découpé en composant (Home.tsx, Lesson.tsx, Celebration.tsx, StreakAndChallenges.tsx). Les éléments partagés comme BottomNav et Header sont extraits automatiquement. Les routes sont cablées. Glissez-déposez le tout dans VS Code et ça tourne.
La seconde : l'intégration IDE native à Figma Make avec GitHub et Supabase, pour push sur un repo et brancher une vraie base de données sans quitter votre navigateur.
Il existe aussi un serveur Figma MCP, permettant à des agents de code IA comme Claude Code ou Cursor de lire directement le contexte de votre fichier Figma, rendant l'étape prompt-to-code avec Figma bien plus précise.
De plus, si vous devez injecter du contexte produit en cours de création, les Connecteurs Figma Make intègrent Notion, Slack, Monday.com, Marvin et Sprig.
Comparatif des meilleurs outils de code Figma-to-Code gratuits >
Mes conseils pour maximiser Figma Make
Figma Make est ultra rapide et impressionnant, à l'image de toute la suite Figma AI. Cependant, les crédits filent vite et des contresens de prompt surviennent parfois. C’est le lot de tous les générateurs d'applications IA. Voici mes astuces pour rentabiliser vos sessions :
Soyez ultra précis dès votre premier prompt : Figma Make performe mieux sur sa lancée initiale. Décrivez d'emblée le nombre d'écrans, la logique du flux, le style UI, la palette chromatique et les interactions. Mettre du contexte au départ évite de payer des crédits pour corriger le tir plus tard.
Si vous hésitez ou souhaitez brainstormer, pensez à activer le mode ‘Plan’ plutôt que le mode ‘Build’ de base.
Utilisez l'édition manuelle pour les micro-corrections : Double-cliquer pour modifier du texte ou une couleur à la main coûte 0 crédit. Réservez l'IA pour l'architecture, la création d'écrans ou les flux d'écrans. Ne gâchez pas d'appels IA pour une simple coquille.
Ne demandez qu'une action majeure par prompt : Accumuler les demandes d'édition dans un seul prompt mène souvent à des oublis ou des malentendus. Procédez étape par étape pour garder le contrôle.
Ajustez directement dans l'onglet code : Modifier une classe Tailwind pour un padding ou une couleur est souvent plus rapide manuellement dans le code que via un prompt IA supplémentaire.
Pensez vibe design avant le vibe coding : Le design brut issu de Figma Make a tendance à être un peu générique. Pour allier élégance graphique, rapidité et efficacité, je recommande de d'abord maquetter vos écrans avec Banani AI avant de coder.
Voici par exemple le design des mêmes écrans généré avec Banani sur la base des mêmes prompts.
Voir & éditer le design de Coddy par Banani AI >
Associer Figma Make aux autres IA Figma
Figma Make s'inscrit au sein d'un écosystème Figma AI complet. Associez-le à d'autres outils pour un workflow produit de bout en bout : commencez par Figma Weave pour générer vos ressources UI, assemblez-les puis peaufinez la mise en page grâce à Figma Agent. Une fois le design validé, importez le tout dans Figma Make pour générer le code et lier le backend. Enfin, Figma Sites vous permet de publier votre app en ligne en un clic.
Néanmoins, cette stack d'IA Figma reste en bêta et consomme beaucoup de crédits. Si vous cherchez un outil design-to-code dédié hautement intégré à Figma, testez Banani AI.
FAQ sur Figma Make AI
Quel modèle d'IA alimente Figma Make ?
Figma Make supporte plusieurs LLM : Claude Sonnet 4.6 & Opus, Gemini 3 Flash & 3.1 Pro, ainsi que GPT-5.5. Vous pouvez choisir votre moteur préféré avant chaque génération.
Quel est le langage de programmation généré ?
Figma Make génère une base en React et TypeScript, stylisée avec Tailwind CSS. Son code propre prend la forme d'un projet basé sur Vite prêt pour le développement.
Comment Figma AI transcrit-il le design en code ?
Figma Make analyse votre prompt et vos éventuelles références visuelles pour générer, via le LLM sélectionné, des composants de code précis fidèles à l'ergonomie, au style et aux interactions requises.
Quelle différence entre Figma Make et Figma Sites ?
Figma Make crée des applications web dynamiques et codées à partir de prompts pour concevoir des prototypes interactifs. De son côté, Figma Sites publie directement vos maquettes Figma sous forme de sites web statiques responsifs.
Quelle est la meilleure alternative à Figma Make pour designer des apps ?
Pour du vibe coding full-stack, Lovable et Bolt.new sont de redoutables choix. En revanche, pour du prototypage centré sur l'UI, Banani AI reste la meilleure alternative.
Références
[1] https://www.figma.com/make
[2] https://help.figma.com/hc/en-us/articles/31304412302231-Explore-Figma-Make
