Les composants sont au cœur du fonctionnement de Framer.
Ils permettent de réutiliser un élément plusieurs fois sans le recréer.
Un bouton, une carte, une section ou une navigation peuvent devenir des composants.
Quand on modifie le composant principal, toutes les copies se mettent à jour automatiquement.
Un composant permet de garder un design cohérent et d’accélérer la création d’un site.
Ce guide explique pourquoi utiliser des composants et comment en créer un dans Framer.
Pourquoi utiliser des composants dans Framer
Créer un composant permet de résoudre plusieurs problèmes fréquents.
Sans composants, chaque élément doit être modifié manuellement.
Cela devient vite compliqué sur un site complet.
Avec un composant, une seule modification suffit.
Les avantages principaux :
réutiliser un élément sur plusieurs pages
garder un design cohérent
modifier un élément une seule fois
gagner beaucoup de temps
structurer un design system
Exemples d’éléments qui devraient souvent devenir des composants :
boutons
cartes de contenu
sections
témoignages
éléments de navigation
Comprendre la différence entre composant et instance
Dans Framer il existe deux notions importantes.
Le composant principal
C’est la version originale de l’élément.
Les instances
Ce sont les copies utilisées dans les pages.
Quand tu modifies le composant principal, toutes les instances se mettent à jour.
Modifier le composant principal permet de modifier tout le site en une seule action.
Étape 1 : créer l’élément à transformer en composant
Commence par créer un élément normal dans ta page.
Par exemple :
un bouton
une carte
une section
un bloc de contenu
Construis l’élément avec :
texte
image
couleurs
layout
Quand l’élément est prêt, il peut devenir un composant.
Étape 2 : transformer l’élément en composant
Sélectionne l’élément dans la page.
fais clique droit sur ce dernier, puis :
clique sur Create Component
Framer va automatiquement créer un composant dans la bibliothèque du projet.
Ton élément devient alors le composant principal.
Étape 3 : utiliser le composant dans une page
Une fois créé, le composant apparaît dans le panneau Assets.
Pour l’utiliser :
ouvre le panneau Assets
trouve ton composant
glisse le composant dans la page
Chaque élément ajouté est une instance du composant.
Tu peux utiliser le même composant sur :
plusieurs sections
plusieurs pages
plusieurs layouts
Étape 4 : modifier le composant principal
Pour modifier tous les éléments en même temps :
ouvre le composant principal.
Modifie par exemple :
la couleur du bouton
la taille du texte
le padding
la typographie
Toutes les instances du composant se mettront à jour automatiquement.
C’est ce qui rend les composants si puissants dans Framer.
Bonnes pratiques pour utiliser les composants
Créer des composants est simple, mais certaines habitudes améliorent beaucoup l’organisation du projet.
Créer des composants pour les éléments répétés
Si un élément apparaît plusieurs fois sur le site, il devrait devenir un composant.
Donner un nom clair au composant
Exemples :
Button Primary
Card Article
Section Testimonial
Organiser les composants
Créer des composants pour :
boutons
cartes
sections
navigation
Cela facilite la maintenance du site.
Erreurs fréquentes à éviter
Transformer tout en composant
Tous les éléments n’ont pas besoin d’être des composants.
Créer des composants pour les éléments uniques n’est pas utile.
Modifier une instance au lieu du composant principal (Si tu modifies une instance, les autres ne changeront pas).
Il faut modifier le composant principal.
Ne pas nommer les composants
Aller plus loin avec les composants
Les composants deviennent encore plus puissants quand on utilise :
Par exemple, un composant peut servir de modèle pour afficher automatiquement du contenu CMS.
Résumé
Créer un composant dans Framer permet de réutiliser un élément sur plusieurs pages.
Le composant principal est la version originale.
Les instances sont les copies utilisées dans le site.
Les composants permettent :
de gagner du temps
de garder un design cohérent
de modifier un site plus facilement
Apprendre à utiliser les composants est une étape essentielle pour créer des sites Framer propres et évolutifs.
Questions fréquentes sur le sujet
Qu’est ce qu’un composant dans Framer
Un composant dans Framer est un élément réutilisable.
Il permet d’utiliser le même design plusieurs fois dans un site.
Quand le composant principal est modifié, toutes les instances se mettent à jour automatiquement.
