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

Retour à la formation
Chapitre 3 Leçon 4
Précédent
Suivant

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.

Détails de la leçon

Description de la leçon

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.

Objectifs de cette leçon

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.

Prérequis pour cette leçon

Il est recommandé de disposer de notions de base sur Figma (création de texte, utilisation de stacks, gestion des couleurs et styles) ainsi qu’une familiarité avec l’interface utilisateur. Aucun niveau avancé n’est requis.

Métiers concernés

Les compétences développées ici sont directement applicables aux métiers de designer UI/UX, développeur front-end, graphiste numérique et chef de projet digital. La maîtrise de la création de CTA et de preuve sociale améliore la capacité à concevoir des interfaces performantes pour le web et le mobile.

Alternatives et ressources

Des alternatives à Figma incluent Adobe XD, Sketch, ou encore Framer pour la conception d’interfaces et de boutons interactifs personnalisés. Chacun propose des fonctionnalités similaires pour la gestion des composants et des états.

Questions & Réponses

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