Comment créer un bouton dans Figma

Les boutons de conception sur Figma peuvent être créés de différentes manières en utilisant les propriétés de composant 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 explique comment créer des boutons et comment tirer le meilleur parti de Figma.

Création d’un bouton

Les boutons sont des éléments couramment 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 :

1. Créez un nouveau design Figma.

   

2. Ajoutez un cadre en appuyant sur la touche F de votre clavier, puis sélectionnez « bureau » ou « téléphone ».

   

3. Ajoutez un rectangle de 50 pixels de hauteur et 200 pixels de largeur à l’aide de la touche R du clavier.

   

4. Ajoutez du texte en appuyant sur « T » sur votre clavier. Centrez votre texte de sorte qu’il soit au milieu de votre zone de texte horizontalement et verticalement.

   

5. Placez cette zone de texte au milieu de votre rectangle.

   

6. Regroupez les composants comme vous le souhaitez.

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 à partir d’Internet.

Contraste

La couleur du texte à l’intérieur du bouton varie selon qu’il contraste mieux avec un arrière-plan noir ou blanc. Vous pouvez utiliser les deux options pour voir celle qui fonctionne le mieux. Si vous n’aimez aucune des options, vous pouvez ajuster le style et la couleur des boutons.

Création de boutons de base

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

Bouton principal

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

1. Choisissez une couleur pour votre bouton.
2. Choisissez le rectangle, puis appliquez la couleur sélectionnée.

   

3. Texte de couleur en blanc ou noir, selon le meilleur contraste.

   

Bouton secondaire

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 pouvez créer. Il doit également attirer les yeux de l’utilisateur.

1. Changez la couleur de votre rectangle en blanc (#FFFFFF).

   

2. Dans le rectangle, ajoutez un trait. Vous pouvez choisir la couleur que vous préférez ici.

   

3. Changez la couleur de votre texte pour avoir la même couleur que le texte.

   

Bouton tertiaire

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

1. Rendez votre rectangle blanc sans trait.

   

2. Changez la couleur des textes en ce que vous préférez.

   

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é.

Créer un bouton à l’aide de texte, de mise en page automatique et de couleur

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.

Création d’un calque de texte

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

1. Appuyez sur l’outil de texte dans la barre d’outils ou appuyez sur la lettre « T ».

   

2. Lorsque l’outil Texte est actif, appuyez sur votre canevas et entrez le mot « Bouton ». Notez que le nom du calque de texte correspondra à tout ce qui est tapé sur le canevas, sauf s’il est modifié manuellement dans le panneau des calques.

   

3. Si le nom du calque doit être modifié, double-cliquez sur la barre latérale gauche, puis saisissez le nouveau nom que vous avez choisi.

   

Maintenant, vous pouvez également jouer avec la taille de la police en l’augmentant ou en la diminuant.

1. Sélectionnez votre calque de texte.

   

2. Accédez à la barre latérale droite et modifiez la taille de la police dans la section « Texte ». Vous pouvez également modifier la police ou vous en tenir à l’option par défaut.

   

Convertissez votre calque de texte en cadres de mise en page automatique

À ce stade, le bouton doit être modifié 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 mise en page 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 « Maj » « A ». Une fois la mise en page appliquée, vous remarquerez quelques changements.

• Le calque de texte sera dans un cadre. La mise en page automatique n’est appliquée qu’aux composants et aux cadres, donc Figma place automatiquement le calque de texte dans le nouveau cadre. Le cadre n’a pas de couleur de remplissage. Ceci est appliqué dans l’étape de style du bouton.
• Lors de la sélection de votre cadre, les paramètres de mise en page automatique s’affichent dans la barre latérale droite. Les mises en page automatiques peuvent être modifiées davantage.
• Vous remarquez que le cadre se rétrécit et s’agrandit avec les changements de texte. Avec de tels éléments dynamiques, vous gagnez du temps pour concevoir le contenu affiché sur divers appareils ou traduit dans d’autres langues.

Styliser le bouton

Vous pouvez commencer par ajouter de la couleur.

1. Choisissez un calque de cadre, puis choisissez « Paramètres de remplissage » dans la barre latérale droite. Cela remplit la couleur
   automatiquement. Le sélecteur de couleur change la couleur.

   

2. Sélectionnez le calque de texte et ajustez le remplissage sur #FFFFFF.

   

3. Choisissez à nouveau le cadre, puis utilisez le paramètre de la barre latérale droite pour ajuster le rayon du coin.

   

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

Vous pouvez mettre à jour le rembourrage à votre guise. Les rembourrages gauche et droit ou les rembourrages haut et bas peuvent être modifiés en même temps avec les raccourcis ci-dessous :

• Maintenez <⌥ Option> ou <Alt>, puis cliquez sur la zone de remplissage pour saisir la valeur de remplissage pour les côtés opposés
• Maintenez <⌥ Option> ou <Alt> tout en faisant glisser les poignées pour modifier le remplissage des côtés opposés

À ce stade, le bouton semble bon, mais vous pouvez toujours mettre à jour l’étiquette. Vous devez double-cliquer sur le texte pour permettre la modification. Tapez les mots « S’inscrire ». 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 et de texte automatique. Vous pouvez maintenant essayer quelque chose de nouveau, comme transformer le bouton en composant ou ajouter une variante.

Créer un bouton cliquable

Figma est utilisé par des entreprises comme Uber, Facebook, Google et Netflix. La fonction de bouton cliquable permet aux concepteurs de ces entreprises de créer plus facilement des boutons interactifs et cliquables. Les boutons facilitent grandement la navigation sur ces plateformes.

Voici comment développer de tels boutons dans Figma :

1. Choisissez l’option « Prototype » dans le menu (à droite).

   

2. Cliquez sur l’icône « Plus » (+) située sous l’onglet Prototype. Cela vous permet d’ajouter une interaction.

   

3. Choisissez « Au clic » dans la fenêtre des détails de l’interaction.

   

4. Sélectionnez l’option « Ouvrir le lien ».

   

5. Ajoutez le lien de la page où le bouton dirigera une fois cliqué.

   

6. Appuyez sur l’icône « X » pour quitter la fenêtre des détails de l’interaction.

   

7. Accédez au bouton d’option « Jouer » dans le coin supérieur droit.

   

8. Appuyez sur le bouton « Jouer » pour obtenir un aperçu du design.

Si vous passez le curseur sur votre bouton, il se transforme en une icône en forme de main. Cela indique que le bouton est maintenant cliquable.

Remarque : lors de la création du bouton Figma cliquable, utilisez toujours « Au clic », et non « Au glissement ». « Au clic » permet d’ajouter un lien cliquable au bouton éventuel. Les boutons « On drag » ne peuvent pas être cliqués.

Concevez mieux avec les boutons Figma

Les boutons Figma ont des variables telles que le thème, l’état, le rembourrage interne, la longueur, la largeur et la hauteur du tableau. En apprenant à créer des boutons sur la plate-forme, vous pouvez tirer le meilleur parti de Figma et ajouter des composants à valeur ajoutée dans la bibliothèque Figma.

Avez-vous essayé de créer des boutons sur Figma ? Si oui, quelle a été votre expérience ? Faites-nous savoir dans la section commentaires ci-dessous.