Mini tutoriel - Travailler avec les composants du bouton Figma

Dans Figma, les éléments de l'interface utilisateur sont appelés composants. Construits correctement, ils sont incroyablement polyvalents et faciles à mettre à jour, mais de quoi sont capables les composants et comment fonctionnent-ils ? Nous démontrerons leur puissance en travaillant avec l'un des éléments les plus courants de l'interface utilisateur : le bouton.

Pourquoi des boutons ?

Les boutons regorgent de variables telles que la hauteur, la largeur, la longueur de l'étiquette, le rembourrage interne, l'état et le thème. En construisant un système de boutons de base, nous apprendrons l'immense valeur de l'utilisation de Figma avec un état d'esprit basé sur les composants et la bibliothèque de composants Figma.

*Note de l'éditeur : ce didacticiel écrit est dérivé d'un didacticiel vidéo créé par David Luhr de Build UX.

Tâche 1 : Créer un composant de bouton Figma de base

1. Nous allons commencer par créer un nouveau cadre et le renommer Boutons dans le panneau des calques.
2. Tapez le texte de l'étiquette de votre bouton. Nous utiliserons "S'inscrire" pour ce tutoriel.
3. Notre typographie est :
   
   • Robot moyen
   • Taille de police 18
   • Hauteur de ligne 24
   • Centre d'alignement du texte
   • Aligner au milieu
   • Redimensionnement = Taille fixe
4. Une fois que vous avez écrit l'étiquette de votre bouton, double-cliquez sur le coin inférieur droit de la zone de texte afin qu'elle s'adapte automatiquement aux plus petites contraintes du texte.
5. Renommez le calque de texte Button Label .

Cliquez pour voir l'image en taille réelle.

6. Créez un rectangle, placez-le sous Button Label dans le panneau Calques et renommez-le Button Container . Autoriser la couleur du conteneur de boutons à rester le gris par défaut.
7. Établissez une hauteur fixe pour le conteneur de boutons. Nous utiliserons 60 pixels.
8. Maintenant, nous allons ajouter un rembourrage interne au conteneur de boutons.
   • La largeur de l'étiquette du bouton est de 63 pixels.
   • Nous avons besoin d'un rembourrage droit et gauche de 24 pixels. Combiné, cela équivaut à 48 pixels.
   • Donc, nous allons entrer la largeur de l'étiquette (63 pixels) + le rembourrage total (48 pixels).
9. Sélectionnez à la fois l'étiquette et le conteneur et centrez-les avec les outils d'alignement.

Cliquez pour voir l'image en taille réelle.

Nous avons conçu un bouton rudimentaire. Cependant, le rembourrage interne de notre bouton n'est pas encore en mesure de s'adapter aux changements de longueur d'étiquette. Dans une étape ultérieure, nous aborderons la disposition interne, qui permettra à la largeur de notre conteneur de boutons d'être flexible par rapport à la longueur de l'étiquette.

Tâche 2 : Rendre le bouton interactif

Pour rendre le bouton interactif, nous allons ajouter un anneau de mise au point.

1. Dupliquez Button Container et renommez-le Button Focus Ring .
2. Assurez-vous que la bague de mise au point se trouve sous le conteneur de boutons dans le panneau des calques.
3. Retirez le remplissage de la bague de mise au point et ajoutez un trait intérieur noir d'une épaisseur de 4 pixels.
4. Nous voulons également un écart de 4 pixels entre le conteneur de boutons et la bague de mise au point sur les quatre côtés, nous allons donc ajouter +16 à sa largeur et à sa hauteur.
5. Sélectionnez et centrez l'étiquette, le conteneur de boutons et la bague de mise au point.

Voici à quoi ressemblera notre bouton, dans sa forme la plus simple, dans un état focalisé.

Cliquez pour voir l'image en taille réelle.

6. Sélectionnez les trois éléments (étiquette, conteneur de boutons, anneau de mise au point), cliquez avec le bouton droit de la souris et choisissez "Créer un composant".

Cliquez pour voir l'image en taille réelle.

7. Renommez le composant Button/Primitive/Default .
   • Bouton = Type de composant
   • Primitive = Variation
   • Par défaut = État

Ceci est notre bouton primitif. Il n'apparaîtra pas dans notre conception finale, mais il servira de base sur laquelle toutes nos variantes de boutons s'appuieront. L'avantage? Si nous devons reconcevoir nos boutons à l'avenir, nous n'aurons qu'à éditer à un seul endroit.

Cliquez pour voir l'image en taille réelle.

Tâche 3 : Établir une grille de disposition des boutons

1. Sélectionnez Button/Primitive/Default , accédez au panneau de conception et cliquez sur l'icône "+" à côté de "Layout Grid".

Cliquez pour voir l'image en taille réelle.

2. Cliquez ensuite sur l'icône de la grille, sélectionnez "Colonnes" et saisissez les valeurs suivantes :
   • Nombre de colonnes = 1
   • Largeur = Auto
   • Gouttière = 0
   • Type = Étirement
3. "Margin" fournit le rembourrage à l'intérieur du conteneur de boutons.
   • N'oubliez pas que nous avons besoin d'un rembourrage gauche et droit de 24 pixels.
   • Nous devons également tenir compte de la bordure épaisse de 4 pixels et de l'espace de 4 pixels de notre bague de mise au point.
   • Cela signifie que nous aurons besoin d'une marge de 32 pixels.

Cliquez pour voir l'image en taille réelle.

4. Avec la marge ajoutée, vous remarquerez une zone d'indicateur rouge qui montre le rembourrage intérieur du conteneur de boutons et correspond exactement à la largeur de l'étiquette.

Cliquez pour voir l'image en taille réelle.

Nous devons maintenant ajouter des contraintes de mise en page à chaque élément de notre bouton.

5. Sélectionnez les trois calques du composant, accédez à "Contraintes" et épinglez-les à "Gauche et droite" et "Centre".
6. À ce stade, vous pouvez sélectionner le composant et le faire glisser à la largeur de votre choix. Vous verrez que la mise en page fonctionne exactement comme elle a été conçue.
7. Si vous réduisez la largeur du bouton par rapport à l'étiquette, vous remarquerez que l'étiquette passe à une autre ligne.

Cliquez pour voir l'image en taille réelle.

Tâche 4 : Ajuster la largeur du bouton en fonction de la longueur du texte

Voyons comment notre bouton fonctionne avec une étiquette de bouton plus longue.

1. Accédez au panneau des ressources, faites glisser une nouvelle instance du bouton et tapez "Planifier un rendez-vous" ou quelque chose de plus long. Ce qui se produit? L'étiquette déborde sur la ligne suivante - pas exactement ce que nous voulons.

Cliquez pour voir l'image en taille réelle.

2. Revenez à votre panneau de calques, sélectionnez le nouveau composant que vous venez de faire glisser et utilisez les touches fléchées pour ajuster la largeur à la dimension précise qui correspond à l'étiquette.
3. Lorsque vous faites cela, vous verrez que toutes les variables de mise en page restent comme prévu : remplissage intérieur, placement des étiquettes, trait de 4 pixels et espace de 4 pixels de la bague de mise au point. (Supprimez ce bouton en double avant de passer à la tâche 5.)

En utilisant une grille de mise en page, vous pouvez créer un bouton qui peut être utilisé dans toutes vos conceptions, et tout ce que vous avez à faire est d'ajuster la largeur pour la longueur d'étiquette dont vous avez besoin.

Cliquez pour voir l'image en taille réelle.

Tâche 5 : Créer des états de survol et de mise au point

Avec notre bouton par défaut en place, créons des primitives de nos états de survol et de focus.

1. Désactivez la bague de mise au point dans votre bouton par défaut.
2. Maintenez la touche Alt enfoncée et faites glisser une nouvelle instance du bouton par défaut.
3. Donnez au conteneur de boutons une couleur gris plus clair (#E7E7E7).
4. Faites un clic droit, "Créer un composant" et renommez Button/Primitive/Hover .

Cliquez pour voir l'image en taille réelle.

5. Faites glisser une autre instance de l'état par défaut, activez la bague de mise au point et faites correspondre la couleur du conteneur de bouton à la couleur du conteneur d'état de survol (#E7E7E7).
6. Faites un clic droit, "Créer un composant" et renommez Button/Primitive/Focus .

Nous avons maintenant une idée de la disposition du bouton et de son fonctionnement dans différents états. À partir de là, nous pouvons commencer à ajouter des thèmes ou des styles spécifiques en fonction de nos besoins.

Cliquez pour voir l'image en taille réelle.

Tâche 6 : implémenter des thèmes de boutons

Maintenant, nous allons créer des variations stylistiques.

1. Maintenez la touche Alt enfoncée et faites glisser dans une autre instance de Button/Primitive/Default .
2. Modifiez la couleur du conteneur pour qu'elle corresponde à la couleur de thème souhaitée (#204ECF).
3. Faites en sorte que l'étiquette du bouton soit blanche (#FFFFFF), activez la bague de mise au point, changez le trait pour la couleur de thème souhaitée (#204ECF) et désactivez-le.
4. Faites un clic droit, "Créer un composant" et renommez Button/BrightBlue/Default .

Cliquez pour voir l'image en taille réelle.

5. Faites glisser deux instances de ce nouveau bouton par défaut : une pour l'état de survol et une pour l'état de mise au point.
6. Modifiez la couleur du conteneur de boutons pour qu'elle corresponde à la couleur de thème souhaitée (#678FFF), faites un clic droit, "Créer un composant" et renommez Button/BrightBlue/Hover .
7. Appliquez la même couleur au conteneur du bouton de mise au point, activez la bague de mise au point, cliquez avec le bouton droit de la souris sur "Créer un composant" et renommez Button/BrightBlue/Focus .

Vous pouvez utiliser ce même processus pour n'importe quel nombre de thèmes dont vous avez besoin dans votre conception.

Cliquez pour voir l'image en taille réelle.

Tâche 7 : Découvrez la beauté des composants Figma

Une fois que vous avez créé tous vos thèmes, prenez une seconde pour observer à quel point le travail avec des composants peut être puissant.

1. Sélectionnez votre Button/Primitive/Default , ajoutez un rayon d'angle et vous verrez que toutes les instances de votre bouton sont mises à jour automatiquement.

Cliquez pour voir l'image en taille réelle.

2. Ensuite, allez dans votre panneau de composants. Toutes les instances de votre bouton peuvent être glissées dans n'importe quelle partie de votre conception.

Cliquez pour voir l'image en taille réelle.

3. De plus, parce que nous avons utilisé cette convention de nommage, nous pouvons désormais remplacer n'importe quel bouton par une instance/un thème alternatif. Pour voir cela en action, faites glisser une instance du bouton, puis accédez à "Instance" dans le panneau de conception, sélectionnez l'instance dont vous avez besoin et cela change immédiatement.

Cliquez pour voir l'image en taille réelle.

Travailler dans le cadre des composants nous permet de gérer rapidement et efficacement nos boutons dans tous les domaines de notre conception. Mieux encore, cela ne fonctionne pas seulement avec des boutons, cela fonctionne avec des composants d'interface utilisateur de tous types.

Pour en savoir plus sur le blog Toptal Design :

• La puissance de Figma comme outil de conception
• Figma vs Sketch vs Axure - Un examen basé sur les tâches
• Rationalisez la conception collaborative avec Figma
• Conception de boutons au fil des ans - La chronologie de Dribbble
• Tutoriel Framer : 7 microinteractions simples pour améliorer vos prototypes