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.
Pour créer des prototypes fonctionnels et des applications web à l'apparence et à la convivialité cohérentes, vous pouvez importer le contexte stylistique d'une bibliothèque Figma existante dans Figma Make. Dans ce cas, Figma Make extrait le CSS de style de cette bibliothèque.
L'intégration du contexte de style d'une bibliothèque dans Figma Make s'effectue en deux étapes :
- Exportez une bibliothèque depuis Figma Design.
- Sélectionnez la bibliothèque dans un fichier Figma Make. Vous pouvez ensuite personnaliser davantage votre fichier Figma Make en modifiant les styles exportés et en ajoutant des directives pour aider Figma Make à utiliser les styles extraits de manière plus ciblée.
Étape 1 : exportez une bibliothèque Figma Design à utiliser comme contexte de style dans Figma Make
Avant de commencer
Qui peut utiliser cette fonctionnalité
Disponible pour tous les forfaits payants
Nécessite une licence Full avec accès can edit au fichier source de la bibliothèque
Dans Figma Design, sélectionnez une bibliothèque à utiliser comme contexte de style pour vos fichiers Figma Make. Seules les personnes avec un accès can edit à la bibliothèque peuvent l'exporter vers Figma Make. Il suffit d'une exportation pour que vous et d'autres puissiez commencer à l'utiliser dans Figma Make.
- Dans le fichier Figma Design contenant la bibliothèque que vous souhaitez exporter vers Figma Make, sélectionnez l'onglet Assets dans la barre latérale gauche.
- Cliquez sur Libraries.
- Dans la section This file, recherchez votre fichier actuel et cliquez sur Publish pour ouvrir la fenêtre modale de publication de la bibliothèque.
- Si vous n'avez pas encore publié la bibliothèque dans une équipe, un espace de travail ou une organisation, cliquez sur Publish en bas de la fenêtre modale. Seules les bibliothèques publiées peuvent être exportées vers Figma Make. Ce processus peut prendre quelques minutes.
-
Cliquez sur Export for Make.
Le processus d'exportation peut prendre quelques minutes. Au cours de celui-ci, Figma assemble et exporte un fichier CSS à référencer dans Figma Make.
- Une fois le processus d'exportation terminé, cliquez sur Go to Figma Make.
Après avoir extrait votre bibliothèque et l'avoir sélectionnée dans votre fichier Figma Make, accédez à la vue code. À partir de là, ouvrez le dossier styles et cliquez sur globals.css pour explorer les styles générés. Vous verrez généralement les styles regroupés en quatre catégories :
- Palettes de couleurs
- Typographie (police et hiérarchie)
- Variables
- Bordures et rayon des angles
Gardez à l'esprit que le CSS extrait est une version simplifiée de votre bibliothèque complète. Il ne capturera pas tous les détails du design. Pour garantir la cohérence et la clarté, nous vous recommandons d'ajouter davantage de contexte et de règles dans votre fichier guidelines.md.
Figma Make ne prend actuellement pas en charge l'extraction complète des tokens de design. Au lieu de cela, il extrait un sous-ensemble de vos variables et les utilise pour générer un fichier CSS global avec des valeurs brutes. Cela signifie que la syntaxe des variables ne sera pas préservée exactement telle qu'elle est définie. Plutôt qu'un mappage à l'identique, vous obtenez donc une vue simplifiée de vos variables reflétée dans un seul fichier au format .css. Cela aide à garantir que le code généré s'aligne sur vos styles fondamentaux.
Si vous disposez de règles ou de paramètres supplémentaires pour les variables, en particulier celles liées aux états, nous vous recommandons de les documenter dans votre fichier guidelines.md afin de garantir la cohérence de votre système.
Vous ne pouvez utiliser qu'une seule bibliothèque à la fois. Si votre organisation gère son design system dans plusieurs bibliothèques, il est recommandé de sélectionner la bibliothèque qui contient ses composants principaux et ses styles les plus fondamentaux. Bien que l'exportation vers Figma Make n'extraie pas les composants eux-mêmes, cette bibliothèque fera probablement référence aux couleurs et à la typographie (qui seront utilisées comme contexte) dans ses propriétés.
Non, vous n'avez besoin d'exporter la bibliothèque vers Figma Make qu'une seule fois. Toute personne de votre organisation qui a un accès can view à cette bibliothèque pourra également l'utiliser dans ses fichiers Figma Make.
Oui. Si quelqu'un modifie une bibliothèque de design et souhaite utiliser la version mise à jour dans Figma Make, vous devrez exporter à nouveau la bibliothèque. La bibliothèque réexportée sera mise à jour dans Figma Make uniquement pour les futurs fichiers Figma Make et ne mettra pas à jour rétroactivement les fichiers Figma Make générés avant la mise à jour.
Étape 2 : faites référence à une bibliothèque dans un fichier Figma Make
Une fois le contexte de style de vos bibliothèques ajouté à Figma Make, vous et les autres membres de votre équipe ou de votre organisation pouvez l'utiliser pour créer des prototypes fonctionnels stylisés et des applications web. Toute personne de l'équipe ou de l'organisation ayant un accès can view à la bibliothèque peut voir et utiliser cette bibliothèque dans son fichier Figma Make.
- Dans un fichier Figma Make, cliquez sur Select a Library.
- Choisissez la bibliothèque que vous souhaitez utiliser.
Commencez immédiatement à envoyer des prompts ou personnalisez davantage la façon dont Figma Make utilise les styles de votre bibliothèque en modifiant les styles de la bibliothèque ou en ajoutant des directives. Une fois que vous avez sélectionné une bibliothèque et commencé à envoyer des prompts, tout le contenu généré dans ce fichier fera référence à ces styles.
Conseil : en faisant référence à une bibliothèque Figma Design, vous donnez à Figma Make un contexte de style à utiliser lorsque vous explorez des idées et générez des prototypes fonctionnels et des applications web. Pour gagner en précision, essayez ces actions :
Modifier les styles d'une bibliothèque
Lorsqu'une bibliothèque Figma Design est exportée vers Figma Make, un fichier CSS des propriétés de la bibliothèque est automatiquement créé. Vous pouvez personnaliser le CSS pour former votre fichier Figma Make selon vos besoins. Les modifications apportées au CSS n'affectent que ce fichier Figma Make.
- Cliquez sur .
- Sélectionnez Edit styles pour mettre à jour les propriétés CSS de cette bibliothèque.
Ajouter des directives pour la génération
Les directives vous permettent de donner à Figma Make des règles ou des instructions sur la manière dont le contexte de style est utilisé. Les directives s'appliquent uniquement aux éléments que vous créez dans ce fichier et n'ont aucun impact sur les autres fichiers susceptibles de faire référence à cette bibliothèque ou à la bibliothèque elle-même.
- Cliquez sur .
- Choisissez Edit guidelines pour ajouter des directives à ce fichier Figma Make.
Le fichier guidelines.md est un fichier texte libre auquel vous pouvez donc ajouter toutes les directives spécifiques que vous souhaitez que Figma Make suive.
Conseil : le fichier guidelines.md peut être utilisé avec ou sans bibliothèque sélectionnée. Vous pouvez donc mettre en forme n'importe quel fichier Figma Make selon vos besoins.
can view à une bibliothèque est révoqué pour un utilisateur ?
Si une personne disposait auparavant d'un accès can view à une bibliothèque, mais que cet accès lui a été retiré, elle ne pourra plus voir ni utiliser cette bibliothèque dans Figma Make. Cependant, tous les fichiers Figma Make précédents que cette personne aurait pu créer à l'aide de cette bibliothèque seront toujours disponibles, et le nom de la bibliothèque apparaîtra comme « Unknown ».
Non. Toute mise à jour des styles ou des directives CSS affecte uniquement ce fichier Figma Make.
Foire aux questions
Non, une bibliothèque Figma Design ne peut actuellement pas être supprimée après avoir été utilisée pour un prompt dans Figma Make.
Une fois que vous avez commencé à générer en faisant référence à une bibliothèque, celle-ci ne peut pas être supprimée. Pour utiliser une bibliothèque différente ou arrêter d'utiliser une bibliothèque particulière, créez un nouveau fichier Figma Make et commencez à générer du contenu.