Créer et modifier un prototype fonctionnel ou une application web – Figma Learn - Centre d'aide

Avant de commencer

Qui peut utiliser cette fonctionnalité

Figma Make est disponible pour les licences Full pour les forfaits payants.

Vous pouvez essayer Figma Make sur d'autres licences et forfaits.

Avec Figma Make, vous pouvez utiliser l'interface de chat pour créer des prototypes fonctionnels, des applications web, des interfaces utilisateur interactives et plus encore. Figma Make est basé sur l'IA, ce qui rend la création de vos prototypes interactifs très simple : il suffit de partager quelques exemples et d'échanger avec l'IA. Pour modifier ou améliorer vos prototypes fonctionnels et vos applications web, poursuivez la conversation ou modifiez directement l'aperçu et le code.

Conseil : pour en savoir plus sur Figma Make et son utilisation, consultez l'article Découvrir Figma Make.

Créer un prototype fonctionnel ou une application web

Pour créer un prototype fonctionnel, une application web ou une interface utilisateur interactive avec Figma Make :

Créez un fichier Figma Make. Dans le navigateur de fichiers, accédez à vos brouillons. Ensuite, dans le coin supérieur droit, cliquez sur Make.
Dans le chat de l'IA, indiquez au modèle ce que vous souhaitez créer. Vous pouvez effectuer une ou plusieurs des opérations suivantes pour guider l'IA :
- Joindre des designs Figma.
- Ajouter du contexte stylistique issu de l'une de vos bibliothèques Figma Design (forfaits payants uniquement).
- Ajouter un backend pour stocker et gérer en toute sécurité les données et les secrets.
- Coller des frames issues de designs Figma et des images directement dans le chat.
- Saisir vos idées et instructions dans l'interface de prompt.
Cliquez sur Send.

Après avoir envoyé votre prompt, Figma Make commence à générer le code de votre prototype fonctionnel ou de votre application web. En fonction de la complexité du résultat, la génération du code par Figma Make peut prendre quelques minutes.

Une fois le processus terminé, Figma Make répond avec un résumé des modifications et vous propose un aperçu interactif.

Si vous rencontrez des problèmes lors de l'obtention du résultat initial, consultez nos conseils de dépannage pour Figma Make.

Modifier un prototype fonctionnel ou une application web

Pour modifier un prototype fonctionnel ou une application web qui existe déjà, suivez les mêmes étapes que dans Créer un prototype fonctionnel ou une application web. Poursuivez la conversation existante afin d'itérer et d'améliorer le résultat initial. Vous pouvez également indiquer à l'IA des parties spécifiques du résultat d'origine que vous souhaitez modifier.

Utilisez les méthodes suivantes pour modifier votre prototype fonctionnel ou votre application web :

Utiliser l'outil Pointer et modifier pour indiquer les parties de votre prototype fonctionnel ou de votre application web sur lesquelles vous souhaitez que Figma Make se concentre.
Utiliser l'historique des versions pour modifier les versions précédentes de votre prototype fonctionnel ou de votre application web.
Joindre des designs Figma.
Ajouter du contexte stylistique issu de l'une de vos bibliothèques Figma Design (forfaits payants uniquement).
Ajouter un backend pour stocker et gérer en toute sécurité les données et les secrets.
Coller des frames issues de designs Figma et des images directement dans le chat.
Saisir vos idées et instructions dans l'interface de prompt.

L'aperçu est mis à jour chaque fois que vous envoyez un nouveau prompt et que l'IA apporte des modifications.

Si vous rencontrez le moindre problème lors de la mise à jour, consultez nos conseils de dépannage pour Figma Make.

Outil Pointer et modifier

L'outil Pointer et modifier vous permet de pointer des éléments de votre prototype fonctionnel ou de votre application web. En fonction du type d'élément et de la manière dont il a été généré, vous pouvez modifier différentes propriétés, telles que les couleurs, le padding, les marges, le style du texte, etc. Vous pouvez également demander à l'IA d'apporter des modifications directement à cet élément.

Pour utiliser l'outil Pointer et modifier :

Au bas de l'interface de prompt, cliquez sur Point and edit.
Dans l'aperçu, cliquez sur l'élément que vous souhaitez modifier.
Apportez des modifications à l'aide de la barre d'outils.
Si vous le souhaitez, cliquez sur et, à l'aide d'un prompt, demandez à l'IA d'apporter des modifications à l'élément que vous avez sélectionné.

L'ensemble exact des propriétés que vous pouvez modifier dépend du type d'élément que vous avez sélectionné. Certains éléments peuvent inclure un mélange des propriétés décrites ci-dessous.

Modifier des images

Lorsque vous modifiez une image, vous pouvez :

Télécharger une nouvelle image pour remplacer l'image existante
Modifier le rayon d'angle
Modifier l'espacement autour de l'image (marges et padding)
Accéder au code source

Modifier le texte

Lorsque vous modifiez un élément contenant du texte, tel qu'un paragraphe ou un titre, vous pouvez :

Basculer entre les polices Google open source
Changer la couleur du texte
Ajuster la taille du texte
Mettre le texte en gras
Mettre le texte en italique
Souligner le texte
Ajuster l'alignement du texte
Modifier l'espacement autour du texte (marges et padding)
Accéder au code source

Remarque : les polices personnalisées ne sont pas prises en charge dans Figma Make.

Modifier les conteneurs

Lorsque vous modifiez un élément de conteneur, tel qu'une balise div ou une section, vous pouvez :

Changer la couleur de fond
Modifier le rayon d'angle
Modifier l'espacement du conteneur (marges et padding)
Accéder au code source

Rédiger un prompt de modification

Lorsque vous sélectionnez un élément à l'aide de l'outil de modification, vous pouvez envoyer un prompt à l'IA pour qu'elle apporte des modifications directement à cet élément. Si un élément ne possède aucune propriété modifiable, l'interface de prompt s'affiche par défaut dans la barre d'outils. Sinon, cliquez sur pour afficher l'interface de prompt.

Historique des versions

Pendant votre conversation avec l'IA, un point de contrôle est créé pour chaque version de votre prototype fonctionnel ou de votre application web. Vous pouvez faire défiler la discussion avec l'IA et restaurer les versions précédentes de votre prototype fonctionnel ou de votre application web. Utilisez l'historique des versions si vous souhaitez vous baser sur des versions antérieures de votre prototype fonctionnel ou de votre application web, ou si vous rencontrez des problèmes au cours de la conversation.

Pour restaurer une version précédente, cliquez sur Restore this version.

Lorsque vous restaurez une version, vous ne perdez aucune étape de la conversation ni aucune version postérieure à celle que vous avez restaurée. Vous pouvez revenir à ces versions à tout moment.

Et ensuite ?

Une fois que Figma Make a généré le code de votre prototype fonctionnel, de votre application web ou de votre interface utilisateur interactive, vous pouvez :

Bonnes pratiques

Pour travailler avec Figma Make, il est important de garder quelques principes à l'esprit. Vous trouverez ci-dessous des conseils généraux, ainsi que des bonnes pratiques pour l'utilisation de pièces jointes et la résolution des problèmes.

Bonnes pratiques générales

Voici quelques bonnes pratiques à suivre lorsque vous échangez avec l'IA de Figma Make :

Rédigez des messages clairs et directs. Lors de vos échanges avec l'IA, il vaut mieux donner une explication précise du type de résultat que vous recherchez. Ainsi, l'IA est moins susceptible de faire des suppositions et d'essayer d'ajouter de manière proactive des fonctionnalités que vous n'avez pas demandées.
✅ Prompt :

Crée une application de prise de notes. Je veux pouvoir :
1. Nommer un fichier.
2. Ajouter et modifier du texte.
3. Mettre le texte en forme, par exemple en gras, en italique ou en barré.
4. Ajouter des liens au texte.
5. Enregistrer le fichier au format Markdown.
⛔ Prompt :

Crée une application dans laquelle je peux prendre des notes.
Utilisez des exemples. Lorsque vous interagissez avec l'IA, vous devez fournir des exemples de résultat souhaité. Ces exemples peuvent être écrits ou appuyés par des designs Figma pour mieux guider Figma Make. Les images peuvent aussi aider l'IA à se rapprocher de ce que vous souhaitez, mais seulement dans une certaine mesure. Par exemple, l'IA n'est pas capable de traiter exactement les couleurs d'une image, par exemple.

✅ Ces méthodes peuvent être utilisées individuellement ou ensemble dans un seul prompt.

Prompt

Ajoute un écran de connexion. Inclus les éléments génériques d'un écran de connexion. Par exemple, tu dois inclure un champ de nom d'utilisateur intitulé « E-mail » et un lien pour créer un compte intitulé « Vous n'avez pas de compte ? Inscrivez-vous ici. ».

Designs

Utilise le design ci-joint comme exemple de panier d'achat.
Ne fournissez pas d'informations confidentielles. Bien que Figma Make soit idéal pour créer des applications et des interfaces utilisateur interactives, vous ne devez pas fournir d'éléments tels que des clés API, des adresses e-mail ou postales, des données personnelles, des numéros d'identification et autres données sensibles similaires dans l'interface de prompt. À la place, si vous voulez une application capable de faire des demandes d'API pour vous, indiquez à Figma Make le type de fonctionnalités sécurisées ou sensibles que vous souhaitez créer. Figma Make vous aidera à ajouter un backend pour gérer les données.

✅ Prompt :

Je souhaite envoyer des demandes à une API privée. Ajoute une zone de saisie dans laquelle je peux coller la clé.

⛔ Prompt :

Utilise cette clé pour les demandes API : 11qYAYKxCrfVS_7TyWQHOg

Ajouter des pièces jointes

Voici quelques bonnes pratiques à suivre si vous souhaitez inclure des images et des designs à votre prompt.

Dans les designs, utilisez l'auto layout dans la mesure du possible. Lorsque vous ajoutez un design ou un composant, le système est capable de comprendre le flux du contenu à l'aide de l'auto layout.
Concentrez-vous d'abord sur le layout, puis sur la fonctionnalité. Dans votre prompt, indiquez à l'IA qu'elle doit suivre le layout souhaité, puis utilisez des instructions ultérieures pour ajouter des fonctionnalités à ce layout.
Travaillez par étapes. Plutôt que de tenter de fournir à l'IA une description complète et exhaustive du résultat souhaité, commencez par une description générale de ce que vous souhaitez obtenir. Ensuite, au fur et à mesure de votre travail, continuez à ajouter des détails et des fonctionnalités. Lorsque vous joignez des composants et des images de designs plus complexes, ajoutez une frame après l'autre frame, plutôt que toutes en même temps.
Itérez sur le résultat. Pour les prototypes fonctionnels ou les applications web complexes, plusieurs étapes de discussion seront probablement nécessaires pour parvenir à un résultat qui réponde à toutes vos exigences. N'hésitez pas à signaler à l'IA les dysfonctionnements que vous avez constatés. Lorsque vous le faites, donnez des exemples des résultats souhaités.
Les éléments de design et les layouts courants donnent les meilleurs résultats en une seule fois. Par exemple, les galeries simples et les applications web qui utilisent une seule frame principale comptent parmi les approches de design facilement générées. Les layouts plus complexes ou inédits peuvent nécessiter des prompts supplémentaires.
Concentrez-vous sur les résultats adaptés aux ordinateurs et au plein écran. Nous nous efforçons d'améliorer les résultats pour mobile, mais pour l'instant, les contenus qui s'affichent en plein écran sont ceux qui offrent les meilleurs designs.

Pièces jointes uniques

Lorsque vous utilisez des pièces jointes individuelles, voici quelques bonnes pratiques à suivre.

Précisez si vous voulez une création identique à la référence ou si le fichier joint doit simplement servir de guide. Dans votre prompt, indiquez au système si vous souhaitez une reproduction exacte du fichier joint ou si ce dernier doit servir de source d'inspiration ou de référence.
Ajoutez des détails pour chaque section de la création. Pour un résultat au plus proche de la référence, précisez au maximum ce que vous souhaitez. Essayez de procéder section par section au niveau de votre design. Vous pouvez également demander à l'IA de vous aider à rédiger un prompt plus détaillé.

Pièces jointes multiples

Lorsque vous utilisez plusieurs pièces jointes, voici quelques bonnes pratiques à suivre.

Créez votre design écran par écran. Vous pouvez joindre plusieurs designs ou images, mais pour des résultats fidèles à vos références, essayez d'abord de joindre seulement un ou deux designs à la fois. N'oubliez pas que le système se souvient des éléments que vous avez joints, donc s'il ne l'a pas reçu la première fois, rappelez-lui la pièce jointe et réessayez.
Utilisez des références de style sur plusieurs écrans. Vous pouvez joindre plusieurs designs ou images pour créer le style que vous souhaitez. N'oubliez pas de préciser à l'IA que vous voulez que les images soient utilisées comme source d'inspiration, et non qu'elles soient reconstruites à l'identique.

Résoudre les problèmes

Lorsque vous essayez de résoudre ou de contourner les problèmes que vous rencontrez, voici quelques bonnes pratiques à suivre.

Essayez des designs plus petits. Si votre design n'est pas fidèlement recréé, joignez un élément plus petit pour que la création soit plus précise.
Joignez moins d'images et des designs moins chargés. Si les designs que vous joignez contiennent de nombreuses images, des SVG ou des illustrations vectorielles, le système peut parfois rencontrer des difficultés. Essayez de réduire la fidélité ou la taille des images, ou utilisez une pièce jointe moins chargée.