Comment créer un bouton dans Figma

Par Lee StantonLee Stanton Auteur Lee Stanton est un écrivain polyvalent qui se concentre sur le paysage logiciel, couvrant à la fois les applications mobiles et de bureau ainsi que les technologies en ligne. En savoir plus• Edité par Evan GowerEvan Gower Editeur Avec plus d'une décennie d'expérience dans l'édition numérique. Evan dirige notre équipe avec un œil attentif sur les tendances technologiques émergentes. Lire la suite17 août 2023

Les boutons de conception sur Figma peuvent être créés de différentes manières en utilisant les propriétés des composants et de mise en page automatique sur la plate-forme. Ainsi, les boutons peuvent être personnalisés à l’aide d’étiquettes, de tailles et d’icônes. Si vous ne savez pas comment créer des boutons sur Figma, vous êtes au bon endroit.

Cet article expliquera comment créer des boutons et comment tirer le meilleur parti de Figma.

Les boutons sont des éléments courants utilisés lors de la conception d’une interface utilisateur fonctionnelle. Vous pouvez créer un bouton dans un design Figma. Si vous êtes nouveau sur Figma, vous devez d'abord comprendre les bases.

Voici un guide étape par étape pour créer des boutons :

Vous pouvez ajouter des couleurs en en créant à l'aide du sélecteur de couleurs, ou vous pouvez accéder aux couleurs hexadécimales depuis Internet.

La couleur du texte à l'intérieur du bouton dépend du fait qu'il contraste mieux avec un arrière-plan noir ou blanc. Vous pouvez utiliser les deux options pour voir laquelle fonctionne le mieux. Si aucune des options ne vous plaît, vous pouvez ajuster le style et la couleur du bouton.

Il existe trois boutons de base qui peuvent être créés sur Figma.

Les boutons principaux sont de couleurs unies avec du texte noir ou blanc. Ce bouton attire les utilisateurs lorsqu'ils utilisent une application. Voici comment vous pouvez en créer un :

Il s'agit généralement d'un bouton blanc mais entouré de la couleur que vous choisissez. Le texte du bouton peut également avoir la même couleur. C'est le deuxième bouton le plus important que vous puissiez créer. Il doit également attirer le regard de l'utilisateur.

Les boutons tertiaires ne sont pas aussi importants que les deux premiers. Ils peuvent fonctionner comme des boutons de lien, de désabonnement ou de retour. Ils sont souvent rédigés en texte brut et peuvent être soulignés dans certains cas.

Vous pouvez créer un bouton tertiaire qui ressemble à un bouton principal ou secondaire. Vous pouvez également modifier la largeur du trait pour obtenir une meilleure visibilité.

Avec les outils de la plate-forme, vous pouvez acquérir une expérience pratique en utilisant la mise en page automatique et l'outil de texte. Avec des conseils étape par étape, la création d’un bouton devrait être relativement simple à réaliser. Pour créer un bouton, vous devez créer votre calque de texte, convertir votre calque de texte en cadre de mise en page automatique et styliser votre bouton.

Dans cette étape, l'outil texte est utilisé.

Désormais, vous pouvez également jouer avec la taille de la police en l'augmentant ou en la diminuant.

À ce stade, le bouton doit être peaufiné davantage pour lui donner un aspect glamour. Avec la mise en page automatique, vous pouvez pimenter un peu plus les choses. La mise en page automatique est une fonctionnalité puissante sur Figma et peut être appliquée pour des conceptions réactives. Ces conceptions s'adaptent automatiquement aux changements tels que la taille du contenu, le placement des objets et le type d'appareil.

La disposition automatique peut être appliquée pour transformer les calques en cadres ou en cadres existants. Pour appliquer la mise en page à un cadre existant, sélectionnez votre calque de texte, puis appuyez sur le raccourci « Shift » « A ». Une fois la mise en page appliquée, vous remarquerez quelques changements.

Vous pouvez commencer par ajouter de la couleur.

La prochaine chose à faire est de réparer le rembourrage du cadre. Une fois le texte de la lettre converti en disposition de cadre automatique, un remplissage est automatiquement ajouté entre le texte et la limite du cadre. À ce stade, le rembourrage semble égal de tous les côtés. Vous pouvez modifier le remplissage inférieur et supérieur pour qu'il soit plus petit que le remplissage droit et gauche.

Vous pouvez mettre à jour le remplissage à votre guise. Le remplissage gauche et droit ou le remplissage supérieur et inférieur peuvent être modifiés en même temps avec les raccourcis ci-dessous :

À ce stade, le bouton semble correct, mais vous pouvez toujours mettre à jour l'étiquette. Vous devez double-cliquer sur le texte pour autoriser l'édition. Tapez les mots « Inscrivez-vous ». Le bouton se redimensionne au fur et à mesure que vous tapez. C'est ainsi que vous concevez un bouton à l'aide de l'outil de mise en page automatique et de texte. Vous pouvez maintenant essayer quelque chose de nouveau, comme transformer le bouton en composant ou ajouter une variante.