Tu viens de créer ta première page sur Framer.

Tu ajoutes un texte, une image, un bouton.

Et là, tout se superpose.

• Rien ne s'aligne.

• Le bouton disparaît sous l'image.

Le responsive est déjà cassé alors que tu n'as encore rien publié.

Dans 90 % des cas, le problème vient du layout.

Les layouts sont la fondation de tout ce que tu construis sur Framer. Ils définissent comment les éléments se positionnent les uns par rapport aux autres à l'intérieur d'un frame.

Sans layout, chaque élément est posé au pixel. Avec le bon layout, tout s'organise automatiquement.

Framer propose trois types de layouts : vertical, horizontal et grid. Comprendre quand utiliser chacun d'eux change tout dans la vitesse et la qualité de ce que tu produis.

C'est quoi un layout sur Framer

Un layout est une règle d'organisation appliquée à un frame parent.

Il détermine comment les enfants de ce frame se comportent : dans quelle direction ils s'empilent, comment ils se répartissent et comment ils réagissent quand l'espace change.

Tu actives un layout depuis le panneau de droite, dans la section "Layout" de n'importe quel frame sélectionné.

Sans layout, les éléments se superposent. Framer ne sait pas comment les organiser.

Avec un layout, les éléments suivent une logique. Et cette logique est la base du responsive sur Framer.

Le layout vertical

Empiler les éléments de haut en bas

Le layout vertical est le plus utilisé sur Framer.

Les éléments s'empilent les uns sous les autres, dans l'ordre où ils apparaissent dans le panneau Layers.

C'est le layout de base pour structurer une page. Une page Framer, c'est presque toujours une pile verticale de sections : hero, services, témoignages, footer.

Quand l'utiliser

Le layout vertical est le bon choix dès que des éléments se suivent de haut en bas. Une section complète, une card avec titre, texte et bouton, un formulaire avec ses champs, tout ça est vertical.

Les réglages importants

Gap : c'est l'espacement entre chaque élément enfant. Un gap de 20px signifie 20 pixels entre chaque bloc. Ne jamais utiliser de padding ou de margin pour espacer des éléments dans un layout. Le gap est fait pour ça.

Align : détermine comment les enfants se positionnent horizontalement dans le parent. Tu peux les centrer, les aligner à gauche ou à droite.

Distribute : répartit les enfants verticalement dans l'espace disponible. "Space between" pousse le premier élément en haut et le dernier en bas, avec un espace égal entre chacun.

Le layout vertical couvre à lui seul 60 % de ce que tu construis sur Framer.

Le layout horizontal

Aligner des éléments côte à côte

Le layout horizontal sert à placer des éléments sur une même ligne.

C'est le layout qu'on utilise à l'intérieur des sections, pas pour structurer la page elle-même. Un bouton avec une icône, une image à côté d'un texte, des colonnes dans une section, une navbar : tout ça est horizontal.

Quand l'utiliser

Dès que deux éléments ou plus doivent être alignés sur la même ligne. C'est aussi le layout utilisé pour les colonnes de contenu quand tu ne veux pas la rigidité d'un grid.

Les réglages importants

Gap : même logique que le vertical, mais l'espacement est horizontal entre les éléments.

Align : ici, l'alignement contrôle la position verticale des enfants. Tu peux les centrer verticalement dans la ligne, les aligner en haut ou en bas. C'est très utile quand un texte et une icône n'ont pas la même hauteur.

Wrap : le réglage le plus sous-estimé. Quand Wrap est activé, les éléments qui ne rentrent plus sur la ligne passent automatiquement à la ligne suivante. C'est la base pour créer des grilles flexibles qui s'adaptent au responsive sans toucher au breakpoint mobile.

Si tu ne connais pas encore Wrap, retiens ça : c'est souvent la meilleure alternative au grid pour les débutants.

Lien avec les tailles

Un layout horizontal ne fonctionne bien que si les tailles de tes éléments sont cohérentes. Si tout est en Fixed, tes éléments vont se serrer ou déborder. Si un élément est en Fill, il prendra tout l'espace restant. C'est ce qui rend le duo layout + tailles si important à comprendre ensemble.

Le layout grid

Organiser des blocs en grille

Le layout grid place les éléments dans une grille définie par colonnes et lignes.

C'est le layout le plus structuré. Tu définis le nombre de colonnes, le nombre de lignes (ou tu laisses Framer les calculer), et les éléments se placent automatiquement dans les cellules.

Quand l'utiliser

Le grid est idéal quand tu dois afficher plusieurs blocs de même type : une section de 4 services, un portfolio avec des projets, une galerie d'images, une grille de témoignages.

En revanche, pour deux colonnes simples (texte à gauche, image à droite), un layout horizontal avec Fill suffit largement. Le grid ajoute de la complexité qui n'est pas toujours nécessaire.

Les réglages importants

Columns et Rows : le nombre de colonnes et de lignes de ta grille. Par exemple, 3 colonnes avec 2 lignes pour afficher 6 cards de services.

Gap : l'espacement fonctionne en deux dimensions. Tu peux définir un gap horizontal (entre les colonnes) et un gap vertical (entre les lignes) séparément.

Le grid est puissant, mais commence par le vertical et l'horizontal. Ne passe au grid que quand tu en as vraiment besoin.

Comment choisir le bon layout

La question à te poser est toujours la même : dans quelle direction tes éléments doivent ils s'organiser ?

• Les éléments se suivent de haut en bas → layout vertical.

• Les éléments sont côte à côte → layout horizontal.

• Les éléments forment une grille régulière → layout grid.

Dans le doute, commence par vertical. C'est le choix le plus sûr et le plus flexible.

Si tu débutes sur Framer, le guide complet pour créer un site Framer montre concrètement comment ces layouts s'utilisent dans un vrai projet, étape par étape.

Gap et alignement : les deux réglages à maîtriser en priorité

Quel que soit le layout choisi, deux réglages reviennent partout.

Le gap remplace tout ce que tu pourrais faire avec du padding ou du margin entre les éléments. C'est plus propre, plus prévisible, et ça fonctionne automatiquement même quand tu ajoutes ou supprimes un élément.

L'alignement contrôle la position des enfants dans l'axe perpendiculaire au layout. Dans un layout vertical, l'alignement est horizontal. Dans un layout horizontal, l'alignement est vertical. C'est contre-intuitif au début, mais une fois compris, ça devient naturel.

Une erreur très fréquente : essayer de centrer un élément en ajustant sa taille au lieu de changer l'alignement du parent. Si ton texte n'est pas centré dans ta section, ce n'est pas le texte qu'il faut modifier. C'est l'alignement du frame parent.

Imbriquer les layouts

Un site Framer n'utilise jamais un seul layout. C'est l'imbrication de plusieurs layouts qui crée une structure complète.

Voici la logique la plus courante : la page est un layout vertical (les sections s'empilent). Chaque section contient un layout vertical (titre, sous-titre, contenu). À l'intérieur d'une section, un groupe d'éléments utilise un layout horizontal (image à gauche, texte à droite). Et dans le texte, un autre layout vertical empile le titre, le paragraphe et le bouton.

C'est cette logique d'imbrication qui rend Framer si puissant. Et c'est aussi pour ça que la structure des layers dans le panneau gauche est si importante.

Si tu veux aller plus loin sur le positionnement d'éléments qui sortent du flux (badges, décorations, navbar fixe), le guide sur les positions Framer couvre Relative, Absolute, Fixed et Sticky en détail.

Erreurs fréquentes avec les layouts

Ne pas activer de layout

C'est l'erreur numéro un. Un frame sans layout empile tout au même endroit. Si tes éléments se superposent, la première chose à vérifier est le layout du parent.

Utiliser un grid pour deux éléments

Deux colonnes, c'est un layout horizontal avec deux enfants. Le grid est fait pour les structures plus larges.

Oublier le gap et compenser avec du padding

Le gap est l'outil natif pour espacer les éléments enfants. Le padding sert à l'espace entre le bord du parent et son contenu. Les deux ont un rôle différent.

Corriger le responsive en changeant les layouts au lieu de la structure

Si ton layout casse sur mobile, le problème vient rarement du layout lui-même. Il vient presque toujours des tailles des éléments enfants. Avant de toucher au layout, vérifie que tes éléments ne sont pas en Fixed là où ils devraient être en Fill ou Fit content.

Ne pas nommer ses frames

Quand tu as 30 frames imbriqués, sans noms clairs dans le panneau Layers, tu ne retrouves plus rien. Nomme tes frames en fonction de leur rôle : "Section Hero", "Row Services", "Card Témoignage".

Layouts et composants

Les layouts sont encore plus puissants combinés aux composants Framer. Un composant bien structuré avec le bon layout interne reste cohérent partout où tu le réutilises. Et quand tu modifies le layout du composant principal, toutes les instances se mettent à jour.

C'est ce qui te permet de construire un vrai design system et de gagner un temps considérable sur tes projets.

Voir les layouts en action

Si tu préfères voir les layouts expliqués visuellement, une vidéo dédiée est disponible. Elle montre concrètement comment choisir et configurer chaque layout dans un vrai projet.

👉 Voir la vidéo : comprendre les layouts sur Framer

Résumé

• Les trois layouts Framer couvrent tous les cas de mise en page.

• Le layout vertical empile les éléments de haut en bas. C'est la base de toute page.

• Le layout horizontal aligne les éléments côte à côte. C'est ce qui crée les colonnes et les rangées.

• Le layout grid organise les éléments dans une grille structurée. C'est fait pour les répétitions.

Maîtriser ces trois layouts, c'est maîtriser la structure de n'importe quel site Framer. Tout le reste, le responsive, les tailles, les positions, repose là-dessus.

👉 Pour continuer ta progression, les cours Framer Campus reprennent ces concepts en vidéo avec des projets concrets.

👉 Et si tu veux créer sans repartir de zéro, les templates et ressources sont pensés pour ça.