CATALOGUE Code & Data Formation Framer Apprendre Framer pour créer son premier site Créer un bouton CTA personnalisé et intégrer une preuve sociale dans Figma

Créer un bouton CTA personnalisé et intégrer une preuve sociale dans Figma

La Hero Section - le bouton personnalisé
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Framer pour créer son premier site
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
49,00€ Ajouter au panier

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
49,00€ Ajouter au panier

Formation incluse dans l'abonnement Elephorm

Je m'abonne à Elephorm

Étapes détaillées pour styliser un bouton et ajouter une social proof

Objectifs

L’objectif consiste à concevoir un bouton CTA stylisé, à configurer ses différents états (normal et hover), à le transformer en composant et à ajouter une section de social proof avec logo, étoiles de notation et texte, le tout dans Figma en respectant les bonnes pratiques de design d’interface.

Résumé

Dans cette vidéo, découvrez comment réaliser un bouton CTA personnalisé et ajouter une section de social proof à une Hero Section dans Figma. L'objectif est de créer un élément d’appel à l’action percutant et professionnel tout en renforçant la crédibilité via l’ajout de logos et d’étoiles. Maîtrisez rapidement toutes les techniques présentées pour améliorer vos interfaces utilisateurs.

Description

La leçon guide l’utilisateur pas à pas dans la création d’un bouton d’appel à l’action personnalisé (CTA) au sein d’une Hero Section sur Figma. Après avoir posé le texte du bouton, l’accent est mis sur le choix de la typographie, la taille (Nonito, 24px, bold), et l’ajustement du padding afin d’atteindre un résultat soigné. Le procédé englobe l’application de couleurs personnalisées, l’arrondissement des bords, et la gestion des styles.

La transformation du bouton en composant réutilisable permet d’ajouter aisément des effets graphiques : bordure colorée, ombre interne noire pour l’effet 3D, et légère ombre blanche pour la lumière. Le positionnement horizontal du texte et de l’icône, le choix d’une flèche dynamique et la mise en place d’un effet hover (changement de couleur et de rotation de la flèche) enrichissent l’interactivité et la visibilité de l’appel à l’action.

La vidéo explique également l’ajout d’une preuve sociale, composée d’une image (logo), d’étoiles de notation (en jaune) et d’un texte, structurés à l’aide de stacks horizontaux et verticaux pour assurer un alignement cohérent et esthétique. Les bonnes pratiques de technique (duplication, réglage du spacing, gestion des états de composants) sont abordées pour optimiser la productivité.

Ce tutoriel, complet et progressif, s’adresse tant aux débutants qu’aux professionnels désireux de perfectionner leur maîtrise des outils Figma pour des interfaces modernes et intuitives. Il est idéal pour apprendre à concevoir une Hero Section efficace, incluant un bouton CTA attractif accompagné d’une preuve sociale convaincante.

Voir plus

Questions fréquentes

Comment créer un bouton CTA stylisé dans Figma selon la vidéo ?
Il faut d’abord créer un texte, choisir la bonne typographie et taille, puis envelopper le texte dans un stack avec un padding ajusté. Ensuite, appliquez une couleur de fond, arrondissez les bords, et transformez-le en composant. Ajoutez un border, des ombres, une icône de flèche, puis créez un état de hover avec changement d’angle de la flèche et de la couleur.
De quelle façon est structurée la zone de preuve sociale ?
La social proof s’articule autour de l’ajout d’une image, d’étoiles de notation et d’un texte. Les éléments sont disposés grâce à des stacks : horizontalement pour l’image et les étoiles, puis verticalement pour placer ensuite le texte en dessous. Les espacements sont rigoureusement ajustés pour garantir l’harmonie de l’ensemble.
Quels effets de survol sont appliqués au bouton dans ce tutoriel ?
Lorsque la souris survole le bouton, la couleur du fond se modifie (orange foncé), et l’icône de flèche pivote à 0 degré, donnant un effet dynamique. Cette transition d’état est gérée via la création d’un variant hover dans le composant sur Figma.