Utiliser First Draft avec Figma AI
Remarque : les fonctions d'IA de Figma sont actuellement gratuites en version bêta, mais des limites d'utilisation peuvent s'appliquer. Lorsqu'elles seront disponibles pour tous nos utilisateurs, nous vous informerons des tarifs.
Avec First Draft, vous pouvez transformer vos idées en wireframes ou en designs modifiables en quelques minutes. Cette fonctionnalité vous permet d'explorer rapidement un large éventail de possibilités de design et d'itérations, afin de passer moins de temps à créer manuellement des premières ébauches en partant de zéro.
Fonctionnement
Figma AI utilise les bibliothèques de wireframing et de design créées par Figma comme base pour générer des designs.
Chaque bibliothèque est composée d'un ensemble d'éléments, ou piles de composants, utilisés pour constituer votre design à partir de la description que vous en donnez.
Les bibliothèques excellent dans la création de designs qui correspondent aux modèles de design courantes sur les sites web et les applications mobiles. Cependant, la situation peut vite tourner mal lorsque vous générez des concepts en dehors de ces cadres de design.
Les invites suivantes génèrent typiquement des résultats de qualité :
- Une page de paiement pour un magasin qui vend des barbecues
- Une application de livraison de nourriture pour animaux
- Un site web marketing pour une société de conseil en stratégie de contenu
Figma AI pourrait avoir des difficultés avec ces invites, car elles n'utilisent pas les modèles de design communs aux sites web ou aux applications mobiles :
- Une maquette de livre pour un roman
- Une invitation à une fête d'anniversaire
- Un dépliant en forme de poisson
Une fois que vous avez généré un design, vous pouvez le modifier à l'aide d'une autre invite ou d'une collection de commandes de style.
Astuce : il n'est pas possible de générer des designs à l'aide de votre propre design system, mais nous espérons vous proposer bientôt cette fonctionnalité.
Rédiger une première ébauche
- Cliquez sur Actions dans la barre d'outils.
- Sélectionnez First Draft.
- Si nécessaire, cliquez sur Library pour réaliser un wireframe ou un design de base pour site web ou application mobile. Si vous ne choisissez pas de bibliothèque, Figma AI sélectionne celle qui convient le mieux à l'invite.
- Saisissez une invite, telle que : « Une page de tarification pour le démarrage d'un outil de développement », ou cliquez sur l'une des suggestions disponibles.
- Cliquez sur Make it.
- Prévisualisez les différents thèmes en cliquant sur les vignettes situées sous l'invite.
- Si le design vous convient, fermez le menu des actions. Si vous souhaitez le peaufiner, cliquez sur Make changes.
Apporter des modifications au design
Remarque : une fois que vous avez fermé Actions, vous ne pourrez plus apporter de modifications au design à l'aide des bibliothèques First Draft. Au lieu de cela, vous pouvez continuer à modifier votre design en modifiant ses propriétés, comme pour tout autre design.
Vous avez deux options pour modifier votre design lorsque vous cliquez sur Make changes :
- Utilisez une invite pour décrire vos modifications.
- Utilisez les commandes de style pour personnaliser la couleur, la typographie, l'espacement et le rayon des angles.
Vous pouvez basculer entre chaque option tout en apportant des modifications à un seul design.
Conseil : vous souhaitez comparer différentes versions ? Dupliquez la frame sélectionné à l'aide de Ctrl D sous Windows ou de Commande D sous macOS, puis continuez à apporter des modifications.
Utiliser une invite pour personnaliser un design
Grâce aux invites, vous pouvez modifier le thème, le contenu ou la structure de votre design. Voici quelques exemples :
Thème
- Utiliser une palette sur le thème de la pastèque
- Essayer une palette de couleurs différente
- Rendre ça plus coloré
Contenu
- Remplacer l'icône des paramètres par un engrenage
- Renommer la catégorie Podcasts en Livres audio
- Changer les noms des clients dans la section témoignages clients
Structure
- Ajouter une autre section sous Hit-parade intitulée « Tendances en Allemagne »
- Déplacer la section À la une sous la barre de navigation
Astuce : sélectionnez une ou plusieurs parties du design pour n'appliquer l'invite qu'aux éléments sélectionnés.
Utiliser les commandes de style pour personnaliser le thème
Ajustez le thème à l'aide des commandes de style qui vous permettent de contrôler la couleur, le rayon des angles, l'espacement et la typographie du design.
Couleur
Cliquez sur ou pour basculer entre le mode clair et le mode sombre. Vous pouvez également appliquer une nouvelle couleur au thème en choisissant l'une des couleurs prédéfinies ou en cliquant sur la roue chromatique pour choisir votre propre couleur.
Rayon d'angle
Faites glisser le curseur pour augmenter ou réduire le rayon d'angle des objets éligibles.
Espacement
Faites glisser le curseur pour augmenter ou diminuer l'espacement entre les éléments.
Typographie
Cliquez sur title, body ou label pour sélectionner un groupe d'éléments de texte à modifier. Ensuite, cliquez sur une nouvelle police pour la prévisualiser dans le design.
Astuce : quelque chose ne fonctionne pas comme prévu ? Consultez notre guide sur la résolution des problèmes liés aux outils d'IA dans Figma Design →