Pourquoi créer un bouton cliquable sur Framer

Un bouton sert à déclencher une action claire pour l’utilisateur.

Par exemple:

• aller vers une page

• ouvrir un lien externe

• envoyer un email et/ou appeler un numéro de téléphone (voir ce guide complet)

Étape 1. Créer la structure du bouton

On commence par la base.

1. Ajoute un Frame sur ta page

2. Ajoute lui un Stack

3. Passe le Stack en layout horizontal

Ce Stack va contenir

• le texte

• l’icône

C’est lui qui gère l’alignement entre les éléments.

Étape 2. Ajouter le texte du bouton

1. Ajoute un Text dans le Stack

2. Écris le texte du bouton (Exemple ici: En savoir plus)

3. Ajuste la typographie (Font, taille, graisse, couleur ..)

Le texte doit rester lisible et clair.
Inutile de trop styliser à ce stade.

Étape 3. Ajouter une icône avec les librairies Framer

Framer propose des librairies d’icônes directement intégrées, sans plugin externe.

Pour y accéder: Insert → Icons

1. Sélectionne ton Stack

2. Ajoute lui un élément Icon

3. Place l’icône avant ou après le texte

4. Choisis une icône appropriée

Pour l’espacement
• utilise le spacing du Stack
• évite les marges manuelles

Grâce au layout horizontal, l’alignement reste propre sur desktop et sur mobile

Étape 4. Styliser le bouton

Une fois la structure en place, tu peux donner un vrai aspect bouton.

Sur le Frame parent

1. ajoute une couleur de fond

2. définis un border radius

3. applique un padding confortable

Le bouton doit être
• clairement identifiable
• facile à cliquer
• cohérent avec le design du site

Étape 5. Transformer le bouton en composant

Si tu veux travailler proprement sur Framer, cette étape est indispensable.

1. Sélectionne ton bouton

2. Crée un composant

3. Renomme le clairement

Tu peux maintenant le réutiliser sur tout ton site.

Étape 6. Rendre le bouton cliquable

Pour ajouter une interaction, rentre dans le composant que tu viens de créer

1. Sélectionne le Frame principal du bouton

2. Rends toi dans 'Link"

3. Renseigne le lien vers lequel tu veux renvoyer

Tu peux par exemple
• ouvrir une page interne
• rediriger vers un lien externe
• envoyer un email

Ton bouton est maintenant cliquable.

Pourquoi utiliser des variables dans ce bouton

Si tu veux dupliquer ton bouton sur tes pages, tu devras potentiellement:
• changer le texte
• changer le lien
• changer l’icône
sans modifier le composant de base, sinon il modifiera

Pour cela tu dois utiliser des variables dans le composant.

Les variables permettent de
• modifier le contenu d'un composant précis
• conserver un design cohérent

C’est un énorme gain de temps.

Pour comprendre cette logique en détail, je t’explique tout dans la vidéo dédiée à la création de variables dans les composants Framer.

👉 Voir la vidéo
Comment créer des variables dans les composants sur Framer

Erreurs courantes à éviter

• Créer un bouton sans Stack
• Aligner les éléments avec des marges manuelles
• Ne pas transformer le bouton en composant
• Modifier le composant au lieu d’utiliser des variables

Ces erreurs ralentissent énormément le travail sur Framer et peuvent même casser le design ou les fonctionnalités

Et si tu veux aller plus loin

Ce bouton est volontairement simple.
Il constitue une base saine et réutilisable.

Une fois les bases maîtrisées, tu pourras

• ajouter des animations

• créer des effets au survol