Composants
Contexte
Créer une maquette de site sur Figma nécessite souvent de réutiliser les mêmes éléments comme les boutons, cards, headers... .
Le souci est que si l'on modifie l'aspect visuel d'un bouton, il faudra répercuter ce changement sur toute la maquette et cela peut prendre beaucoup de temps.
Nous allons donc voir comment créer et utiliser des composants entièrement personnalisables et réutilisables.
Une vidéo de démonstration est également disponible en bas de la page.
Créer un composant
Pour commencer, nous allons créer un élément basique : un texte.
Ensuite, nous allons transformer ce texte en frame (Shift + A) et lui appliquer un style.
Le fait de transformer un élément en frame implique que ce dernier pourra être soumis à l'utilisation de l'auto-layout.
Nous pouvons maintenant passer à la création du composant, c'est-à-dire sélectionner notre élément et cliquer sur l'icône 
, ou avec le raccourci Option + Command + K.
Nous pouvons également retrouver la notion de variants qui correspondent à des déclinaisons au sein d'un même composant. Par exemple, un composant Bouton pourrait avoir comme variants : Default, Hover, Focus...
Ajouter un variant se fait très simplement en sélectionnant notre composant et en cliquant sur l'icône 
.
Lorsque nous ajoutons un variant, le composant ne correspond plus au bouton en lui-même, mais correspond plutôt à l'ensemble des variants, comme montré ci-dessous.
Nous disposons maintenant de 2 variants, mais portant tous deux des noms très génériques. Pour remédier à cela, nous sélectionnons un des variants et nous nous rendons le menu de droite, dans la section « Custom variant » dans laquelle nous pouvons changer le nom déjà prérempli.
Nous répétons ensuite cette action pour tous les variants dont nous disposons.
Importer et utiliser un composant
Pour importer un composant, il suffit de se rendre dans le menu de gauche, dans « Assets » et c'est ici que nous retrouvons la liste complète de tous nos composants. À partir de là, nous pouvons glisser-déposer ceux que nous souhaitons utiliser directement sur notre fichier.
Pour visualiser tous les variants d'un composant, il suffit de sélectionner l'instance et de changer le variant utilisé en le sélectionnant dans la liste déroulante.
Le composant venant d'être importé est considéré comme une instance du composant principal et est donc soumis aux mêmes changements que ce dernier. Par exemple, si nous changeons la couleur du composant principal, l'instance sera également modifiée.
Les instances sont toujours indépendantes les unes des autres.
Ajouter des propriétés
Le composant actuel est très basique, donc pas forcément très intéressant, et c'est pour cela que nous allons lui ajouter des propriétés.
Reprenons l'exemple du composant Bouton : nous allons lui ajouter une propriété permettant de changer son label.
Pour commencer, il faut sélectionner les labels des variants et se rendre dans le menu de droite, dans la catégorie « Text » dans laquelle nous pouvons observer un champ contenant le label actuel (soit « Bouton »). Il faut ensuite cliquer sur l'icône 
afin de configurer une nouvelle propriété.
De retour sur l'instance du bouton, nous pouvons remarquer qu'un champ permettant de modifier le label est apparu.
Il est également possible d'ajouter des propriétés sur des paramètres types booléens, mais aussi sur d'autres composants afin d'en imbriquer plusieurs, par exemple un composant icône dans un composant bouton.
