Lors de la dernière Figma Config 2025 (la grande messe annuelle des designers) en mai dernier, Figma a annoncé la sortie de Figma Make, un nouvel outil IA dont la promesse était de transformer vos idées en prototype fonctionnel via du prompt. C’est officiellement accessible depuis juillet, alors forcément chez DG on était hyper impatients et on a testé. On a donc l’ambition avec cet article de vous raconter le fruit de toutes ces expérimentations. Bonne lecture !
Après une tentative un peu ratée d’associer IA et prompt en 2024 avec “Make Designs”, Figma fait son grand retour un an plus tard, sous un visage un peu différent. Cette fois, l’outil n’est plus un “plugin” mais un outil à part entière qui rejoint la galaxie des produits Figma, au même titre que Figma Slides ou Figma Sites. Et il est nécessaire d’avoir une licence “Full” pour y accéder.
Figma Make permet de prototyper une idée sans coder, grâce à l’IA, soit en partant de zéro via un prompt, soit en important un design ou une bibliothèque d’éléments. Après la saisie de votre demande, l’outil génère automatiquement un prototype interactif ainsi que le code associé, prêt à être testé ou déployé. Via une sidebar conversationnelle, on peut ensuite ajuster la proposition. Et une fois satisfait, on a la possibilité de publier et de rendre notre prototype accessible à tous, en ligne via une URL.
Avec l’équipe, on s’est donc demandé comment cet outil pourrait nous aider à améliorer notre quotidien de designer. On a donc cherché à tester plusieurs de ses fonctionnalités pour voir de quoi il était capable. Voici le récit des différents tests qu’on a pu mener.
Première expérimentation : tester la capacité de l'outil à générer rapidement un projet depuis zéro. Pour l’exercice, on lui a demandé de créer un minuteur de type “pomodoro” qui permet d'afficher une todolist.
Prompt utilisé : Créer un minuteur qui permet aussi d'afficher une todolist.
Résultat du test : https://heaps-laurel-59405982.figma.site/
Comme vous pouvez le voir avec le lien ci-dessus, Figma Make permet de publier en ligne très facilement votre prototype. En ce qui concerne le produit généré, le résultat est plutôt convaincant. Le prototype permet d'ajuster le minuteur, de le remettre à zéro, de créer des tâches, de les valider ou de les supprimer... Ça fonctionne bien.
Niveau design, rien d’incroyable. On est sur un style très minimaliste mais l’outil respecte les bonnes pratiques ergonomiques. Lucas Debiais et Mattéo Rossi, 2 développeurs de notre équipe, ont analysé le code et m’ont confié que Figma Make semblait faire appel à la librairie NuxtUI pour les composants et à la librairie Lucide pour les icons. Deux outils de référence dans le milieu UX/UI, qui expliquent en partie pourquoi les composants générés sont de qualité.
Toujours via du prompt, l’outil permet d’ajuster ou modifier le résultat. Je lui ai par exemple demandé de rajouter une alarme à la fin du temps défini. On peut aussi cibler une section et lui demander de faire une modification dans la zone sélectionnée.
Deux expérimentations ont été menées pour tester l’import d’éléments.
On a demandé à Figma Make de reproduire à l’identique la homepage de notre site. Le résultat est en demi-teinte. Dans la plupart de nos tests (on a testé sur plusieurs types de maquettes), l’outil est capable de reprendre assez fidèlement la plupart des composants. Mais on a eu quand même pas mal de bugs : que ce soit au niveau des typos, de certains espacements ou même quelques problèmes de compréhension de tailles de devices avec notamment quelques décalages de sections... L’outil ne prend pas non plus en compte les interactions conçues dans le fichier original.
Petit + à relever : Figma Design permet d’importer facilement la maquette vers Figma Make. Les résultats générés peuvent être aussi rapatriés dans l'interface de design et peuvent ensuite être modifiés.
Résultat du test : https://clump-model-23826232.figma.site
Pour ce test, on a publié la librairie de composants de notre UI Kit DG et on a demandé à la plateforme de nous créer une page “Contact” en se basant sur le style de nos composants. Le processus d’import fonctionne bien mais malheureusement, on n'a pas vraiment eu de résultats à la hauteur de nos attentes. On a testé plusieurs types de librairies, mais l’outil a un peu de mal à bien saisir l’essence des designs importés et a donc beaucoup de difficultés à décliner des composants de façon cohérente. Plus problématique, l’outil semble oublier ses bonnes pratiques UX/UI et génère un résultat très simpliste et parfois un peu défaillant.
Peut-être qu’avec un UI kit très poussé ou même un design system complet, l’outil pourrait être plus efficace, mais pour le moment l’import d’éléments trop volumineux n’est pas possible.
Résultat du test : https://luxury-ardent-22361650.figma.site
Côté interface utilisateur, lorsqu’on lance une génération, l’outil génère directement du code et le rend facilement accessible via un onglet dédié. On peut donc naviguer hyper facilement entre le design et les lignes de code. Autre super fonctionnalité, l’onglet “code” est collaboratif ! Un petit marqueur permet de voir sur quelle ligne de code se trouve votre collaborateur et permet facilement d’inspecter et d’échanger sur un point précis (feature très appréciée par Lucas et Mattéo).
Côté qualité du code, Lucas et Mattéo se rejoignent pour dire qu’on a un code qui fonctionne, avec une structure lisible et plutôt propre. Figma Make utilise Tailwind CSS, une bibliothèque CSS moderne et appréciée par nos devs. Et gros point positif : on peut même lui demander d’adapter le langage selon le besoin. Cependant, ça reste un code peu optimisé, orienté pour du MVP mais pas pour une logique de projet client sur le long terme car difficilement maintenable et scalable.
“Idéal pour tester une idée rapidement, mais pas pour l’intégrer en production. Le code généré (TailwindCSS + React) est fonctionnel mais peu robuste avec l'absence de design tokens, typage minimal et logique React simpliste. Parfait pour un MVP sans besoin de scalabilité ou maintenabilité.” Mattéo
Figma Make est un outil très pratique pour convertir une idée en prototype simple et fonctionnel très rapidement, y compris sur des logiques de parcours. Et cela constitue une opportunité intéressante, car elle nous permettra de prototyper et tester des parcours d'inscription ou de configurateur par exemple.
Pour ce qui est du reste, créer un produit de qualité et original prend beaucoup (beaucoup) de temps. Attention, il n’est pas impossible de créer quelque chose de bien, mais le bénéfice en termes de temps reste très discutable... Pour convaincre sa communauté, Figma a d’ailleurs lancé récemment un concours pour valoriser les concepts les plus créatifs made in Figma Make, avec 50 000$ en jeu pour le gagnant. Il y a de super propositions mais gardez en tête que les 4 lauréats ont utilisées entre 90 et 450 prompts (dans leur version finale). Un processus qui reste donc assez lourd et long. À noter que pendant nos tests, la qualité des propositions avait tendance à se détériorer au fil des itérations.
Figma Make sera donc pour le moment un outil qui va nous permettre de valider rapidement un concept sans écrire de code, un moyen pour nous d’accélérer les itérations et d’améliorer les échanges entre les équipes. La mauvaise qualité du code le rend de toute façon difficilement exploitable au niveau “pro” pour le moment.
Je parlais en introduction du fail de “Make Design” de l’année dernière qui proposait de générer des composants ou des écrans à partir d’un prompt, directement dans Figma Design. Un tweet est tombé début septembre et semble annoncer le retour du prompt directement dans nos fichiers Figma. Création de composants variants, déclinaison de maquettes en dark mode, intégration de Gemini 3 Pro... On a hâte de voir la suite ! L'équipe teste aussi les solutions concurrentes comme Lovable, Base 44 ou UX Pilot... Nous vous en dirons plus très bientôt.
À très vite <3
