8 astuces indispensables pour bien utiliser Figma Make

Lors de Config 2025, nous avons présenté Figma Make, notre nouvelle fonctionnalité prompt-to-app qui permet aux designers et aux équipes produit de passer de l'idée au prototype fonctionnel en quelques prompts seulement. Les designer advocates, les designers et les product managers de Figma ont passé des mois à explorer en profondeur Figma Make, à en tester les fonctionnalités et en repousser les limites. À partir de cette expérience de première main, nous avons tiré huit conseils concrets et bonnes pratiques, accompagnés d'exemples de prompts pour vous inspirer et vous aider à exploiter tout le potentiel de Figma Make.

1. Mettez beaucoup de détails dans votre premier prompt

Plus vous mettez de détails sur votre design dans le premier prompt, moins vous aurez besoin d'échanges pour obtenir le résultat souhaité. « Il est préférable que la première génération soit aussi proche que possible de votre vision, et que seuls quelques petits ajustements soient nécessaires ensuite. Corriger un résultat avec plusieurs prompts prend beaucoup plus de temps », explique Ana Boyer, designer advocate.

Voici quelques détails clés à inclure dans votre premier prompt :

• La tâche : ce que Figma Make doit faire
• Le contexte : où s’intègre ce parcours ou cet écran
• Les éléments clés du design : les caractéristiques importantes que Figma Make devrait intégrer
• Les comportements attendus : comment réagissent ces éléments lors de l'interaction ?
• Les contraintes : les éléments tels que l'appareil, la mise en page ou le style visuel.

Cette stratégie nécessite non seulement d’avoir une vision claire du parcours de votre produit et de ses spécifications avant de solliciter Figma Make, mais aussi d'expliciter ce contexte avec les bons prompts. Vous pouvez également utiliser des assistants IA pour affiner vos prompts. Ils vous fourniront des conseils détaillés et des extraits de code prêts à l'emploi à coller directement dans votre Make pour obtenir des effets sophistiqués.

Astuce en plus : si votre prompt initial ne vous donne pas le résultat souhaité, essayez de le formuler différemment. Par exemple, plutôt que de demander aligne verticalement ces deux éléments, essayez de reformuler la demande en déplace cet élément de 20 pixels vers le bas ou ajoute 16px d'espace entre ces boutons.

En pratique

Greg Huntoon, designer advocate chez Figma, a utilisé différentes approches jusqu’à arriver à un prompt qui a donné lieu à une V1 fonctionnelle pour son kit de visualisation des effets de souris. Son prompt le plus réussi contenait :

• La présentation du projet
• Les spécifications de la plateforme
• L'objectif et le cas d'usage
• La liste des fonctionnalités essentielles
• Le style de design souhaité
• Les spécifications techniques

Greg a également inclus cette première étape explicite dans son prompt : Première étape : Construis le composant de superposition de grille de base avec des dimensions ajustables et des états de survol de substitution.

2. Nettoyez vos fichiers de design avant de les importer dans Figma Make

Bien que Figma Make puisse créer des designs à partir de rien (0→1), il est également très efficace pour transformer vos designs Figma existants en prototypes interactifs (1→1). Pour aider Figma Make à générer le meilleur résultat possible, consacrez du temps à l’organisation et au nettoyage des fichiers, sans oublier de mettre en ordre les frames que vous prévoyez de copier-coller dans la boîte de dialogue. Plus le design que vous fournissez à Make est propre, meilleur sera votre résultat. L’utilisation des bonnes contraintes de frame et des paramètres d’auto layout est le paramètre le plus important pour garantir que vos fichiers de design passeront bien dans Figma Make, mais nommer les calques en fonction de leur contenu ou de leur objectif peut également aider.

Vous pouvez utiliser certaines des fonctionnalités IA existantes de Figma Design, telles que Suggérer un auto layout et Renommer les calques avec l’IA, ou même des plugins comme Clean Document pour rapidement nettoyer vos frames en vue de leur import dans Figma Make.

Astuce en plus : Même avec la meilleure configuration de calques possible, Figma Make peut parfois traduire les fichiers de design de manière un peu trop littérale selon ses propres contraintes. Si votre design dépasse les limites de l'aperçu, utilisez un prompt tel que : Adapte ce design à la taille de mon écran et rends-le responsive. Ou, si vous avez des dimensions spécifiques en tête, essayez ce prompt par exemple : Passe ce design en version mobile.

En pratique

Holly Li, product manager chez Figma, a réussi à créer la micro-interaction du lecteur de musique ci-dessous en un seul prompt, grâce à une solide structure d'auto layout dans Figma Design.

Voici son prompt : Rends ce lecteur CD interactif, le CD doit tourner lorsque je lance une piste. Merci !

3. Découpez les projets complexes en étapes gérables

Même avec un bon prompt de départ, les projets complexes peuvent nécessiter de nombreux prompts supplémentaires. Découper un projet en étapes plus petites et ciblées donne de meilleurs résultats qu'essayer de tout résoudre d'un coup. « Plus le périmètre est restreint, plus le LLM peut être détaillé », affirme la designer produit Tammy Taabassum. « Les performances de Figma Make dépendent de la taille ou de la complexité de votre demande, ainsi que de la spécificité de votre langage. »

Un premier prompt fourni et détaillé vous aidera à établir une base de départ, à laquelle vous pourrez progressivement apporter de petits changements. Adopter cette approche incrémentale après votre premier prompt vous permet de créer petit à petit des interfaces complexes, de construire des parcours de plusieurs pages frame par frame, et de garder le contrôle sur l’orientation générale du design.

Astuce en plus : Poussez cette approche plus loin en demandant explicitement à Figma Make de créer des dossiers de code distincts pour chaque élément. Ce faisant, vous améliorerez l'organisation du code, assurerez la maintenabilité sur plusieurs prompts, et isolerez les erreurs potentielles dans vos projets les plus ambitieux.

En pratique

Pour créer un tableau de bord financier entièrement fonctionnel avec parcours d’onboarding, la testeuse alpha Antonella Rodriguez a fini par utiliser plus de 150 prompts. Elle a commencé par donner une description générale des fonctionnalités principales et de la mise en page souhaitée ainsi qu'une référence visuelle, puis a nettoyé le premier résultat et s'est penchée sur le contenu de chaque page pour les remplir élément après élément.

Quelques-uns des prompts utilisés par Antonella :

• Mets des Post-it sur la page du journal pour ajouter des notes.
• Ajoute un tableau avec la catégorie, le type de dépense, le montant en dollars, le montant en pesos, des notes et la date sur la page Finances.
• Ajoute une case à cocher pour indiquer le type de devise utilisé.

Afin de créer un univers interactif en 3D pour la keynote de Config London de cette année, la product designer Tammy Taabassum a travaillé avec plusieurs éléments différents. Après un premier prompt pour créer un explorateur de Londres en 3D avec des monuments célèbres, Tammy a demandé à Figma Make de mettre chaque monument en 3D (Big Ben, London Eye, Tower Bridge, etc.) dans des fichiers codés distincts. Cela a permis d’affiner plus facilement et plus rapidement les composants individuels, sans pour autant affecter l’ensemble de l’environnement du fichier.

Le prompt de Tammy :Peux-tu déplacer le code de Big Ben dans un nouveau fichier ?

4. Exploitez vos propres composants pour garantir la cohérence visuelle

Lorsque vous travaillez dans Figma Make, copier un composant ou une frame avec plusieurs composants peut s'avérer très utile. Les composants de votre bibliothèque, déjà équipés de l’auto layout et d’une dénomination de calque cohérente, vont probablement bien se traduire dans votre Make.

Vous pouvez également coller des composants dans la boîte de dialogue de Figma Make comme point de référence visuelle pour le design à créer. S'il a une idée de l’apparence de certaines interfaces, Figma Make peut adapter son style et ses espacements, en suivant efficacement les règles de votre design system et sans avoir besoin d’explications ou de clarifications supplémentaires.

Astuce en plus : la fonctionnalité Pointer et modifier (Point and edit) de Figma Make est un excellent moyen de remplacer les composants génériques de votre V1 par des éléments d'UI spécifiques provenant de vos bibliothèques. Sélectionnez un élément dans l'aperçu, collez votre propre composant dans la boîte de dialogue, puis saisissez le prompt suivant : Remplace ce composant par ce design.

En pratique

L’équipe des designer advocates a créé l’application de productivité ci-dessous, construite à partir de composants de la dernière version du Material 3 Design Kit. Pour créer cette application, ils ont collé deux composants du fichier du design system dans Figma Make, suivis de ce prompt :

Développe une application de productivité qui aidera les utilisateurs à gérer et hiérarchiser leurs tâches, à rester à jour dans leur calendrier et à conserver des notes écrites et vocales. Utilise le composant de navigation joint, en adaptant son contenu selon les besoins. Pour l'onglet calendrier, utilise le composant calendrier joint. Le reste des pages doit correspondre visuellement au style de ces composants.

L’équipe a ensuite amélioré la V1 de base en sélectionnant des composants avec la fonctionnalité Pointer et modifier, puis a demandé à Figma Make de les remplacer par des variantes du design system Material 3.

5. Faites vos ajustements visuels avec l'outil Pointer et modifier

Avec l'outil Pointer et modifier, vous pouvez également effectuer des ajustements rapides et basiques, comme un changement de couleur ou de police, en pointant un élément, en cliquant dessus et en le modifiant à l'aide de la barre d'outils ou d'un prompt. Cette manipulation directe vous permet d'apporter immédiatement et en toute simplicité des modifications aux propriétés visuelles telles que la couleur, le rayon des angles, l'espacement et la typographie.

Astuce en plus : lorsque vous sélectionnez l’outil Pointer et modifier, les options d’édition disponibles dépendent du type d’élément sélectionné : vous pouvez ajuster les polices, les couleurs et la mise en forme du texte, et changer les couleurs de fond et l’espacement des conteneurs. Les images disposent de leurs propres options. Il est également possible d'en uploader pour les remplacer.

En pratique

Dans l'exemple du lecteur de musique ci-dessous, la fonction Pointer et modifier est utilisée pour ajuster rapidement des détails tels que la taille de la police et la mise en forme.

6. Ouvrez l’onglet de code pour faire des modifications rapides (pas besoin de compétences en développement)

Lorsque vous créez dans Figma Make, il est préférable d'effectuer certaines petites modifications non visuelles directement dans le code. Le bouton Go to source (Accéder à la source) est un raccourci qui vous permet de trouver le code d’un élément, afin que vous puissiez jeter un œil sous le capot et en ajuster les valeurs. Figma Make étiquette l'ensemble de son code d'une manière facile à comprendre, permettant à ceux qui n'ont aucune expérience en la matière d'identifier quelle partie du code contrôle les comportements au sein de la version.Les valeurs mises à jour dans le code seront immédiatement reflétées dans votre aperçu, sans aucune actualisation, et vous permettront de tester rapidement plusieurs comportements de produit.

Astuce en plus : Si une configuration au niveau de la page n’est pas accessible à l’aide de Go to source, essayez d’explorer les calques sémantiques à l’intérieur d’un dossier de code à l’aide du raccourci cmd+F (Mac) ou Ctrl+F (PC).

En pratique

Cette méthode est idéale pour itérer rapidement sur des propriétés telles que l’animation. Si nous souhaitions tester la vitesse de rotation du vinyle dans le fichier du lecteur de musique de Holly, nous pourrions simplement accéder au code source de l'élément, rechercher rapidement le paramètre de vitesse dans le code, puis ajuster manuellement la vitesse à partir du code jusqu'à obtenir le résultat souhaité dans l'aperçu.

7. Intégrez des données réalistes dans votre Make

Pour donner vie à un prototype dynamique, Figma Make vous permet de construire des interfaces avec des données personnalisées ou en temps réel, comme les cours de la bourse ou les prévisions météorologiques. Il existe plusieurs manières d'importer des données dans vos fichiers Figma Make sans avoir à les connecter à des API :

• Demandez à Figma Make le type de données que vous souhaitez voir affichées.
• Demandez explicitement à Figma Make d’inclure un point d’entrée d’importation de données dans votre interface si vous souhaitez un contrôle plus granulaire sur votre ensemble de données.

Astuce en plus : n'oubliez pas que Figma Make peut si nécessaire se connecter à n'importe quel matériel informatique auquel votre navigateur a accès. Cela donne la possibilité de créer des prototypes d'interactions impliquant différents types d'entrées clavier, audio ou même caméra, comme l'illustre l'application mini-photomaton de la product designer Daniela Muntyan.

En pratique

Lorsque Ryan Reid, product designer, a créé un outil de consultation des horaires du métro de New York à l'aide de l'API MTA, Figma Make a automatiquement collecté les données des lignes et des stations de métro et a intelligemment généré des données fictives qui reproduisaient les horaires d'arrivée des trains en temps réel, sans aucune connexion à l'API.

Le prompt de Ryan : Crée un site web pour voir les horaires du métro de New York, à l'aide des API du MTA de New York. Le site doit permettre de choisir une ligne et une station de métro pour voir tous les horaires des trains, classés par ordre chronologique. Le site doit comporter une seule page, et la sélection d'une ligne et d'une station doit permettre d'afficher plus d'informations sur la droite, afin que la navigation soit claire et simple.

De même, l'équipe de designer advocates de Figma a généré un faux ensemble de données de sessions de course à l'aide du GPT interne, l'a téléchargé sous forme de fichier .CSV et a invité Figma Make à ajouter un mécanisme de téléchargement à l'intérieur de l'app d'entraînement au marathon. Le résultat est un design de tableau de bord qui s'adapte dynamiquement à toute base de données CSV téléchargée en utilisant le bon formatage.

Un exemple de prompt :

Je souhaite créer un tableau de bord d'analyse de données qui montre la progression de mon entraînement au marathon au fil du temps.

Le tableau de bord doit afficher un résumé de mes derniers entraînements, avec les chiffres clés et un graphique linéaire illustrant ma progression. Axe X : date de l'entraînement, axe Y : distance parcourue lors de chaque entraînement.

Avant que les analyses de données n’apparaissent, la page doit être vide avec un encart qui invite à télécharger un fichier .csv. Utilise ce fichier CSV, qui sera formaté avec les informations suivantes, pour les transformer en tableau de bord détaillé : date, distance_km, time_minutes, avg_pace, heart_rate, calories_burned, elevation_gain.

8. Transformez Figma Make en assistant de handoff

En demandant à Make de créer des interfaces qui génèrent des extraits de code prêts à être utilisés en production, vous pouvez créer votre propre outil de handoff, qui génère des choix de design et crée du code à partager avec les développeurs. Cette approche vous donne plus de latitude pour jouer, expérimenter et itérer avant de passer à la phase suivante.

Astuce en plus : si le code généré par Figma Make ne répond pas à vos besoins de développement, vous pouvez lui demander de vous fournir des éléments et des comportements spécifiques sous forme de pseudocode générique dans le tchat. Voici à quoi pourrait ressembler un tel prompt : Conserve le code tel qu'il est, mais décris-moi comment cet élément est implémenté en pseudo-code. Si possible, détaille les considérations spécifiques à la plateforme (insérez le nom de la plateforme).

En pratique

Le designer advocate Luis Ouriach a utilisé Figma Make comme assistant de handoff pour créer son propre générateur de palettes OKLCH. Son application permet de générer un système de couleurs complet à partir de la couleur principale d'une marque, et inclut les variables CSS qui en résultent ainsi que la sortie CSS Tailwind prête à être transmise.

Prompt de Luis :Crée un générateur de palette de couleurs OKLCH dans lequel tu ajoutes la couleur principale de la marque et qui génère une gamme complète de couleurs courantes : vert, bleu, rouge, jaune, orange et gris. Tu peux choisir le nombre de couleurs dans chaque gamme, par exemple 3 de chaque dans des nuances différentes.

De la même manière, le developer advocate Jake Albaugh a créé une mini-application pour affiner les animations appliquées sur un élément spécifique de l'UI, dans ce cas, une carte bancaire de luxe. Jake a demandé à Figma Make d'inclure des commandes d'effets visuels et une sortie JSON pour les paramètres d'animation, afin de créer du code réutilisable pour un autre produit qu'il était en train de créer.

L’un des prompts de Jake : Fais en sorte qu’un code JSON décrivant tous les paramètres (y compris l’inclinaison minimale et maximale sur chaque axe) s’affiche lorsque la donnée d'entrée change.

Laissez-vous du temps pour explorer l'outil

Comme avec tout outil d'IA, la rédaction de prompts se fait par essais et erreurs, jusqu’à ce que vous trouviez l'approche qui vous convient. La version bêta de Figma Make est désormais accessible à tous les utilisateurs Figma disposant d'une licence Full. Nous sommes impatients de découvrir comment vous allez utiliser cet outil pour donner vie à vos nouvelles idées.

Nous commençons tout juste à découvrir les possibilités offertes par cet outil, et nous sommes ravis de le faire avec vous.