Design bouton - Comment rendre vos boutons attrayants ?

Le tuto Figma gratuit de Petit Hack

Cercle outils webmarketingPetit cercle bannièreGrand cercle bannière

Vous trouvez votre prototype bien triste et vide ? C'est certainement parce que vous n'avez pas assez joué avec Figma. Figma vous permet de modifier vos éléments. Ajout de couleur, de bordure, d'ombre, vous pouvez faire de nombreuses choses et personnaliser le plus possible vos textes, images, boutons, etc.

Ajouter des effets à vos éléments

Pour customiser vos boutons, images, style d'écriture, vous pouvez y ajouter des effets, changer les couleurs, modifier l'épaisseur des bordures pour créer un prototype qui vous ressemble, et plus approfondi.

Suivez les étapes suivantes :

  • Pour modifier les contours, et avoir des angles arrondis, allez en haut à droite de votre écran, dans la partie "design", et choisissez d'arrondir vos angles plus ou moins en glissant votre souris sur le symbole qui représente une ligne courbée. Vous obtiendrez des contours arrondis comme sur la capture d'écran ci-dessous.
arrondir les angles
Arrondissez vos angles
bouton arrondi
Voici l'exemple de votre bouton arrondi
  • Si vous avez envie de mettre des contours à vos éléments, cliquez sur "Stroke", dans la barre de menu verticale de droite, puis choisissez leur épaisseur, et leur couleur.
changer les bordures
Modifiez les bordures
  • Pour ajouter des effets, cliquez en dessous de "stroke", sur l'onglet "effects", et choisissez celui que vous souhaitez. Sur l'exemple du bouton ci-dessous, l'effet choisi est l'effet "drop shadow"
ajouter effet
Ajoutez un effet en cliquant dans "effects"
effet drop shadow
Ajoutez l'effet "drop shadow"
bouton avec bordures et effets
Voici le résultat de votre bouton

Créer du contenu responsive avec les contraintes

En essayant de créer vos prototypes, vous vous êtes peut être rendu compte que votre contenu ne s'adaptait à votre frame si vous en modifiez sa taille ? C'est normal, il y a une petite manipulation à faire dont on avait pas encore parlé.

Si vous êtes dans cette galère, je vous laisse regarder la vidéo qui ne dure que quelques minutes !

Savoir où positionner ses calls-to-action

Vous vous êtes peut-être demandé où devriez-vous mettre vos calls-to-action dans vos prototypes ?

Bien positionner vos CTA va vous permettre de créer un véritable entonnoir de conversion clients sans même qu'ils s'en aperçoivent. Redirigez-les par exemple, de votre page d'accueil vers votre page à propos, puis de votre page à propos vers votre blog, et de votre blog vers vos pages produits/services.

S'ils sont intéressés par ce que vous proposez, ils voudront en savoir plus.

Leur permettre d'accéder facilement, en un clic, à du contenu additionnel, cela les transformera de simples visiteurs en clients, rapidement et facilement.

Ne négligez donc pas leur importance et leur position sur vos pages.

Cet article fait partie de la formation Figma.