Conception de votre premier bouton

Dans ce projet, nous allons créer un bouton dans Figma design. Les boutons sont les éléments que l'on crée le plus souvent dans une interface utilisateur. L'objectif de ce projet est de vous aider à acquérir une expérience pratique de l'utilisation de l'outil Text et de la disposition automatique.

Si vous suivez les instructions étape par étape, votre bouton final devrait ressembler à ce qui suit :

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

1. Créer un calque de texte
2. Convertir le calque de texte en cadre de mise en page automatique
3. Définir le style du bouton

Créer un calque de texte

Pour ajouter un calque de texte, nous allons utiliser l'outil Text. Pour ce faire, cliquez sur l'outil Text dans la barre d'outils ou appuyez sur T.

Une fois l'outil Text actif, cliquez sur le canevas et saisissez « Bouton » pour créer le calque de texte. Dans la barre latérale gauche, vous remarquerez qu'un calque de texte intitulé « Bouton » apparaît. Le nom du calque de texte correspond à ce que vous saisissez sur le canevas jusqu'à ce que vous en modifiez manuellement le nom dans le panneau des calques. Pour modifier le nom d'un calque, double-cliquez sur le calque dans la barre latérale gauche, puis saisissez un nouveau nom.

Pendant que nous y sommes, augmentons la taille de la police de notre calque de texte. Sélectionnez le calque de texte, puis accédez à la section Text de la barre latérale droite pour redéfinir la taille de la police sur 16. Nous allons garder la police par défaut mais n'hésitez pas à en choisir une autre.

Convertir le calque de texte en cadre de la disposition automatique

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

Vous pouvez appliquer la disposition automatique à un cadre existant ou l'utiliser pour convertir un calque en cadre. Prenons la deuxième option. Sélectionnez le calque de texte et utilisez le raccourci Maj A. Une fois la disposition automatique appliquée, vous remarquerez quelques changements :

• Notre calque de texte se trouve désormais dans un cadre. Étant donné que la mise en page automatique ne s'applique qu'aux cadres et composants, Figma a fait tout le travail pour nous et a mis notre calque de texte dans un nouveau cadre. Pour l'instant, aucune couleur de remplissage n'est appliquée au cadre, mais nous allons le faire au moment de définir le style du bouton.
• Lorsque vous sélectionnez le cadre, les paramètres de disposition automatique s'affichent désormais dans la barre latérale droite. Dans ce projet, nous n'allons pas modifier les propriétés de disposition automatique. Si vous souhaitez en savoir plus, consultez notre article Explore auto layout properties (Découvrir les propriétés de mise en page automatique).
• Le cadre grossit ou rétrécit selon les changements apportés au texte. Ces éléments dynamiques vous permettent de gagner du temps lorsque vous concevez du contenu qui s'affichera sur différents types d'appareils ou qui sera traduit dans diverses langues. Cette modification est loin d'être spectaculaire pour le moment, mais ajoutons-y du style pour voir toute la puissance de la disposition automatique.

Définir le style du bouton

Il est temps de définir le style de notre bouton.

Commençons par ajouter de la couleur. Sélectionnez le calque de cadre, puis cliquez sur dans les paramètres 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.

Ensuite, sélectionnez le calque de texte et définissez le remplissage sur #FFFFFF.

Nous pouvons arrondir les angles de notre bouton pour lui donner une apparence plus délicate. Sélectionnez de nouveau le cadre, puis utilisez le paramètre de la barre latérale droite pour redéfinir le rayon de l'angle sur 6.

Enfin, passons au remplissage de notre cadre. Lorsque nous avons converti le calque de texte en cadre de la disposition automatique, un remplissage a automatiquement été ajouté entre les limites du cadre et le texte qu'il contient. Pour le moment, le remplissage est uniforme sur tous les côtés. Nous souhaitons que les valeurs de remplissage en haut et en bas soient inférieures à celles de remplissage à gauche et à droite, alors modifions-les.

Sélectionnez le cadre. Lorsque vous passez le curseur de la souris dessus, des poignées roses apparaissent. Vous pouvez les utiliser pour modifier le remplissage. Il est possible de modifier individuellement le remplissage de chaque côté du cadre. Vous pouvez cliquer sur la poignée et la faire glisser ou cliquer une fois sur la poignée et saisir un nombre dans la zone qui s'affiche.

Utilisez l'une des deux méthodes pour mettre à jour le remplissage comme suit :

• Remplissage en haut et en bas : 8
• Remplissage à gauche et à droite : 16

Notre bouton a fière allure, mais mettons à jour le libellé. Double-cliquez sur le texte pour le modifier, puis saisissez « S'inscrire ». La taille du bouton s'ajuste au fur et à mesure de la saisie. Sympa !

Et ensuite ?

Félicitations ! Vous avez créé un bouton dans Figma à l'aide de l'outil Text et de la disposition automatique. Si vous êtes à la recherche d'un nouveau défi, essayez de convertir votre bouton en composant et d'ajouter une variante pour pouvoir le réutiliser dans tous vos designs sans avoir à tout recommencer de zéro.