👩‍🏫 Figma - Les propriétés de composant - Partie 2

Les composants Figma peuvent comprendre des propriétés permettant de modifier leur aspect. Les propriétés de composant permettent de réduire le nombre d’éléments d’un design system et par extension, de réduire le temps de conception.

Source

Nous avions précédemment abordé les variantes, au sein de la quête Figma - Introduction au composant. Pour rappel, les variantes permettent de définir les différents aspects d’un composant, et de créer des variations sur des éléments tels que la couleur, la taille, l’ajout d’un effet, etc. Dans le cadre d’un bouton par exemple, il est possible de créer des variantes pour l’état de survol, de focus, désactivé etc.

▶

Vidéo YouTube

https://youtu.be/Ul-mbmCcnd0

1. 1

   Création du bouton

   Dans un premier temps, assure toi que ton bouton est bien un composant.

   

   Pour rappel, l'icône de ton composant devrait ressembler à ceci :

   

2. 2

   Ajout de la propriété

   Ajoutes par la suite le variant depuis la petite icône de variant en haut à droite de ton composant :

   

3. 3

   Définition de la propriété

   Nous souhaitons que notre bouton ait un changement visuel lors d'un passage au survol.

   Nous allons donc changer la couleur du nouveau variant, apparu en dessous, pour induire ce changement visuel.

   

   Lorsque nous ajoutons une nouvelle propriété de type variant, deux choses se passent :

   • Figma crée la propriété, qui s'appellera par défaut Property 1
   • Figma crée le variant, qui s'appellera par défaut Variant2 (puis Variant3, 4... en fonction du nombre de variants que tu souhaites créer).

   

   Dans la constitution d'un design system logique et clair, ces dénominations ne sont pas suffisamment compréhensibles. Il faut de ce fait dès le départ engager de bonnes pratiques afin que le nom de la propriété et le variant restent clairs.

4. 4

   Configuration de la propriété

   Dans ta barre latérale droite, tu retrouves la propriété et les variants liés.

   • Commences par renommer Property 1 : ici, comme il s'agit d'un changement d'état de notre bouton, nous allons privilégier un nouveau nom tel que State ou encore StateButton. Ces dénominations permettent de mieux comprendre que ce variant est inhérent au changement d'état de notre bouton.

   • Il ne nous reste plus qu'à appliquer par la suite le changement de noms pour nos variants. Tu retrouveras notamment :

     • Default : qui correspond à la version par défaut. Ce nom peut rester tel quel.

     • Variant2 : qui, dans ce cas, manque de clarté quant à l'état qu'il représente. Pour rappel, nous souhaitons réaliser un bouton qui réagira au survol. De ce fait nous allons privilégier un verbe d'action en anglais : Hovered. Ce dernier permettra d'indiquer de manière plus claire que le bouton réagit au survol.

   

   Info

   De manière générale, il est vivement conseillé de privilégier l'anglais pour plusieurs raisons (travail collaboratif avec des personnes non francophones, design system clair et logique...). Penses de ce fait à choisir des verbes et verbes d'actions permettant de représenter de manière claire les actions qui se réalisation lorsque l'utilisateur interagira avec les composants.

5. 5

   Finitions

   Un composant pourra avoir d'autres variants. Par exemple, nous nous sommes arrêtés ici à un bouton réagissant au survol, mais il sera possible par exemple de créer d'autres variants, comme par exemple un état lorsque l'on presse le bouton. Il est possible de créer une nouvelle déclinaison de ce bouton de 2 manières différentes :

   En sélectionnant l'encadré en pointillés de ton composant, tu pourras ajouter un variant via le panneau latéral droit :

   • En cliquant toujours sur l'icône d'ajout d'un variant.

   • Directement depuis le composant en ajoutant un nouveau variant via le petit "+" en pas de l'encadré en pointillés de ce dernier :

   

   Les propriétés de texte sont utilisées pour les textes qui sont amenés à être édités sur différentes instances. Par exemple, un composant bouton pourra voir son label varier selon ses usages. Plutôt que d'avoir à double cliquer sur chaque instance pour éditer le calque de texte, celui-ci est éditable directement depuis le panneau de droite. Nous allons reprendre un exemple de bouton dans ce cas de figure.

   ▶

   Vidéo YouTube

   https://youtu.be/GLhJi6jXDNo

   1. 1

      Définition de la propriété

      Dans notre exemple, nous souhaiterions que le texte de notre bouton puisse changer, pour passer par exemple de "Valider" à "Annuler". Pour le moment, seul le texte "Valider" est présent.

      

      Dans un premier temps, sélectionnes ton composant. Crées une nouvelle propriété de type texte depuis la barre latérale droite.

      

      Une modale s'ouvre dans laquelle tu auras deux informations à renseigner :

      • Le nom de la propriété : ici, nous allons choisir un nom qui nous permettra de bien comprendre qu'il s'agit du texte inhérent au bouton. Nous pouvons l'appeler TextButton.
      • La valeur : correspondra à la valeur par défaut. Pour vérifier ici que notre propriété fonctionne bien lorsque nous allons l'activer, nous allons choisir un mot (ou verbe d'action) différent de "Valider". Nous prendrons "Annuler" pour tester notre texte.

      

   2. 2

      Liaison de la propriété

      Notre propriété est bien présente dans notre barre latérale droite, cependant, cette dernière comporte un symbole juste à côté. En passant au survol, Figma te donne une information : Not used within component.

      

      Ce dernier t'informe que bien que la propriété ait été créée, elle n'est pas liée, et par conséquent pas appliquée à l'élément que tu souhaites changer dans ton composant : ton texte. Il faut donc de ce fait appliquer cette propriété à ce dernier.

      Il te suffit alors de double cliquer sur la zone de texte qui va être liée à ta propriété :

      

      Tu constateras également que ta barre latérale droite change, avec un encart dédié au texte :

      

      Tu retrouves notamment notre premier texte, Valider qui est le texte que nous avions mis au début dans notre bouton. À gauche de cette zone de texte, une petite icône te permettra de lier cette zone de texte à la propriété que nous venons de créer. En cliquant dessus, tu retrouveras la propriété en question :

      

      La liaison à cette nouvelle propriété va opérer 2 changements. Tout d'abord, la liaison à la propriété dans la barre latérale droite est appliquée :

      

      Ensuite, le texte que nous avions défini lorsque nous avions créé notre propriété, Annuler est lui aussi présent :

      

   3. 3

      Mise en pratique

      Maintenant que notre composant est paramétré, nous allons pouvoir le tester. En accédant à tes Assets, tu retrouveras ton bouton :

      

      En récupérant notre instance de bouton, il est désormais possible de changer le texte, en nous rendant dans la barre latérale droite de notre document :

      

      Il sera alors possible de renseigner le texte de notre choix.

      Attention

      Pour rappel, les textes doivent être changés directement dans la barre latérale droite dès lors qu'une propriété de texte a été appliquée à un composant. Cela permet notamment que chaque instance ait son propre texte, sans pour autant modifier les autres instances.

L'instance swap permet d'échanger un composant avec un autre directement depuis le panneau de propriétés. Cette propriété est par exemple très utile dans le cadre où l'on souhaite modifier une icône dans un bouton.

▶

Vidéo YouTube

https://youtu.be/a2gjsflAoZ0

1. 1

   Choix des icônes

   Dans un premier temps, nous allons choisir 2 icônes via un plugin pour pouvoir gagner du temps. Nous allons choisir ici Feather Icons.

   

   Dans notre exemple, nous avons choisi deux icônes d'ajout différentes :

   

   Pour rappel, afin que ces icônes soient utilisables et que l'instance swap fonctionne, des instances doivent être existantes. De ce fait, les icônes doivent être en premier lieu transformés en composants pour en obtenir des instances par la suite.

   Assures toi par conséquent de bien transformer tes icônes en composants.

   

   Maintenant que nos composants sont créés, nous allons choisir l'une des deux instances pour l'intégrer directement à notre bouton.

   Dans notre exemple, nous avons choisi l'instance plus-circle.

   

   Pour rappel, pour vérifier qu'il s'agit d'une instance, vérifies que le symbole de ton icône est un petit losange vide. Il s'agit du symbole des instances sur Figma.

2. 2

   Création de la propriété

   Sélectionnes par la suite ton composant pour y ajouter ta propriété instance swap.

   

   À l'instar des autres propriétés, prends le soin de choisir un nom de propriété bien compréhensible. Étant donné que le but de cette propriété est de changer l'icône de notre bouton, nous opterons pour une dénomination telle que SwapIcon ou encore ChangeIcon. En dessous, nous pourrons définir quelle icône sera utilisée par défaut.

   Nous allons par la suite choisir notre valeur par défaut. En parcourant tous les composants disponibles, nous retrouvons les deux icônes que nous avons définis au préalable. Nous choisirons ici l'icône plus-circle.

   

3. 3

   Liaison de la propriété

   Notre propriété est créée, mais comme pour la propriété de texte précédemment réalisée, nous constatons que cette dernière n'est pas liée. (Pour rappel, la petite alerte Not used within component nous donne cette information.

   

   Il est donc primordial de la lier afin de rendre cette propriété exploitable.

   Nous allons pour ce faire double cliquer dans notre bouton pour ne sélectionner que l'icône :

   

   La barre latérale droite change, et, tout comme pour le texte, nous retrouvons les informations de notre icône. Nous n'avons plus qu'à la lier à notre propriété précédemment créée :

   

   Désormais, la propriété est bien liée à notre élément d'icône :

   

4. 4

   Mise en pratique

   Tout comme pour la propriété de texte, il est possible de tester le changement d'icônes dans notre bouton.

   En prenant une instance de notre bouton, toujours via les Assets, nous en retrouvons un prêt à l'emploi.

   En le sélectionnant, il est possible de retrouver une liste déroulante dans laquelle nous retrouverons tous nos composants, et notamment nos deux icônes :

   

   Il est alors possible d'effectuer la modification via cette liste déroulante pour appliquer l'icône d'ajout, mais carrée :

   

Les propriétés booléennes vont permettre d’activer ou de désactiver la visibilité d’un élément au sein du composant. Les booléens peuvent prendre deux valeurs : vrai ou faux.

Dans le cas d'un bouton par exemple, cette propriété peut être d'une grande utilité selon la volonté de disposer une icône soit à droite, soit à gauche du texte. Pour l'exemple ci-dessous, nous allons seulement procéder à l'affichage de l'icône à gauche de notre texte.

▶

Vidéo YouTube

https://youtu.be/Z0srsSM6q-4

1. 1

   Mise en place des icônes

   Dans un premier temps, dispose ton icône à gauche de ton bouton.

   

   Info

   Bien que les deux icônes soient visibles pour le moment, l'une des deux viendra à apparaitre ou disparaitre en fonction de l'affichage de l'autre. Il est donc normal qu'à l'origine, les deux icônes soient visibles.

2. 2

   Création de la propriété

   Positionnes toi sur ton composant, et, comme pour les autres propriétés vues précédemment, crées une propriété de type Boolean.

   

   À l'instar des autres propriétés, nous nous devons de donner une action claire sur ce que provoque le booléen ou non. Pour rappel, le booleen fonctionne sur un principe de vrai/faux. De ce fait, il est habituel de définir le nom du booléen sous forme de question : étant donné que nous cherchons à activer l'affichage d'une icône, nous pouvons réfléchir à une dénomination telle que ShowIcon. Si elle est vraie, ShowIcon s'affiche. Et si elle est fausse, elle ne s'affiche pas.

   

3. 3

   Liaison de la propriété

   Encore une fois, notre propriété est bien créée. Toutefois elle n'est pas liée à l'élément que nous souhaitons faire apparaitre ou disparaitre, notre icône.

   Il te suffit de double cliquer sur ton icône afin d'établir la liaison.

   Attention

   Attention! Ici il faut lier l'icône via Appearance dans la barre latérale droite de ton Figma. Puisque nous souhaitons changer l'apparence de notre bouton et de son icône, c'est à cet endroit que nous devons lier notre propriété.

   Rends-toi donc dans la partie Appearance pour lier ton icône à la propriété ShowIcon créée :

   

   Ici encore, si le lien bien été établi, la propriété apparait en surbrillance violette.

   

4. 4

   Mise en pratique

   Pour tester ton bouton, rends-toi une nouvelle dans tes Assets pour récupérer une instance de ton bouton. En sélectionnant ton bouton, tu constates que la propriété ShowIcon est bien présente, sous forme de bouton toggle. Il ne te reste plus qu'à activer le toggle ou le désactiver pour affecter l'affichage de ton icône!

   

Il te sera possible de créer autant de booléens que désiré en fonction des différents cas de figure de tes composants. Dans le cas d'un bouton par exemple, il est possible de créer un booléen gauche et droite pour affiche ou masquer une icône à la droite ou à la gauche du texte.

Exemple de propriétés booléennes appliquées sur des icônes à gauche et à droite du texte, permettant différentes variations pour un même composant. Source image : UXPlanet.

☝️ Résumé

• Les propriétés de composant permettent une meilleure gestion des documents de conception et des design systems.
• Figma propose quatre propriétés de composant : les variantes, les booléens, le contenu textuel et la permutation d'instances.

---

💪 Challenge

En reprenant les notions vues précédemment, réalise un bouton avec variantes pour les états de hover et de clic, comprenant une propriété booléenne lui permettant d'arborer ou non une icône, ainsi qu'une propriété de texte. En bonus, tu peux utiliser la propriété de swap instance pour que l'instance du composant de l'icône puisse être remplacée par d'autres. Partage ta solution via un lien Figma accessible à tous.

🧐 Critères d'acceptation

• Un composant est créé
• Le composant comprend les propriétés de variantes, booléenne et de texte
• Bonus : Le composant comprend une propriété d'instance swap sur l'icône