Joindre des designs et des images à un prompt

Avant de commencer

Qui peut utiliser cette fonctionnalité

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

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

Lorsque vous créez des prototypes fonctionnels, des applications web et des interfaces utilisateur interactives à l'aide de Figma Make, vous pouvez joindre des designs et des images à vos prompts pour aider l'IA à générer un résultat satisfaisant.

Vous pouvez joindre jusqu'à trois éléments par prompt. Ces pièces jointes peuvent être une combinaison de designs et d'images.

Joindre un design

Lorsque vous joignez un design à un prompt, le modèle d'IA utilisé dans Figma Make est capable d'interpréter le design et de traduire les calques et le contenu en code fonctionnel. Le résultat reproduira le plus fidèlement possible la forme du design, y compris le texte et les images, tout en respectant vos instructions et les autres pièces jointes.

Il existe deux manières de joindre des designs Figma à un prompt :

• Dans l'interface de prompt, cliquez sur +, puis sur Import from Figma, et recherchez le design, le composant ou le fichier de la communauté que vous souhaitez joindre.

• Copiez et collez les designs de vos fichiers Figma Design dans l'interface de prompt.

Rechercher un design

Lorsque vous créez ou modifiez une version et cliquez sur Import from Figma, la fenêtre modale Attach design apparaît. Dans la fenêtre modale Attach design, vous pouvez rechercher des composants et des frames dans les projets de vos équipes et de votre organisation.

Pour trouver des designs et du contenu de la communauté, saisissez votre recherche dans le champ prévu.

La zone de recherche dans la fenêtre modale Attach design prend également en charge la recherche visuelle. Pour utiliser la recherche visuelle, cliquez sur Visual search dans la zone de recherche et sélectionnez une image à utiliser comme guide.

Cliquez sur See more pour parcourir les composants ou autres designs correspondant à vos critères de recherche.

Lorsque vous sélectionnez un composant, vous pouvez cliquer sur :

• Insert pour l'ajouter directement à l'interface de prompt
• Go to main component pour ouvrir le fichier de design original dans un nouvel onglet

Lorsque vous sélectionnez un design sous Other designs, vous pouvez cliquer sur :

• Attach design pour l'ajouter à l'interface de prompt
• Open file pour ouvrir le fichier de design original dans un nouvel onglet
• Preview pour voir un aperçu agrandi du design

Si vous faites partie d'une organisation, les bibliothèques qui ont été approuvées comme ressources et activées par défaut apparaîtront dans la recherche.

Vous pouvez également cliquer sur Community pour parcourir les designs de la communauté Figma qui correspondent à votre recherche.

Comme pour la section Other designs de votre organisation, lorsque vous sélectionnez un design de la Communauté, vous pouvez cliquer sur :

• Attach design pour l'ajouter à l'interface de prompt
• Open in community pour ouvrir la fiche de la communauté dans un nouvel onglet
• Preview pour voir un aperçu agrandi du design

Joindre une image

Pour orienter le modèle d'IA lors de la génération d'un prototype fonctionnel ou d'une application web, vous pouvez fournir des images. Le modèle ne peut pas reproduire exactement vos images. Considérez-les plutôt comme une suggestion de la marche à suivre. Le modèle s'efforce de reproduire le texte, les couleurs et la position des éléments dans l'image, mais les résultats peuvent néanmoins différer de ce qui est représenté dans l'image.

Il existe deux manières de joindre des images à un prompt :

• Dans l'interface de prompt, cliquez sur +, puis sur  Upload image et sélectionnez l'image dans le navigateur de fichiers de votre système.

• Copiez et collez l'image dans l'interface de prompt.

Bonnes pratiques pour travailler avec les pièces jointes

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

Bonnes pratiques générales

• 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.