Figma Make : avis, tutoriel et limites à connaître

Figma Make donne le meilleur de lui-même quand votre idée de produit s’appuie déjà sur une frame Figma ou un design system. Il peut créer des applications web fonctionnelles avec deux options de backend documentées. Mais le backend choisi détermine si vous pourrez ensuite poursuivre le développement via GitHub. Choisissez Make pour valider une expérience conçue en amont ; décidez de la suite du développement avant de lui confier des données clients.

Fonctionnalités publiques et quotas de crédits IA vérifiés le 15 octobre 2026. Cet avis examine la documentation produit en ligne, la continuité des workflows et les contraintes de passage de relais. Le tutoriel propose un cas concret à reproduire : il ne repose pas sur un test en session connectée et ne prétend pas mesurer la qualité des résultats générés.

Qu’est-ce que Figma Make ?

Figma Make transforme des prompts et des références de design en une interface dont le code est modifiable. On peut ainsi essayer une recherche, remplir un formulaire ou suivre un parcours produit, au-delà de la simple consultation d’une maquette statique. Make permet aussi de publier des applications web et de les relier à des données enregistrées. Figma Design reste l’espace de conception des interfaces ; Figma Sites est un outil distinct de création de sites web. Make sert à décrire le comportement attendu du design, puis à le générer. Rendez-vous sur Figma Make ; son guide de création détaille le passage du prompt à l’aperçu.

À qui s’adresse Figma Make et quelles alternatives choisir ?

Figma Make est particulièrement pertinent pour un designer ou un product manager qui part d’une interface validée, de composants partagés et d’une équipe habituée à commenter le travail dans Figma. Un fondateur avec une idée encore vague peut aussi l’utiliser, mais partir d’un prompt sans autre contexte fait perdre une bonne partie de cet avantage.

Le comparatif ci-dessous repose sur les éléments de départ, la personne qui reprendra le travail et le mode de déploiement. Il évalue les workflows, sans classer les outils selon l’attrait visuel de leur première génération.

Ces différences de backend et de reprise du code sont documentées dans le guide backend de Figma, Lovable Cloud, le guide des applications full-stack de v0 et la présentation de Claude Design.

Lovable : quand l’application passe avant le fichier de design

Lovable est un outil de création d’applications qui réunit hébergement géré, base de données, authentification et stockage. C’est une option pertinente pour un fondateur dont le besoin initial est : « Les clients doivent pouvoir envoyer des demandes et l’équipe doit pouvoir les traiter. » Son intégration GitHub permet de récupérer les modifications de la branche active du dépôt, un point essentiel lorsqu’un développeur rejoint le projet.

La contrepartie concerne la responsabilité opérationnelle. La documentation Cloud de Lovable précise que le passage à votre propre Supabase exige d’exporter les données et de reconstruire le schéma dans un nouveau projet. Choisissez-le si cette infrastructure gérée convient à votre lancement, puis déterminez qui prendra en charge une éventuelle migration.

v0 by Vercel : quand la suite du travail se fera dans le code

v0 by Vercel crée des applications full-stack et utilise Next.js par défaut, un framework web qui associe le code de l’interface aux fonctionnalités côté serveur. Sa documentation couvre les endpoints backend et les connexions aux bases de données. Il permet aussi d’importer du contexte Figma : exploiter un design Figma n’est donc pas un avantage exclusif de Make.

Privilégiez v0 si un développeur doit maintenir l’application obtenue et souhaite partir de ce framework. Évitez d’en faire le choix par défaut si le livrable immédiat est une revue de design et que personne n’est prêt à prendre la responsabilité du code. Tout dépend de ce qui doit se passer après la validation de l’aperçu.

Claude Design : pour explorer au-delà des interfaces produit

Claude Design crée des maquettes et d’autres supports visuels, peut exploiter le contexte d’un design system à partir du code et de fichiers de design, et se connecte à Claude Code. Sa page produit actuelle mentionne aussi les exports PDF, PowerPoint et HTML. Cette polyvalence convient à un fondateur qui a besoin d’un prototype et de supports pour le présenter.

Choisissez-le si le brief créatif se construit dans la conversation et que la suite du travail se fera dans Claude ou sur un livrable exporté. Pour une équipe dont les revues s’organisent autour de frames Figma existantes, Make fournit un contexte de départ plus direct. Un export HTML ne règle pas, à lui seul, la question de la maintenance des comptes, des données et du déploiement.

Pour élargir votre sélection, consultez notre liste d’outils de design IA.

Comment utiliser Figma Make ?

Figma Make est surtout utile lorsque le premier prompt décrit une interaction bien délimitée. « Crée ma startup » laisse au modèle le soin d’inventer à la fois le produit et son interface. Un parcours de réservation déjà conçu vous donne une base concrète à valider ou à corriger.

Tutoriel Figma Make : transformer une frame de réservation en prototype

Prenons un exemple de brief : un visiteur choisit une prestation, sélectionne un créneau disponible et envoie une demande. Commencez avec du contenu fictif, sans comptes clients. Il s’agit d’abord de vérifier que le parcours est compréhensible, avant de décider comment enregistrer les réservations.

1. 1

   Préparer la frame

   Sélectionnez la frame Figma Design qui contient l’interface de réservation. Prévoyez des libellés de boutons explicites ainsi que les états sélectionné, indisponible et en erreur que le prototype doit représenter. Copiez la frame elle-même. Figma recommande les frames structurées plutôt que les captures d’écran lorsque le modèle a besoin d’un contexte de design précis.

2. 2

   Créer le fichier Make et joindre la référence

   Dans le navigateur de fichiers, ouvrez Drafts et cliquez sur Make. Collez la frame copiée dans le prompt. Vous pouvez aussi utiliser Add context pour joindre un lien vers un design ou une frame dans la fenêtre d’ajout de pièces jointes. Fournissez la frame comme contexte au lieu de compter sur une simple URL dans la conversation.

3. 3

   Décrire le comportement et ses limites

   Demandez à Make de conserver le design joint, de permettre au visiteur de choisir une prestation et un créneau disponible, de valider les champs obligatoires et d’afficher une confirmation. Demandez explicitement des données fictives et aucun backend pour cette première version. Cliquez sur Send pour générer l’aperçu.

4. 4

   Parcourir les cas d’échec

   Essayez d’envoyer le formulaire sans remplir un champ obligatoire, de sélectionner un créneau indisponible, de changer de prestation après avoir choisi un horaire et de revenir en arrière depuis la confirmation. Vérifiez si l’interface explique ce qui s’est passé. Un bouton qui réagit n’est utile que si sa réaction est correcte.

5. 5

   Corriger la zone précise qui pose problème

   Dans un nouveau fichier Make, utilisez Edit pour sélectionner un élément, modifier ses propriétés et cliquer sur Apply, ou annotez un défaut précis. Séparez la correction d’un comportement d’une refonte visuelle plus large : vous pourrez ainsi vérifier si le problème visé a bien été résolu.

Ces commandes suivent les instructions de création, le guide des pièces jointes et le guide de modification de Figma. Les anciens fichiers Make peuvent conserver l’interface de modification précédente.

Exemples de prompts Figma Make pour ce même brief

Prompt initial : « Utilise la frame de réservation jointe comme référence visuelle. Crée le parcours qui permet au visiteur de choisir une prestation et un créneau disponible, de saisir les coordonnées obligatoires et de voir une confirmation. Utilise du contenu fictif. Conserve la hiérarchie de la frame et le style des composants. Ne connecte pas encore de backend. Explique ce qui est simulé. »

Prompt de correction : « Quand la prestation sélectionnée change, efface le créneau précédemment choisi et impose une nouvelle sélection. Conserve la mise en page et le style visuel. Affiche une explication directement à côté du sélecteur de créneau. »

Il s’agit d’une spécification avant et après correction, pas du compte rendu d’un résultat généré. Si la première version conserve un créneau incompatible après le changement de prestation, la correction vise un problème de gestion d’état : l’application doit actualiser les informations qu’elle mémorise lorsqu’un choix antérieur change.

Les critères de qualité sont tout aussi concrets. Vérifiez les retours à la ligne, le focus au clavier, les états indisponibles, les noms de prestations longs et la mise en page sur un écran étroit. Une belle capture d’écran ne permet de valider aucun de ces points. Le prototype devient utile quand la personne qui l’évalue peut accomplir la tâche et comprendre pourquoi une action est bloquée.

Figma Make et le design system : préserver plus que les couleurs

Figma Make gagne en intérêt lorsqu’il s’appuie sur les composants et les règles de votre système, au lieu d’imiter seulement un écran terminé. Un design token est une valeur nommée, par exemple pour une couleur ou un espacement ; un composant est un élément d’interface réutilisable au comportement défini. Reproduire un token ne signifie pas automatiquement utiliser le bon composant.

Les kits Figma Make

Les kits Figma Make peuvent réunir des packages npm, des styles et variables de bibliothèques publiées, ainsi que des consignes écrites. Un package npm distribue du code réutilisable : le kit peut donc apporter du contexte d’implémentation en plus des références visuelles. Le parcours documenté est Settings → Create a kit → Assemble your kit. Il faut ensuite ajouter les ressources, rédiger les consignes, tester le kit et le publier pour les collègues. Les kits nécessitent une licence Full dans une offre payante. Guide des kits Make de Figma

Dans la zone de prompt de l’application, cliquez sur Select a Make kit et choisissez le kit publié avant de générer le parcours. Pour notre brief de réservation, incluez les composants validés de bouton, de champ de saisie et de sélecteur de créneau, s’ils existent. Précisez ensuite leurs règles d’utilisation : le bouton principal envoie une demande valide ; les créneaux indisponibles restent identifiables mais ne peuvent pas être sélectionnés ; les messages de validation restent à côté du champ à corriger.

Ces règles comptent davantage qu’une consigne comme « respecte l’identité de marque ». Un rectangle violet généré peut ressembler à votre bouton principal sans reprendre son état désactivé, son indicateur de focus ou son libellé accessible. Vérifiez l’usage des composants et la logique des interactions, au-delà de la ressemblance de la couleur d’accent.

Un travail de préparation est nécessaire. Les exigences de Figma pour les packages précisent que le package doit fonctionner dans l’environnement de build sans dépendre de la présence du reste de l’espace de travail. Faites-le préparer par un développeur si vos composants reposent aujourd’hui sur des modules privés dispersés dans un dépôt plus vaste.

L’extraction d’une bibliothèque ne préserve pas intégralement les tokens. Le guide des kits Make indique qu’un sous-ensemble de variables est extrait sous forme de CSS simplifié, avec des valeurs brutes ; la syntaxe exacte des variables n’est pas conservée. Documentez les règles d’état dans les consignes et examinez les styles générés avant de considérer que le prototype reprend votre système à l’identique.

Les templates Figma Make

Les templates Figma Make servent à réutiliser un même point de départ, tandis qu’un kit fournit le contexte réutilisable du design system. Créez une base de réservation validée, puis laissez vos collègues en tirer des variantes. Figma présente les templates parmi ses autres options de partage et de réutilisation.

Utilisez les consignes pour les règles permanentes du projet et les skills personnalisés pour une revue reproductible que vous déclenchez explicitement. Pour les équipes disposant d’un système établi, notre pack de skills personnalisés Figma Make pour design system fournit une structure de départ. Adaptez les instructions à vos tokens et composants ; la revue exige toujours une décision humaine.

Créer une application web qui conserve les données

Figma Make documente désormais Payload, un backend applicatif et système de gestion de contenu, ainsi que Supabase, un service de base de données et de backend. Le backend conserve les informations et exécute des opérations derrière l’interface visible. C’est ce qui distingue l’affichage d’une confirmation de réservation d’une demande que l’équipe peut retrouver après la fermeture du navigateur par le visiteur.

Avec Payload, vous décrivez l’application, confirmez la création du backend et gérez les enregistrements dans l’onglet CMS, l’écran de gestion de contenu. Figma héberge l’application et les données. Supabase se connecte séparément via Make settings → Integrations → Supabase ; sa configuration dans Make utilise des stockages clé-valeur, de simples entrées enregistrées, au lieu de créer un schéma de base de données complet avec des tables liées. Documentation backend de Figma

Poursuivez le même brief avec ce prompt : « Ajoute un backend Payload pour les prestations et les demandes de rendez-vous. Les visiteurs peuvent envoyer des demandes ; l’équipe peut les gérer. Sépare les informations publiques sur les prestations des coordonnées privées. Explique les règles d’accès avant de les implémenter. »

Examinez ensuite une demande enregistrée dans l’interface d’administration. Actualisez le parcours visiteur et vérifiez qu’il lit bien les données enregistrées prévues. Contrôlez si un visiteur non authentifié peut accéder aux enregistrements réservés à l’équipe. Ce sont des vérifications à effectuer pour valider votre implémentation, pas des garanties que la génération les satisfait déjà.

Demander un rendez-vous et garantir une réservation sont deux produits différents. Une demande peut attendre la validation de l’équipe. Une réservation exige des règles pour gérer les demandes concurrentes, les annulations et les changements de disponibilité. Si l’activité impose de garantir un créneau, faites intervenir un développeur avant de considérer le workflow comme terminé.

L’avantage concret est de pouvoir valider ensemble l’interface et le travail de gestion des enregistrements. La limite tient aux responsabilités : quelqu’un doit définir le modèle de données, les permissions et la procédure de récupération. Un écran d’administration généré ne prend pas ces décisions métier à votre place.

Publier l’expérience et désigner qui en prendra la suite

Figma Make permet de publier directement, sans passer par Figma Sites. Dans Make, cliquez sur Publish, définissez le titre et publiez l’application. Une URL dédiée est fournie et vous pouvez configurer un domaine personnalisé. Les modifications ultérieures nécessitent de mettre à jour la version publiée. Guide de publication de Make

Pour le prototype de réservation, déterminez si le public visé est constitué de personnes chargées de l’évaluer ou de clients potentiels. Les premières ont besoin de savoir clairement ce qui est simulé. Les clients ont besoin d’un service complet : une confirmation explicite, un moyen de corriger leurs erreurs et une personne qui répond aux demandes envoyées. Effectuez la dernière revue sur l’URL déployée pour examiner ce que les visiteurs voient réellement.

Quand faut-il préférer Figma Sites pour publier ?

Figma Sites convient à un site marketing géré depuis un éditeur visuel. Le parcours documenté consiste à copier une frame Figma Design dans un breakpoint Sites, à ajuster les mises en page responsive, puis à publier. Un breakpoint correspond à une mise en page prévue pour une plage de tailles de fenêtre donnée. Cette approche est utile lorsque l’essentiel du travail consiste à organiser et à actualiser des pages. Transférer des designs dans Figma Sites

Utilisez Make pour l’interaction de réservation et envisagez Sites pour le site marketing qui l’entoure si ce mode d’édition convient à la personne qui le gère. Ne supposez pas que les deux produits offrent les mêmes possibilités de sortie : la documentation de publication de Sites indique que le code du site ne peut actuellement pas être exporté pour une publication externe.

Que transmettre à l’équipe de développement ?

L’éditeur de code de Figma Make permet un téléchargement au format ZIP. Sa documentation actuelle sur le workflow Git décrit aussi le clonage d’un dépôt GitHub autorisé, le travail dans des branches et la création d’une pull request. Une pull request permet à l’équipe de développement de relire les modifications avant leur intégration dans l’application partagée. Ces parcours de départ sont distincts et ont des exigences différentes.

Transmettez avec le code le comportement attendu, les fonctionnalités encore simulées, les responsabilités sur les données, les règles d’accès et les défauts non résolus. Pour le parcours de réservation, précisez explicitement si un rendez-vous est une demande ou une réservation confirmée. Sinon, les développeurs risquent d’hériter d’une implémentation soignée de la mauvaise règle métier.

Quels crédits IA pour Figma Make ?

Pour travailler en équipe avec un design system, choisissez une licence Full de l’offre Professional : elle comprend 3 000 crédits IA/mois, contre 500/mois avec une limite de 150/jour pour Starter. Make puise dans le quota IA partagé à des taux variables selon le modèle, la tâche et le contexte. Les crédits de la licence sont réinitialisés chaque mois, sans report. Consultez le fonctionnement des crédits Figma AI et les tarifs Figma avant de vous engager : un quota ne garantit pas un nombre donné de prototypes terminés.

Les limites qui doivent peser dans votre choix

Les limites de Figma Make dépendent du workflow choisi. « Il ne peut pas créer de backend » et « il prend en charge tout le produit » sont deux mauvaises bases pour décider d’un achat.

Une application hébergée avec Payload exclut actuellement la poursuite via Git

La documentation du backend Payload de Figma Make indique que l’intégration GitHub et les workflows dans une base de code locale ne sont pas encore disponibles pour les applications utilisant Payload. Elle précise aussi que l’hébergement Payload se situe actuellement dans l’est des États-Unis. Faites-en des critères de sélection, plutôt que des détails à découvrir une fois l’application construite. Limites de Payload

Si les développeurs doivent reprendre immédiatement le même projet via leur dépôt, validez un parcours compatible avant de choisir Payload. L’annonce d’une fonctionnalité à venir ne répond pas à un passage de relais prévu maintenant.

De Figma Make à Figma Design : un aller-retour sans synchronisation automatique

L’action standard Copy design de Figma Make crée des calques modifiables à partir de l’aperçu courant. Ces calques sont statiques, déconnectés du fichier Make et sans lien automatique avec le design system, même si des variables disponibles peuvent être associées. Documentation de Copy design

Utilisez cette copie pour la critique et l’exploration visuelle. Si vous modifiez le sélecteur de créneau sur le canevas, décidez explicitement comment reporter ce changement dans l’application fonctionnelle. Sinon, la revue de design et le prototype risquent de décrire des produits différents sans que personne ne le remarque.

Les fonctionnalités Git ne sont pas interchangeables

La fonctionnalité distincte Push to GitHub de Figma Make crée son propre dépôt et envoie les modifications dans un seul sens ; les envois suivants peuvent écraser les modifications effectuées hors de Make. Cette limite ne doit pas être attribuée au workflow plus récent de clonage de dépôt décrit plus haut.

Le workflow dans une base de code locale est encore une autre option. Il est documenté comme une bêta fermée à accès limité, qui utilise l’application de bureau Figma Beta pour Mac et exige un compte admis au programme. Il nécessite de configurer le dépôt. Confirmez le parcours accessible à votre équipe avant de promettre que les designers pourront modifier directement l’application existante en production.

Le mot de passe de l’application publiée ne protège pas tous les liens de partage

La protection par mot de passe de Figma Make s’applique à l’application publiée ; l’aperçu dépend des permissions de partage du fichier. Vérifiez les deux avant d’envoyer un concept confidentiel hors de l’équipe. Publier et partager relèvent de décisions d’accès distinctes. Paramètres de publication et d’accès

Le comportement généré exige toujours des critères de validation

Figma Make peut donner l’impression qu’un parcours est terminé alors que les cas métier difficiles restent à résoudre. Pour l’exemple de réservation, examinez les demandes concurrentes, les rendez-vous annulés, les commandes inaccessibles et les confirmations trompeuses. Ce sont des points à vérifier, pas des défauts constatés lors d’un test dans cet article.

Une définition utile de « prêt à être livré » serait : « L’utilisateur visé peut accomplir sa tâche et le responsable du produit peut en assurer la suite. » Une maquette réaliste ne suffit à remplir aucune de ces conditions.

Notre avis sur Figma Make : valider le design, puis organiser la suite

Figma Make est un choix solide pour les fondateurs, product managers et designers qui disposent déjà de ressources Figma et veulent évaluer une expérience produit fonctionnelle. Ses kits, ses modifications ciblées et ses options de backend permettent de dépasser les discussions sur l’apparence d’un écran.

Le choix change si la personne qui prend le relais ne peut pas poursuivre le travail avec le workflow retenu. Une application Payload hébergée peut convenir à la gestion de contenu ou de demandes, mais sa limite actuelle concernant Git compte si l’équipe de développement doit reprendre le projet immédiatement. Privilégiez Lovable pour démarrer par une application gérée avec synchronisation Git, v0 pour une approche Next.js portée par un développeur, ou Claude Design pour une exploration visuelle plus large suivie d’un travail dans Claude.

La semaine prochaine, prenez une frame représentative, construisez l’interaction complète la plus simple possible et demandez à son futur responsable d’examiner comment poursuivre le travail. Validez ensemble le prototype et son passage de relais. Ce jalon est plus utile que la génération d’écrans supplémentaires.

Questions fréquentes

Que peut-on créer avec Figma ?

Pour ce workflow, utilisez Figma Design pour concevoir l’interface, Make pour générer des interactions et des applications fonctionnelles, et Sites si vous cherchez un outil visuel de création de sites web. Choisissez le livrable avant l’outil.

Comment créer un nouveau fichier dans Figma ?

Pour un fichier Make, ouvrez Drafts dans le navigateur de fichiers et cliquez sur Make. Joignez votre frame et décrivez le comportement souhaité. Le tutoriel ci-dessus suit le parcours de création documenté par Figma.

Figma est-il un outil UI ou UX ?

Les deux notions s’appliquent à ce travail. L’UI concerne l’interface que les utilisateurs voient et manipulent ; l’UX concerne leur expérience lorsqu’ils accomplissent une tâche. Make peut vous aider à examiner un parcours fonctionnel, mais la recherche et le jugement nécessaires pour déterminer s’il répond au bon problème restent de votre ressort.

Quelle est la différence entre Figma Design et Figma Make ?

Figma Design est le canevas de conception ; Make génère une interface fonctionnelle reposant sur du code. L’action standard Copy design ramène une vue statique sous forme de calques modifiables, sans synchroniser automatiquement les changements ultérieurs.

Existe-t-il mieux que Figma Make ?

Pour certains usages, oui. Lovable est une alternative solide pour une application et un backend gérés, v0 pour un workflow de développement orienté Next.js, et Claude Design pour l’exploration visuelle sur plusieurs formats. Le principal atout de Make est de partir de vos designs et de votre design system Figma existants.

Les utilisateurs quittent-ils Figma ?

Cet avis ne mesure pas les départs de clients. Des plaintes individuelles ou des exemples de changement d’outil ne permettent pas d’établir une tendance générale. Pour décider, identifiez précisément la tâche de conception ou de passage de relais que votre workflow actuel ne permet pas de mener à bien.

Pourquoi Figma baisse-t-il ?

La question peut concerner le cours de son action, son adoption ou l’opinion de quelqu’un sur le produit. Aucun de ces éléments ne permet de savoir si Make convient à votre workflow. Cet avis ne formule aucune affirmation sur les performances de marché ; il évalue les parcours documentés de conception, de backend et de passage de relais.

Qui est le principal concurrent de Figma ?

Aucun concurrent unique ne couvre tous les cas d’usage de Make. Pour ce choix d’outil, retenez Lovable si vous partez de l’application, v0 pour poursuivre dans le code et Claude Design pour un travail visuel par conversation. Comparez-les à partir de la tâche que vous devez réellement terminer.

Canva ou Figma : lequel choisir ?

Pour le workflow d’interface produit traité ici, choisissez Figma. Si vous avez besoin de supports marketing, utilisez le comparatif plus large des outils de design IA cité plus haut pour choisir selon le livrable. Cet avis ne compare pas la qualité des résultats de Canva à celle de Figma.

Figma Make est-il gratuit ?

Vous pouvez essayer Make avec Starter. Les restrictions documentées comprennent l’absence de contexte de styles provenant des bibliothèques d’équipe et une publication sur le Web public liée à une publication dans la Figma Community. Pour un travail produit confidentiel en équipe, évaluez le workflow payant avec licence Full. Consultez les conditions d’accès à Figma Make et les quotas de crédits indiqués plus haut.

Utilisez la checklist d’audit des workflows métier avec l’IA pour définir le responsable du prototype, les données nécessaires et le passage de relais avant de vous engager dans ce workflow.