Conception de votre premier bouton – Figma Learn - Centre d'aide

Présentation du projet

Produit : Figma Design
Sujets : Texte, mise en page automatique, couleur
Durée : 10 minutes

Dans ce projet, nous allons concevoir un bouton simple qui se redimensionne automatiquement en fonction de la longueur de son étiquette. Les boutons sont des éléments couramment utilisés dans la conception d'interfaces utilisateur et ce projet vous permettra d'acquérir une expérience pratique de l'outil Text et de la mise en page automatique.

Pour créer notre bouton, nous allons effectuer les opérations suivantes :

Ajouter un calque de texte
Convertir le calque de texte en cadre de la disposition automatique
Définir le style du bouton
Transformer le bouton en composant

Si vous suivez la procédure étape par étape, votre illustration finale ressemblera à ceci :

Exemple d'image du design final du bouton.

Ajouter un calque de texte

Commençons par ajouter un calque de texte.

Activez l'outil Texte en cliquant sur l'outil Texte dans la barre d'outils ou en utilisant le raccourci clavier T.
Cliquez sur le plan de travail et tapez Button pour créer le calque de texte.

Dans la barre latérale gauche, vous remarquerez que le panneau Layers dans la barre latérale gauche comporte un nouveau calque de texte nommé « Button ». Double-cliquez sur le calque et renommez-le Étiquette.

Pourquoi nommer les calques ?

La dénomination des calques dans Figma Design est une pratique facultative mais bénéfique. Cela vous permet d'organiser vos designs, de rechercher et de modifier les calques plus rapidement et de garantir que vos collaborateurs puissent trouver ce dont ils ont besoin lorsqu'ils consultent votre fichier.

Lorsque vous ajoutez un calque de texte, le nom du calque correspond automatiquement à ce que vous avez saisi sur le plan de travail jusqu'à ce que vous le renommiez. Pour les autres types d'objets, les noms par défaut sont moins descriptifs. Par exemple, chaque frame que vous ajoutez à un fichier de conception sera appelée « Frame 1 », « Frame 2 », etc. Pensez à donner à ces calques des noms descriptifs afin d'améliorer votre workflow et l'organisation de vos fichiers.

Pour modifier le nom d'un calque, double-cliquez sur le calque dans la barre latérale gauche et saisissez un nouveau nom.

Pendant que nous y sommes, augmentons la taille de police de notre calque de texte. Sélectionnez ce dernier, puis utilisez le paramètre de la section Text de la barre latérale droite pour modifier la taille de la police à 16. Nous nous en tiendrons à la police Inter par défaut, mais n'hésitez pas à choisir un autre style de police.

Comment choisir une taille de police ?

Lors de la conception d'expériences numériques, il est utile d'établir une base pour votre charte typographique.

Vous pouvez le faire en créant une hiérarchie typographique qui détermine l'échelle de vos polices, de la plus petite à la plus grande. Commencez par déterminer la taille de la police du corps du texte, car c'est celle que vous utiliserez le plus souvent dans vos créations. Il est recommandé de définir le corps de votre texte entre 16 px et 18 px, selon la police que vous choisissez.

Une police de 16 px est souvent recommandée pour sa flexibilité dans la création d'échelles typographiques cohérentes. En effet, le nombre 16 est facilement divisible pour créer des espaces harmonieux, des marges, des tailles de titres, etc.

Gardez à l'esprit qu'il est important de tenir compte du contexte de votre design global lors de l'établissement de votre hiérarchie. Par exemple, si vous concevez des boutons pour l'écran tactile d'une voiture, il est possible que l'échelle de la police doive être augmentée pour s'adapter à des boutons dont la surface cliquable est plus grande.

En outre, toutes les polices ne s'adaptent pas visuellement à la même taille. Si les utilisateurs ont du mal à lire votre corps de texte, envisagez d'augmenter sa taille ou de changer de police de caractères.

Convertir le calque de texte en frame de mise en page automatique

Notre bouton n'est pas très élégant pour le moment, mais ne vous en faites pas, nous allons y apporter une touche de fantaisie à l'aide de la mise en page automatique.

Vous pouvez appliquer la mise en page automatique à une frame existante ou l'utiliser pour transformer un calque en frame. Nous utiliserons la deuxième option. Sélectionnez le calque Étiquette et utilisez le raccourci Maj A

Dans la section Mise en page automatique de la barre latérale droite, vérifiez que les paramètres de redimensionnement horizontal et vertical sont tous deux définis sur Hug. Double-cliquez sur la nouvelle frame dans la barre latérale gauche et renommez-la Bouton.

Pourquoi utiliser la mise en page automatique ?

La mise en page automatique est l'une des fonctionnalités les plus puissantes de Figma Design. Vous pouvez l'utiliser pour créer des designs réactifs qui s'affichent parfaitement sur différents types d'appareils et s'adaptent aux changements tels que la taille du contenu. Les frames de mise en page automatique disposent de propriétés de redimensionnement qui indiquent à la frame comment se comporter lorsque les calques qu'elle contient sont redimensionnés et réaffectés.

Vous pouvez choisir entre deux propriétés de redimensionnement pour une frame de mise en page automatique :

Fixed width ou Fixed height : la frame n'est pas redimensionnée, même si ses calques imbriqués sont redimensionnés et réaffectés
Hug contents : la frame sera redimensionnée pour s'adapter à ses calques imbriqués

Comme nous utilisons la propriété de redimensionnement Hug contents, notre bouton sera redimensionné en fonction de la longueur de l'étiquette. Testez-le par vous-même en double-cliquant sur le texte et en tapant S'inscrire ou Continuer.

Définir le style du bouton

Ajouter de la couleur

Sélectionnez le calque Bouton et cliquez sur le plus dans la section Fill de la barre latérale droite pour ajouter une couleur de remplissage.
Utilisez le sélecteur de couleurs pour modifier la couleur. Nous utilisons le code couleur #33B249.
Sélectionnez le calque Étiquette imbriqué dans le calque de la frame et réglez le remplissage sur #FFFFFF.

Arrondir les angles

Sélectionnez le calque Bouton.
Dans la barre latérale droite, définissez le Rayon d'angle sur 6.

Pourquoi les coins des boutons sont-ils arrondis ?

Les coins arrondis peuvent sembler insignifiants, mais ils ont un impact considérable sur l'aspect de vos designs finaux. En plus d'adoucir l'esthétique de votre design, ils le rendent plus convivial et plus accessible que les objets aux angles vifs.

Au-delà de l'esthétique, les coins arrondis sont très courants dans les éléments interactifs des interfaces numériques modernes. Vos utilisateurs sont donc plus susceptibles de comprendre qu'ils peuvent cliquer sur votre bouton si son design correspond à celui d'autres interfaces qu'ils utilisent.

Corriger les marges intérieures

Enfin, corrigeons les marges intérieures (ou padding) de la frame. Lorsque nous avons converti le calque de texte en une frame de mise en page automatique, un padding a été ajouté entre les bords de la frame et le texte à l'intérieur. Pour l'instant, le padding est égal de tous les côtés. Nous voulons que les marges intérieures en haut et en bas soient plus petites que celles de gauche et de droite.

Sélectionnez le calque Bouton.
Passez votre curseur sur la frame sélectionnée. Les poignées qui apparaissent vous permettent de modifier le padding. Vous pouvez soit cliquer sur la poignée et la faire glisser pour modifier le padding, soit cliquer une fois sur la poignée et saisir un nombre dans le cadre qui s'affiche.
Utilisez l'une des deux méthodes pour mettre à jour le remplissage comme suit :
- Padding en haut et en bas : 8
- Padding à gauche et à droite : 16

Astuce : vous pouvez modifier simultanément le remplissage en haut et en bas ou le remplissage à gauche et à droite à l'aide des raccourcis suivants :

Maintenez la touche ⌥ Option (macOS) ou Alt (Windows) enfoncée, puis cliquez sur la zone de padding pour saisir une valeur à appliquer aux côtés opposés.
Maintenez la touche ⌥ Option (macOS) ou Alt (Windows) enfoncée tout en faisant glisser les poignées pour modifier le padding sur les côtés opposés.

Transformer le bouton en composant

Le design de notre bouton est terminé ! Avant de conclure notre projet, transformons-le en composant afin de pouvoir le réutiliser dans de futurs designs.

Sélectionnez le calque Bouton.
Cliquez sur Create component dans la barre latérale droite.

Vous pouvez maintenant ajouter des instances de votre bouton à partir de l'onglet Actifs dans la barre latérale gauche afin de ne jamais plus avoir à concevoir un bouton de A à Z. En savoir plus sur l'utilisation des composants →

Et ensuite ?

Félicitations ! Vous avez conçu un bouton responsive dans Figma Design en utilisant la mise en page automatique. Vous cherchez votre prochain défi ? Consultez notre projet Créer un bouton interactif pour acquérir une plus grande expérience pratique.