Avant de commencer

Qui peut utiliser cette fonctionnalité

Toute personne disposant d'un accès en édition au niveau du fichier Figma Design peut créer, gérer et utiliser des propriétés de composant.

Cet article explique comment créer et configurer des propriétés de composant. Découvrez comment modifier des instances avec des propriétés de composant.

Les propriétés d'un composant sont les aspects modifiables de ce dernier. Elles vous permettent de communiquer quelles parties d'un composant peuvent être modifiées, notamment :

Si les calques d'un composant peuvent être masqués ou affichés
Si une instance peut être permutée et quelles sont les instances préférées pour la permutation
Modifier certaines chaînes de texte

Les propriétés des composants sont créées et appliquées aux composants principaux et aux ensembles de composants afin de définir les parties d'un design system et de faciliter l'utilisation des design systems.

Toute personne utilisant un composant avec des propriétés de composant peut voir un ensemble unique de commandes dans le panneau de droite. Ce panneau permet de comprendre d'un coup d'œil ce qui est modifiable et d'effectuer toutes les modifications nécessaires au même endroit.

Cela permet de passer moins de temps à consulter la documentation, d'améliorer l'utilisation précise des composants et des design systems et de réduire la nécessité de sélectionner et de remplacer des calques individuels.

Explorez le fichier playground des propriétés de composant dans la communauté Figma.

Types de propriétés des composants

Les propriétés des composants sont liées à différentes propriétés de design. Vous pouvez créer des propriétés de composant pour n'importe quel composant principal ou n'importe quelle variante d'un ensemble de composants et les appliquer aux calques imbriqués du composant ou de la variante.

Il existe plusieurs types de propriétés de composant :

Type de propriété de composant	Utilisez ceci pour...
Propriété booléenne	Indiquer quels calques peuvent avoir leur visibilité activée/désactivée, comme une icône sur un bouton.
Propriété de permutation d'instances	Indiquer quelles instances peuvent être permutées ; définissez les instances préférées vers lesquelles permuter.
Propriété de texte	Indiquer quel contenu textuel peut être modifié.
Propriété de variante	Définir les différentes variantes d'un composant, telles que ses différents états, tailles, ou couleurs.

Astuce : Communiquez l'utilisation prévue d'un composant en ajoutant des descriptions et des liens vers la documentation. La documentation aide les utilisateurs de votre design system à utiliser correctement les applications, les variantes et les états et à comprendre les exigences d'accessibilité et de contraste. Découvrez comment ajouter une documentation aux actifs de design.

Créer et appliquer des propriétés de composant

Propriété booléenne

Utilisez des propriétés booléennes pour définir des valeurs true/false, ce qui permet d'activer ou de désactiver un attribut. Par exemple, si un design system contient des boutons avec et sans icône, plutôt que de créer des variantes pour chaque état, appliquez une propriété booléenne à la visibilité du calque de l'icône.

Actuellement, les propriétés booléennes ne prennent en charge que la visibilité des calques.

Créer une propriété booléenne

Lorsqu'une propriété booléenne est créée pour la visibilité d'un calque, une valeur définie sur false signifie que le calque sera masqué. Si vous définissez la fonction sur true, le calque sera visible.

Sélectionnez un composant principal ou un ensemble de composants.
Dans la barre latérale droite, cliquez sur dans la section Propriétés et sélectionnez Booléen dans le menu déroulant.
Dans la fenêtre modale Créer une propriété du composant, utilisez les champs et les menus déroulants pour configurer la propriété.
- Donnez un nom à votre propriété dans le champ de texte.
- Définissez la valeur par défaut sur true ou false. Vous pouvez également cliquer sur Appliquer la variable pour appliquer une variable booléenne existante, si elle est disponible.
Cliquez sur Créer une propriété.

Appliquer une propriété booléenne à un composant

Attention : Avant d'appliquer des propriétés booléennes aux composants, il est important de prendre en compte tout besoin de composants interactifs ou de connexions de prototypage. Les flèches de prototypage doivent se connecter entre deux objets. Si vous connectez deux composants et les consolidez à l'aide de propriétés booléennes, les connexions de prototypage seront perdues.

Par exemple, une propriété booléenne est appliquée à une icône dans un composant bouton afin de représenter deux états : un bouton avec une icône et un sans. Il est impossible de définir une interaction entre les deux, car vous n'utilisez qu'un seul composant. Les interactions de prototype doivent se produire entre deux objets individuels.

Sélectionnez un calque imbriqué dans un composant principal ou une variante principale.
Si vous travaillez avec des variantes, vous pouvez cliquer sur pour activer l'édition multiple afin de modifier des objets correspondants et d'accélérer votre workflow. Découvrez comment modifier plusieurs variantes.
Dans la barre latérale droite, recherchez la section Apparence et cliquez sur l'icône Appliquer la variable/propriété.
Choisissez une propriété booléenne dans la liste. Une fois la propriété appliquée, un bouton violet apparaît avec le nom de la propriété dans la barre latérale droite.

Conseil : Vous pouvez créer et appliquer une propriété booléenne à partir de n'importe quel calque imbriqué dans un composant principal ou une variante principale. Sélectionnez le calque imbriqué et recherchez la section Apparence, puis cliquez sur l'icône Appliquer la propriété . Une fois la propriété créée, elle est appliquée au calque sélectionné.

Propriété de permutation d'instances

La propriété de permutation d'instance vous permet d'indiquer quelles instances imbriquées dans un composant principal ou une variante principale peuvent être permutées.

Lors de la création d'une propriété de permutation d'instance, vous pouvez définir une instance par défaut en utilisant n'importe quel composant créé dans le fichier, ou depuis les bibliothèques ajoutées au fichier. Vous pouvez également définir des instances préférées afin que les autres utilisateurs sachent vers quelles instances ils peuvent permuter. Découvrez comment permuter des composants à l'aide de la propriété de permutation d'instance.

Créer une propriété de permutation d'instance

Sélectionnez un composant principal ou un ensemble de composants.
Dans la barre latérale droite, cliquez sur la section Propriétés et sélectionnez Permutation d'instance dans le menu déroulant.
Dans la fenêtre modale Créer une propriété du composant, utilisez les champs et les menus déroulants pour configurer la propriété.
- Donnez un nom à votre propriété en utilisant le champ de texte.
- Définissez la valeur par défaut en utilisant le menu déroulant pour sélectionner une instance parmi les composants créés dans le fichier ou parmi les bibliothèques ajoutées au fichier.
- Si vous le souhaitez, configurez des instances préférées afin que les autres utilisateurs sachent quels composants choisir lors de la permutation de l'instance.
Cliquez sur Créer une propriété.

Appliquer une propriété de permutation d'instance à un composant

Sélectionnez une instance imbriquée dans un composant principal ou une variante principale.
Si vous travaillez avec des variantes, vous pouvez cliquer sur pour activer l'édition multiple afin de modifier des objets correspondants et d'accélérer votre workflow. Découvrez comment modifier plusieurs variantes.
En haut de la barre latérale droite, cliquez sur Appliquer la propriété de permutation d'instance.
Choisissez une propriété d'instance dans la liste. Une fois la propriété appliquée, un bouton violet apparaît avec le nom de la propriété dans la barre latérale droite.

Astuce : Vous pouvez créer et appliquer une propriété de permutation d'instance à partir de n'importe quelle instance imbriquée dans un composant principal ou une variante principale. Sélectionnez l'instance imbriquée et cliquez sur Appliquer/créer la propriété de permutation d'instance en haut de la barre latérale droite. Une fois la propriété créée, elle est appliquée au calque sélectionné.

Choisir des valeurs préférées

Les valeurs préférées vous permettent de créer un ensemble intégré de composants dans lequel choisir les instances à permuter (via la propriété de permutation d'instances). Elles réduisent le temps de réflexion en communiquant quels composants spécifiques peuvent remplacer un composant existant.

Par exemple, vous créez un bouton d'icône avec une propriété de permutation d'instances pour indiquer que l'icône peut être permutée. Cependant, votre bibliothèque d'icônes contient plus de 100 icônes, mais seulement 8 d'entre elles doivent être utilisées à cet effet.

Afin de faciliter la recherche de ces 8 icônes et pour savoir laquelle peut être utilisée, vous les ajoutez en tant que valeurs préférées. Dorénavant, lorsque des concepteurs voudront permuter l'icône, ils auront une liste intégrée de ressources à utiliser.

Lorsque vous utilisez un composant avec une valeur préférée, une liste de valeurs préférées apparaît par défaut lorsque vous accédez au menu de propriété de permutation d'instances.

Remarque : si vous ne voulez pas utiliser une valeur préférée, cliquez sur la liste déroulante ou utilisez la barre de recherche au-dessus de la liste afin de trouver d'autres composants disponibles.

Pour ajouter des valeurs préférentielles à une instance :

Commencez par modifier sa propriété de permutation d'instances existante ou créez-en une nouvelle.
Dans les différentes fenêtres modales, cliquez sur dans la section Preferred values et cochez les cases en regard des instances que vous souhaitez inclure en tant que valeurs préférentielles.

Pour supprimer une valeur préférentielle, cliquez sur à côté de la valeur dans la section Preferred values de la fenêtre modale.

Propriété de texte

Utilisez les propriétés de texte pour indiquer quel contenu textuel dans un composant peut être modifié. Le contenu textuel peut être modifié soit depuis le panneau de droite soit sur le plan de travail.

Remarque : Les propriétés des composants de texte ne prennent actuellement pas en charge le texte enrichi (par exemple, les styles de listes, les exposants et autres paramètres de type). Vous pouvez toujours appliquer ces paramètres au calque de texte, mais leurs formats ne seront pas reflétés dans le panneau des propriétés du composant situé à droite.

Si le calque de texte contient un style de liste numérotée ou à puces, modifier la chaîne de texte dans le panneau de droite supprimera le style de liste. Pour le préserver, mettez à jour la chaîne depuis le plan de travail à la place.

Créer une propriété de texte

Sélectionnez un composant principal ou un ensemble de composants.
Cliquez sur Propriétés dans la section de la barre latérale droite et sélectionnez Texte dans le menu déroulant.
Dans la fenêtre modale Créer une propriété du composant, utilisez les champs pour configurer la propriété.
- Donnez un nom à votre propriété en utilisant le champ de texte.
- Définissez la chaîne de texte par défaut en utilisant le champ de texte valeur. Vous pouvez également cliquer sur Appliquer la variable pour appliquer une variable textuelle existante, si elle est disponible.
Cliquez sur Créer une propriété.

Appliquer une propriété de texte à un composant

Sélectionnez un calque de texte imbriqué dans un composant principal ou une variante principale.
Dans la section Texte située en haut de la barre latérale droite, survolez le champ de texte et cliquez sur Appliquer la variable/propriété .
Choisissez une propriété de texte dans la liste.

Astuce : Vous pouvez créer et appliquer une propriété de texte à partir de n'importe quel calque de texte imbriqué dans un composant principal ou une variante principale.

Avec le calque de texte imbriqué sélectionné, recherchez le champ de texte dans la section Texte de la barre latérale droite.
Survolez le champ de texte et cliquez sur Appliquer la variable/propriété.
Dans le menu, cliquez sur Créer une variable/propriété.
Dans le menu déroulant Créer, sélectionnez Propriété. Donnez ensuite un nom et une valeur par défaut à la propriété.
Cliquez sur Créer une propriété. Une fois la propriété créée, elle est appliquée au calque sélectionné.

Propriété de variante

Une variante est un composant individuel dans un ensemble de composants.

Une propriété de variante vous permet de définir des attributs pour vos variantes, tels que l'état, la couleur et la taille.

Un ensemble de composants contient plusieurs variantes, et ces variantes portent des attributs qui peuvent être définis par des propriétés de variante. Les propriétés de variante sont spécifiques aux variantes et aux ensembles de composants, et ne peuvent pas être créées ou appliquées aux composants principaux.

Découvrir comment créer des variantes et des ensembles de composants

Dans l'exemple ci-dessous se trouve un ensemble de composants bouton avec quatre variantes. Il contient deux propriétés de variante, la taille et la couleur. Les valeurs de taille sont petite et grande, tandis que les valeurs de couleur sont verte et rouge.

Remarque : nous vous conseillons d'examiner votre design system existant avant l'adoption de propriétés de composant. De cette manière, vous pouvez choisir quels aspects vous pouvez répercuter en tant que propriétés de composant et quels aspects seront des variantes.

Passer à une autre propriété du composant

Si une propriété de composant est appliquée à un calque, vous pouvez lui appliquer une autre propriété de composant à tout moment.

Dans la barre latérale droite, recherchez la section correspondant à la propriété de composant que vous souhaitez changer.
- Propriété de permutation d'instance : en haut de la barre latérale droite
- Propriété de texte : en haut de la barre latérale droite dans la section Texte
- Propriété booléenne : section Apparence
Cliquez sur la pilule violette.
Sélectionnez une propriété existante du même type.

Personnaliser une propriété de composant

Modifier la valeur par défaut

Modifiez la valeur par défaut d'une propriété de texte, booléenne ou de permutation d'instances.

Sélectionnez l'ensemble de composants ou le composant principal.
Cliquez sur à côté de la propriété de variante pour ouvrir la fenêtre modale de modification de la propriété.
Utilisez le champ de texte ou le menu déroulant de la section Value pour mettre à jour la valeur par défaut.

La mise à jour de la valeur par défaut sera répercutée sur le plan de travail si le calque d'instance associée n'a pas de propriétés annulées.

Remarque : La valeur par défaut d'une propriété de variante est déterminée par la variante située dans le coin supérieur gauche d'un ensemble de composants. Découvrez comment changer la variante par défaut d'un ensemble de composants.

Exposer les instances imbriquées

Exposez des instances imbriquées spécifiques pour révéler leurs propriétés de composant ainsi que celles de l'instance de premier niveau. Cela permet aux utilisateurs de design system de découvrir les instances imbriquées et leurs propriétés de composant sans parcourir en profondeur les calques pour les trouver.

Par exemple, imaginez que vous créez un composant de carte de réseau social avec plusieurs composants imbriqués à l'intérieur (un avatar, un nom, des boutons, etc.). Vous souhaitez changer l'icône du bouton par défaut en une icône d'envoi et modifier son texte. Vous souhaitez également modifier l'état du bouton Annuler pour le désactiver.

Au lieu d'effectuer une sélection approfondie dans chaque calque pour trouver les commandes de propriétés des composants, l'exposition des instances imbriquées vous permet de cliquer uniquement sur le composant de niveau supérieur (dans ce cas, la carte de réseau social) et de modifier votre instance à partir d'un seul endroit.

Lorsque vous sélectionnez une instance de premier niveau avec des instances imbriquées exposées, une liste des propriétés de composants pour les instances de premier niveau et imbriquées apparaît dans le panneau de droite.

Lorsque vous passez votre souris sur une ligne de propriétés, une légère surbrillance violette apparaît autour de l'objet correspondant sur le canevas. Ainsi, vous savez ce que vous êtes en train de modifier.

Remarque : si vous avez une instance imbriquée exposée avec le paramètre de visibilité défini sur caché dans une propriété booléenne, toutes les propriétés de composant associées à l'instance sont aussi cachées.

Choisir les instances imbriquées à exposer

Une fois qu'un composant principal ou un ensemble de composants est sélectionné, cliquez sur dans la section Properties du panneau de droite et choisissez Nested instances sous Expose properties from.

Remarque : l'option d'exposition des instances imbriquées n'est disponible que si un composant principal :

possède déjà une instance imbriquée exposée, ou ;
contient des instances imbriquées avec des propriétés de composant appliquées.

Si l'option Instances imbriquée n'est pas visible, essayez d'abord d'appliquer une propriété de composant à un composant imbriqué.

Depuis la fenêtre modale Expose nested instances, vérifiez les cases des instances que vous souhaitez exposer au premier niveau.

Une liste des instances imbriquées sélectionnées apparaît dans le panneau de droite.

Pour supprimer des instances imbriquées de la liste des instances exposées, survolez le nom de l'instance dans la liste et cliquez sur .

Simplifier les instances

Simplifier une instance aide à réduire l'encombrement du panneau des calques et des propriétés en cachant les calques sans les propriétés de composant appliquées. Figma part du principe qu'un calque sans propriété de composant est un calque qui ne devrait pas être modifié, et qui donc, peut être caché.

Remarque : les instances simplifiées cachent certains noms de calques, mais toute personne possédant des autorisations pour éditer le fichier peut quand même modifier les calques.

Pour simplifier une instance, sélectionnez un composant principal ou un ensemble de composants, puis cliquez sur Component configuration dans le panneau de droite. Dans la fenêtre contextuelle, cochez la case Simplify all instances.

Lorsque vous utilisez une instance d'un composant simplifié, les calques trop nombreux sont rangés dans la liste déroulante Voir tous les calques. Cliquez sur Voir tous les calques pour dérouler la liste et afficher tous les calques. Vous pouvez la réduire de nouveau en cliquant à l'extérieur du panneau des calques ou en sélectionnant un autre calque.

Gérer une propriété de composant

Après avoir créé les propriétés des composants et leurs valeurs, vous pouvez à tout moment les renommer, les réorganiser, en supprimer, modifier leurs valeurs par défaut, etc.

Remarque : Pour utiliser de nouveaux composants ou des composants mis à jour dans différents fichiers, assurez-vous de les publier dans la bibliothèque de l'équipe. Cela vous permet de les partager avec d'autres utilisateurs ou de les utiliser dans d'autres fichiers ou projets. Découvrez comment publier dans la bibliothèque de l'équipe.

Détacher une propriété

Détachez les propriétés de texte, de permutation d'instances ou booléennes d'un calque.

Sélectionnez un calque imbriqué auquel une propriété de composant est appliquée.
Cliquez sur dans le panneau de la barre latérale droite à côté de la propriété que vous souhaitez dissocier.

Cette opération retire la propriété de composant du calque, mais la propriété de composant elle-même n'est pas supprimée.

Remarque : il est impossible de détacher une propriété de variante d'un calque imbriqué.

Renommer, réorganiser ou supprimer

Propriétés

Pour renommer, réorganiser ou supprimer une propriété de composant existante :

Sélectionnez le composant principal ou l'ensemble de composants.
Depuis la section Properties dans la barre latérale droite :
- Renommer : double-cliquez sur le nom d'une propriété. Saisissez un nouveau nom, puis appuyez sur Retour / Entrée ou cliquez en dehors du champ pour appliquer les changements.
- Réorganiser : passez la souris sur une propriété pour afficher les poignées. Cliquez et faites glisser ces dernières pour réorganiser les propriétés, puis relâchez pour appliquer les changements.
  
  Les propriétés de variantes se trouvent toujours au-dessus des autres types de propriétés dans la barre latérale droite. Elles peuvent être réorganisées avec d'autres propriétés de variantes, mais pas avec d'autres types de propriétés.
- Supprimer : cliquez avec le bouton droit sur une propriété, puis cliquez sur Delete property. Vous pouvez également sélectionner une propriété et appuyer sur la touche Supprimer.
  
  Si votre ensemble de composants ou votre composant principal ne contient qu'une seule propriété de variante, la suppression de la propriété entraînera celle de l'ensemble de composants ou du composant principal.

Valeurs

Pour modifier ou réorganiser les valeurs d'une propriété de variante :

Sélectionnez l'ensemble de composants ou le composant principal.
Cliquez sur à côté de la propriété de variante pour ouvrir la fenêtre modale de modification de la propriété.
- Modifier : dans la section Values, utilisez les champs de texte pour modifier ou mettre à jour les valeurs.
- Réorganiser : passez la souris sur une valeur pour afficher les poignées. Cliquez et faites glisser ces dernières pour réorganiser les valeurs.

Bac à sable de composant dans Dev Mode

Quand vous sélectionnez un composant ou une instance dans Dev Mode, vous verrez un aperçu du composant, un lien vers le composant principal, ainsi que tous les liens vers les ressources de développement et les documents pertinents.

Le bac à sable de composant apparaît dans le panneau d'inspection lorsqu'une instance de composant est sélectionnée. Cet outil vous permet d'expérimenter les différentes propriétés d'un composant sans modifier le design. Pour ouvrir le bac à sable de composant dans Dev Mode :

Sélectionnez une instance de composant sur le plan de travail.
Cliquez sur Open in playground dans le panneau d'inspection.

En savoir plus sur l'utilisation du Dev Mode pour inspecter les designs.