Apprendre Framer en 30 minutes

Framer, à quoi sert l’outil

Framer est un outil de design et de création de sites pensé pour les designers UI et UX. Lancé en 2015 comme outil de prototypage interactif, il a évolué en plateforme no-code qui conçoit, publie et héberge des sites sans passer par un développeur.

Plus léger que Webflow, plus mature que Figma Sites pour construire de vrais sites. En agence : Framer pour les sites plus petits, Webflow pour les projets plus conséquents. Un site de bonne facture se vend à partir de 2000 €.

Les réflexes à prendre avant de designer sur Framer

1. Ajouter tout de suite les breakpoints tablette et mobile. Tu vois le responsive se construire au fur et à mesure au lieu de le découvrir à la fin.
2. Designer sur le desktop. C’est le breakpoint marqué primary, celui qui se répercute sur les autres.
3. Mettre un layout sur presque tous les éléments. Layout est l’équivalent de Flexbox : il aligne le contenu à l’horizontale ou à la verticale, au lieu de laisser des placements libres qui finissent de travers.
4. Poser les tags d’accessibilité. Un tag section sur une section dit aux moteurs de recherche ce qu’ils sont en train de lire.

Construire une hero section dans Framer

La section est une frame en largeur fill, qui prend 100 % de son parent, et en hauteur viewport, l’unité qui exprime un pourcentage de la hauteur d’écran. Dedans, un conteneur d’image en fill sur les deux axes accueille la photo, ratio verrouillé et alignée sur le bas.

Un flou progressif plutôt qu’un flou uniforme

Le dégradé de flou se fabrique avec une frame vide en position absolute, largeur relative à 100 %, sur laquelle tu ajoutes un background blur. Tel quel, le flou est uniforme et donne l’impression d’une vitre. La propriété mask le rend progressif : tu l’inverses, puis tu ajustes la progression au curseur.

Positionner le contenu

Les positions se comprennent vite. Relative garde l’élément dans le flux de son parent, absolute l’en sort, fixed le fige par rapport à la fenêtre, sticky le fait coller.

Le bloc de contenu passe en absolute pour venir par-dessus l’image, en largeur relative à 100 % avec une largeur maximale fixe (1280 par exemple) pour qu’il cesse de s’étirer sur les grands écrans, et un z-index à 2 pour repasser devant le flou.

Framer n’a pas d’élément bouton : c’est une frame en layout centré, en fit content sur les deux axes, avec du padding (12 en haut et en bas, 24 sur les côtés), un radius, un fond sombre et un texte clair.

Rendre la page responsive breakpoint par breakpoint

Le passage en tablette suit toujours la même mécanique : le contenu passé en absolute reprend une place dans le flux en repassant en relative, la section bascule en direction verticale, le conteneur d’image passe de fill à fit content.

Ensuite, tu chasses les tailles fixes. Une largeur maximale posée en desktop empêche le contenu de s’étirer, une hauteur fixe l’empêche de s’adapter. Retire les largeurs maximales, mets tout en fit content, et remplace la distribution space between par un gap quand l’espace se resserre. Les tailles de titre se règlent breakpoint par breakpoint, autour de 36 en tablette et 32 en mobile.

Animer un site avec les effets de Framer

L’apparition au chargement

Les animations vivent dans l’onglet effects du panneau de style. En on appear, tu pars d’un preset ou tu crées ton effet : le contenu monte depuis le bas avec une opacité à 0. La transition se règle en durée, en courbe et surtout en délai, autour de 0,1 seconde sur le second bloc et 0,3 sur l’image de fond, pour que tout n’arrive pas en même temps.

L’animation au scroll

Il faut d’abord de la hauteur à faire défiler : duplique la section, vide-la et donne-lui 100 % de la hauteur d’écran. L’effet scroll transform anime ensuite les propriétés CSS de mise à l’échelle, de déplacement et de rotation, entre un point de départ et un point d’arrivée : l’image de fond grossit jusqu’à un scale de 1,5 en descendant sur l’axe vertical. Le réglage scroll speed complète l’effet : à 70 %, l’image défile moins vite que la page et tu obtiens un parallaxe.

Lier les boutons

Un lien de navigation pointe vers une page ou une section. Pour un bouton réutilisé à plusieurs endroits, crée une variable de lien : chaque instance garde sa propre destination.

Conclusion

Une hero section complète, responsive et animée se monte en une trentaine de minutes sur Framer. L’essentiel n’est pas dans les effets : layout partout, fit content plutôt que taille fixe, un breakpoint à la fois.