Projet 2 - Stratégie et contenus digitaux

Design web (no code)

Création du hero section promotionnel pour présenter votre marque ou votre campagne marketing.

✅ Remise

📁 Livrable final

1 - Hero section

Remix Link vers votre hero section

Remise et avis

Auto-évaluation

🧭 Objectifs

À la fin de cet atelier, tu auras développé ces compétences :

Comprendre en profondeur les outils de structure, design, données et interactions dans Framer
Maîtriser la création de pages responsives avec contenu dynamique
Savoir styliser, animer et publier un site professionnel sans code

🏗️ L'atelier

Exercices

Exercice 1 : Reproduction de section

Ajoutez une section pré-conçues par Framer (via le bouton "+") et tentez de la reproduire. Attention, il faut qu'elle soit "responsive".

Livrable final

Livrable 1 : Hero section

Concevoir une section d’introduction visuellement forte (Hero section) pour votre marque fictive, en respectant les principes de design web. Votre hero section doit minimalement comprendre :

Titre

Le titre devrait indiquer au client ce qu'il gagne à faire affaire avec vous, pas un feature. Il doit être accrocheur et amener le visiter à continuer sa lecture.

Sous-titre

Le sous-titre est un petit paragraphe qui explique "comment" ou le contexte. Tu peux détailler un feature, le résultat, etc.

Call to action (CTA - Invitation à l'action)

L'action qu'on veut que le visiteur prenne doit être obvious. Ça devrait aussi inciter à l'action dans le genre :

"Essaie gratuitement!"
"Obtiens une soumission"
"Voir les forfaits"
"Lancer un projet"
"M'inscrire"

Visuel

Cet élément établi le lien emotionnel et renforce le message. Une image de haute qualité. Ça devrait être la plus belle image de votre site. Ce n'est cependant pas obligé d'être une image - ça peut être une courte vidéo en boucle, un visuel abstrait interessant, etc. Tant que ça supporte le message et "set le mood" de votre site.

Barre de navigation

La barre de navigation (menu) devra contenir les sections pertinentes et votre logo (ou votre nom).

Vous devrez aussi :

Créer les visuels à intégrer à votre hero section
Créer le contenu textuel
Utiliser les outils de layout (Stack ou Grid) pour une structure claire et surtout responsive
Utiliser une palette cohérente et des typo lisible avec un bon contraste
Ajouter au moins une interaction simple (Par exemple un effet de survol (hover) sur le bouton
Ajuster les réglages de votre site (Image preview, Favicon, etc.)
Publier votre site

Méthodologie :

Création d'une planche d'inspiration (Moodboard si vous avez changé de concept de marque)
Créer une maquette de votre hero section (breakpoint desktop, tablette et mobile) sur Figma
Reproduire la maquette sur Framer en prenant en compte le responsiveness et les frames dessinés par dessus la maquette
Ajouter le breakpoint tablette et mobile
Publier le tout

🎓 La théorie

C'est quoi Framer ?

Framer est un outil de création de sites web qui ne demande aucune connaissance en code. Tu peux construire, animer et publier un site moderne juste avec ta souris et ton clavier.

Tout se fait visuellement, avec des blocs qu’on appelle “frames”, des piles (“stacks”) et des grilles (“grids”). Framer te permet aussi de gérer ton contenu facilement grâce à un CMS intégré. En un clic, ton site est en ligne.

Introduction à Framer

Créez votre compte Framer
en utilisant votre courriel CyberCap ou votre courriel personnel, mais assurez-vous d'avoir accès facilement à ce courriel car vous devrez utiliser un lien vous étant envoyé pour vous connecter à la plateforme.

L'interface

Avant de commencer à construire, il est essentiel de se familiariser avec l’interface. Elle est composée de quatre zones principales :

La barre d’outils (Toolbar)

Située en haut de l’interface, elle contient plusieurs éléments :

À gauche :

Logo Framer : ouvre le menu principal avec les préférences, actions générales et raccourcis du projet (équivalent à la barre de menu d’un Mac/PC).
Bouton “Insert” (I au clavier) : permet d’ajouter des pages, des sections, des éléments de design, des composants interactifs sans écrire de code.
Boutons Layout et Texte : pour ajouter rapidement les blocs de base (frames, stacks, textes).
Bouton CMS : ouvre l’interface dédiée à la gestion de contenu (collections & items).
Barre d’action rapide (Cmd+K ou Ctrl+K) : permet de chercher et exécuter n’importe quelle action sans naviguer dans les menus (gain de temps considérable).

Au centre :

Nom du projet : cliquable pour renommer ou déplacer dans un autre dossier.
URL du site publié (si applicable) : lien cliquable pour voir la version en ligne.

À droite :

Avatars des collaborateurs (en mode collaboratif)
Paramètres de localisation (langues, régions)
Prévisualisation (Preview mode)
Invitations : ajouter des collaborateurs au projet
Bouton Publier : mise en ligne ou mise à jour rapide du site

La barre latérale gauche (Left Sidebar)

Cette barre est divisée en trois panneaux principaux :

Pages : permet de créer, renommer, organiser les pages du site
Layers : liste hiérarchique des éléments présents dans la page sélectionnée
Assets : comprend tous les composants, styles et éventuels fichiers de code

La barre latérale droite (Right Sidebar)

Il s’agit du panneau des propriétés. Il est contextuel : il affiche uniquement les options pertinentes pour l’élément sélectionné.

Exemples :

Sélectionner un texte montre : police, taille, alignement, graisse, espacement…
Sélectionner un breakpoint montre les paramètres de mise en page responsive

C’est ici que se règlent toutes les propriétés visuelles, fonctionnelles et dynamiques.

Le canevas (Canvas)

C’est la zone de création où tu places tes éléments.

Chaque page a son propre canevas.
Tu peux y glisser du contenu librement.
Contenu du site organisé par Breakpoints, qui définissent les versions pour chaque type d’écran
Seuls les éléments placés dans un Breakpoint seront publiés.

Tu peux utiliser le canevas comme espace de travail temporaire (ex : essais de design, duplicatas, palettes de couleurs, etc.)

Outils du bas de canevas :

Découvrez les outils de la barre du bas :

Outil Pan (main) : activer avec la barre d’espace (pour se déplacer dans la scène)
Commentaires : possibilité d’ajouter des notes/commentaires directement sur le canevas
Mode sombre / clair : change aussi l’apparence du site si configuré
Contrôles de zoom :
- Zoom to fit, Zoom to selection, Zoom 100%
- Raccourcis pour naviguer rapidement et avec précision

L'anatomie d'un projet Framer

Avant de construire quoi que ce soit dans Framer, il est important de comprendre comment un projet est structuré. Voici les différentes couches logiques qui composent l’architecture d’un projet Framer.

Workspace, dossiers et projets

Workspace (espace de travail) : Il s’agit de ton tableau de bord principal dans Framer. Il contient tous tes projets.
Dossiers (facultatifs) : Utilisés pour organiser visuellement tes projets ou regrouper certains ensembles.
Projet : Chaque projet = un site web. Il peut être publié, dupliqué, renommé à volonté.

Un projet Framer = un site web. Tu décides quand le publier, et sur quel URL.

Les breakpoints

Un breakpoint est une version d’une page optimisée pour une largeur d’écran spécifique. Par défaut, Framer crée un breakpoint desktop (1200px). Tu peux en ajouter pour : tablette, mobile, ultra-wide, etc.

Responsive Design

Tu n’as pas à tout recréer à chaque taille d’écran. Framer permet de réutiliser les éléments et styles entre les breakpoints tout en personnalisant leur disposition.

Les Frames

Le Frame est le bloc fondamental de tout design dans Framer. C’est comme une div en HTML, mais plus visuelle et polyvalente.

Un frame peut :

Contenir d’autres frames (imbriqués)
Être stylisé (fond, bordure, ombre, radius)
Organiser son contenu avec un layout (None / Stack / Grid)

Bon à savoir :

Il n’existe pas de “rectangle” dans Framer : tout est fait avec des frames. On utilise un frame pour :

créer une section,
grouper des éléments,
construire une carte de contenu,
structurer une mise en page entière.

Les calques (Layers)

Maîtriser les interactions avec les calques (layers) et la navigation dans le canevas (canvas) est fondamental pour gagner en efficacité, que l’on débute avec Framer ou que l’on soit déjà expérimenté.

Sélectionner des calques

Sélection directe :

Dans Framer, un seul clic suffit pour sélectionner n’importe quel calque, même s’il est profondément imbriqué.
Pas besoin de double-clic ou de maintenir une touche (comme dans Figma ou Sketch).

Remonter dans la hiérarchie :

Appuie sur Échap pour sélectionner le parent direct du calque sélectionné.
Astuce : chaque calque n’a qu’un seul parent, donc cette logique est fiable et prévisible.

Utilisation de Command/Ctrl :

Dans Framer, Command (Mac) / Ctrl (PC) sert à sélectionner le parent direct d’un calque (et non à forcer la sélection comme dans Figma).

Personnalisation du comportement :

Tu peux activer/désactiver la sélection directe dans les préférences (Preferences > Use Direct Selection).

Sélection multiple

Maj + clic : pour ajouter plusieurs calques à la sélection.
Sélection par rectangle :
- Clique et fais glisser pour sélectionner plusieurs calques à l’écran.
- Par défaut, tout calque touché par la sélection est inclus.
- Maintiens Alt (Option) pour ne sélectionner que les calques entièrement contenus dans la sélection.

Naviguer dans des calques imbriqués

Le panneau Layers à gauche permet de :
- Voir toute la hiérarchie des calques sur la page.
- Identifier les calques contenant d’autres éléments (leur icône devient bleue).
- Cliquer sur les triangles d’ouverture pour explorer le contenu.
Astuce : Maintiens Alt/Option et clique sur un triangle pour déployer toute la hiérarchie d’un coup.

Déplacer des calques (en position absolue)

(Les notions de layout seront abordées plus tard. Ici, on reste en position libre)

Glisser-déposer : déplace librement un calque si sa position est définie sur "absolute".
Cmd + Option + clic (Mac) ou Ctrl + Alt + clic (PC) : déplace la sélection en gardant le focus.
Flèches du clavier : déplacement pixel par pixel.
- Maj + flèche : déplacement par 10 pixels.
- Ces valeurs sont personnalisables via le zoom en bas du canevas > Nudge Amount.
Alignement et distribution :
- Lorsque plusieurs calques sont sélectionnés, des options d’alignement et de distribution apparaissent en haut du panneau de propriétés (Inspector).

Imbrication automatique des calques

Framer imbrique automatiquement un calque dans un autre si :
- Tu le déplaces entièrement à l’intérieur d’un autre frame.
- Tu dessines un nouveau frame à l’intérieur d’un autre.
Empêcher l’imbrication automatique :
- Maintiens Espace pendant le glisser-déposer pour superposer un élément sans l’imbriquer.

Navigation dans le canevas

Panoramique :
- Défilement souris/pavé tactile pour se déplacer dans le canevas.
- Ou maintiens Espace pour activer l’outil pan, puis clique-glisse.
Zoom :
- Utilise Z pour activer l’outil Zoom :
  - Clique pour zoomer.
  - Option/Alt + clic pour dézoomer.
  - Clique-glisse pour zoomer sur une zone précise.
Raccourcis utiles :
- Zoom to Fit : ajuste la vue à tout ce qui est visible sur le canevas.
- Zoom to Selection : zoom sur le(s) calque(s) sélectionné(s).
- Zoom 100% : revient à l’échelle réelle.
Tous les raccourcis de navigation sont visibles en cliquant sur le niveau de zoom en bas à gauche du canevas.

Conseils de productivité

Quelques astuces pour te rendre plus productif :

Développe ta mémoire musculaire : répète ces gestes et raccourcis régulièrement pour gagner en rapidité.
Utilise la navigation hiérarchique (Escape, Layers Panel) pour éviter les clics multiples.
Adapte les préférences à ton style (sélection directe vs style Figma).
Utilise Alt + clic ou Cmd/Ctrl + Option/Alt pour des interactions rapides.

Structure

La structure de tous les sites web, quel que soit l’outil utilisé, repose sur une réalité simple : des rectangles imbriqués les uns dans les autres. Dans Framer, ces rectangles sont appelés frames. Ils sont l’élément fondamental sur lequel repose toute la mise en page.

Avant de plonger dans la pratique, familiarisons-nous avec quelques termes clés utilisés dans l’organisation des éléments dans Framer :

Frame : Un rectangle qui peut contenir d’autres éléments, y compris d’autres frames. Il peut être visible ou purement structurel.
Nested : Lorsqu’un élément est placé à l’intérieur d’un frame, on dit qu’il est imbriqué ou enfant (child) du frame.
Parent : Le frame qui contient un autre calque (layer).
Siblings (frères/sœurs) : Des éléments qui se trouvent au même niveau de hiérarchie dans un frame.

Polyvalence des Frames

Un frame dans Framer n’est pas qu’un simple rectangle :

Il peut être stylisé : fond, bordure, ombre, rayon, opacité, transformations, etc.
Il peut être structurel : invisible mais servant à grouper ou organiser d'autres éléments.
Il peut adopter des layouts intelligents (stack, grid, etc.).
Il peut être utilisé comme :
- Une section complète d’un site
- Un conteneur pour un groupe d’éléments
- Une carte de contenu
- Un bloc de texte ou image
- Un élément décoratif ou interactif

Même les zones de texte sont en réalité des frames avec des propriétés de texte.

Créer un Frame dans Framer

Méthode 1 : Dessiner un frame manuellement

Ouvre le Layout menu dans la barre d’outils et sélectionne Frame Tool
Ou bien, appuie sur F sur ton clavier
Clique-glisse sur le canevas pour dessiner ton frame

🔧 Modifier sa taille et position précisément via le panneau de droite (Inspector)

Raccourcis utiles en dessinant un frame :

Shift : contraint la forme à un carré parfait
Alt (Option) : dessine à partir du centre
Espace : permet de déplacer le rectangle en cours de dessin avant de le relâcher

Ajouter des éléments à un Frame

Si tu fais glisser un élément dans un frame, il sera automatiquement imbriqué à l’intérieur (tu verras une bordure bleue).
Pour empêcher l’imbrication automatique, maintiens la barre d’espace pendant le déplacement.

Important : Framer imbrique automatiquement si un élément est entièrement déposé dans un autre.

Créer un Frame parent autour d’éléments existants

Tu réalises que tu veux grouper plusieurs éléments dans un frame ? Voici comment faire :

Sélectionne plusieurs calques
Clique droit > Add Frame
Ou utilise le raccourci :
- Cmd + Return (Mac)
- Ctrl + Enter (PC)

Supprimer un frame parent sans supprimer les enfants

Cmd + Delete (Mac) ou Ctrl + Delete (PC)
Les enfants seront conservés et replacés dans le canevas

Positionnement absolu (Absolute Positioning)

Créer un site web, c’est souvent comme jouer avec des blocs visuels. Le positionnement absolu permet justement cette liberté : on peut glisser les éléments exactement où on veut, un peu comme dans Figma ou Sketch. Mais dans le cadre d’un site structuré et réactif, il faut aller plus loin que simplement placer des blocs à l’œil.

Les 4 types de positionnement dans Framer

Avant de plonger dans les détails, voici les quatre grands types de positionnement disponibles dans Framer :

Absolute : L’élément est placé manuellement par rapport à son parent
Relative : L’élément suit le flux dans un Stack ou une Grid
Fixed : L’élément est fixé à une position dans l’écran (viewport), même lorsqu’on fait défiler la page
Sticky : L’élément passe de relative à fixed lorsqu’il atteint le haut ou le bas de son parent

💡 Ce module se concentre uniquement sur le positionnement absolu, pour bien poser les bases.

Qu’est-ce que le positionnement absolu ?

Avec le positionnement absolu :

Tu places manuellement un élément où tu veux dans son frame parent
Il ignore les autres éléments autour de lui (ses "frères/sœurs")
Tu es libre, mais tu dois réfléchir à la réactivité de ta mise en page

Par défaut, tous les nouveaux éléments dans Framer sont en position absolute.

Définir la position dans Framer

Contrairement à Figma ou Sketch, qui utilisent juste des coordonnées X et Y, Framer utilise une logique web :

Tu définis la distance entre l’élément et les côtés de son parent
Par exemple :
- 20px depuis le haut
- 40px depuis la gauche
- Centré horizontalement

Le concept de "Pinning"

Framer te permet de fixer ("pin") certains côtés de l’élément à son parent :

Tu peux "pin" le haut, le bas, la gauche, la droite… ou aucun
Les côtés "pinnés" sont ceux que tu veux garder fixes
Les autres peuvent changer si le parent change de taille

Exemple :

Tu "pins" 20px à gauche et 20px à droite → l’élément s’étire automatiquement quand son parent grandit !

Comment ça marche dans l’interface

Dans le panneau des propriétés (Inspector), tu verras :

Des champs de distance pour chaque côté (Top, Bottom, Left, Right)
Les valeurs en gras = activées (pinnées)
Les valeurs grisées = non utilisées

Tu peux aussi cliquer sur les icônes de pin (les petits traits autour du carré) pour activer/désactiver les côtés.

💡 Cliquer au centre active ou désactive tous les côtés d’un coup.

Modifier la taille avec le pinning

Le pinning ne sert pas seulement à placer l’élément, mais aussi à contrôler sa taille :

Tu modifies la largeur : le positionnement reste intact
Tu veux que l’élément s’étire automatiquement ? → Pin gauche + droite
Tu veux qu’il reste centré ? → Ne rien pin et utiliser la position centrale

Position absolue + composants réactifs

Quand tu utilises des composants comme des Stacks, les choses changent :

Les enfants en position relative suivent le flux de la Stack
Les enfants en position absolue sortent de ce flux

Conséquences :

Tu peux placer un élément par-dessus une Stack sans qu’il la "pousse"
Il ne prendra pas de place dans la mise en page fluide de la Stack
Cela peut être utile pour des badges, des décorations ou des overlays

Z-index : gérer les couches

Lorsque tu places un élément en position absolue, il peut chevaucher d’autres éléments.

Mais attention :

L’ordre d’affichage est déterminé par le Z-index
Plus le Z-index est élevé, plus l’élément est au-dessus
Par défaut, tous les éléments ont un Z-index de 0

Exemples :

Z-index = 1 → élément devant les autres
Z-index = -1 → derrière
Si plusieurs éléments ont le même Z-index → l’ordre dans le panneau Layers décide

Positionnement relatif et stacks (Relative Positioning)

Les Stacks sont des blocs puissants dans Framer qui permettent d’aligner, espacer et distribuer automatiquement les éléments à l’intérieur d’un frame. Ils facilitent la création de mises en page flexibles et adaptables, parfaites pour les sites web réactifs.

Pourquoi utiliser un Stack ?

Moins de travail manuel pour positionner chaque élément
Mise en page fiable et cohérente, même quand les tailles changent
Permet aux éléments de suivre un flux naturel (vertical ou horizontal)
Facilite la réactivité (responsive design)

Qu’est-ce qu’un Stack ?

Un Stack est un Frame avec une propriété de layout spéciale activée.

Il aligne automatiquement les éléments enfants (textes, boutons, images…)
Il peut être :
- Vertical (colonne)
- Horizontal (rangée)
Il gère automatiquement :
- L’espace entre les éléments (gap)
- Les alignements
- Les marges internes (padding)

Comportement des éléments dans un Stack

Les éléments dans un Stack sont en position relative :

Ils suivent l’ordre défini dans le panneau Layers
Tu ne peux pas les déplacer librement comme en position absolue
Tu peux les réordonner facilement en les glissant, ou avec les flèches du clavier
Chaque élément partage le même espace entre les éléments (gap)

Besoin d’un espacement différent entre deux éléments ? Il suffit de les regrouper dans un Stack secondaire.

Créer un Stack

Plusieurs façons :

Activer un layout sur un Frame existant
- Sélectionner le Frame
- Dans l’inspecteur, cliquer sur Add layout
Créer directement un Stack
- Dans la barre d’outils, cliquer sur “Layout” → “Row” ou “Column”
Transformer des éléments sélectionnés en Stack
- Sélectionner plusieurs couches → clic droit → Add stack
- Raccourci : ⌥⌘⏎ (Mac) ou Ctrl+Alt+Entrée (PC)

Le Stack créé va automatiquement remplir la largeur de son parent et s’adapter à la hauteur de ses enfants (fit height).

Les propriétés d'un stack

Direction : Choisir horizontal (row) ou vertical (column)
Distribute : Contrôle la répartition des éléments sur l’axe principal
Align : Contrôle l’alignement sur l’axe perpendiculaire (Start, Center, End)
Gap : L’espace entre les éléments enfants (modifiable visuellement ou en valeur)
Padding : Marge interne autour des éléments (modifiable par côté)
Wrap : Permet de revenir à la ligne quand il n’y a plus de place

Distribution

Start/Center/End : Place les éléments au début, centre ou fin de l’axe
Space between : Même espace entre les éléments, rien sur les bords
Space around : Même espace autour des éléments (espace doublé entre)
Space evenly : Même espace entre et autour de tous les éléments

Padding : Ajouter de l’espace à l’intérieur

Le padding permet de créer un coussin invisible autour des éléments d’un Stack.

Par défaut : même valeur sur tous les côtés
Option pour définir des valeurs personnalisées par côté
Utile pour les boutons, cartes, ou sections où l’on veut un peu d’air autour du contenu

Wrap : Gérer le débordement

Quand les éléments ne tiennent plus dans la ligne (ou la colonne) :

Wrap permet de les envoyer à la ligne suivante
Utile pour éviter que les éléments ne soient coupés

Grids (Grilles)

Les Grids (grilles) sont un outil de mise en page en deux dimensions dans Framer. Elles permettent de positionner des éléments à la fois horizontalement et verticalement, contrairement aux Stacks, qui ne gèrent qu’un seul axe à la fois.

Créer une grille

Deux méthodes :

Convertir un Frame en Grid
- Sélectionner un Frame
- Dans l’inspecteur → activer Add layout
- Changer de Stack à Grid
Créer directement une Grid
- Dans la barre d’outils → Layout → Grid
- Ou raccourci : Maj + G
- Cliquer-glisser sur le canevas

Anatomie d’une grille

Une grille dans Framer a 3 niveaux invisibles :

Le Frame parent avec le layout Grid
Les éléments enfants directs, appelés grid items
Les cellules invisibles créées par les colonnes et lignes

Les cellules agissent comme des conteneurs invisibles. Elles déterminent la taille et la position des éléments.

Propriétés d’une grille

Colonnes et lignes

Par défaut : nombre de colonnes/lignes fixe
Option avancée : permet d’avoir un nombre de colonnes automatique selon l’espace disponible

Quand tu ajoutes plus d’éléments que de colonnes disponibles, les lignes s’ajoutent automatiquement.

Taille des lignes/colonnes

Fill container (par défaut) : occupe tout l’espace disponible
Fixed : taille fixe
Fit content : s’ajuste au contenu

⚠️ Tu ne peux pas avoir à la fois un parent en fit content et des enfants en fill, sinon le layout s’effondre (conflit de dimension).

Gaps & Padding

Gap : définit l’espace entre les colonnes et les lignes
Padding : ajoute un coussin intérieur autour du contenu

Réorganisation

Tu peux :

Glisser-déposer les éléments
Utiliser les flèches du clavier
Réorganiser depuis le panneau Layers
Utiliser les handles de contrôle pour éviter de sélectionner le mauvais calque

Gestion du placement et de la taille des éléments

Chaque grid item peut :

S’étendre sur plusieurs colonnes ou lignes
- Ex. : "span all columns"
Avoir des dimensions :
- Fixed
- Relative
- Fill
- Fit content

Et selon la taille choisie, tu peux définir :

L’alignement à l’intérieur de la cellule
- Ex. centré, aligné en haut/bas, à gauche/droite

🎯 Pour plus de liberté, tu peux imbriquer un calque en position absolue dans un élément en position relative.

Exemple pratique

Un layout "bento" typique (avec des blocs de tailles variées) :

Une grid parent avec 4 colonnes
Certains blocs qui occupent 1 ou plusieurs colonnes
Des blocs avec des tailles fill ou fit
Espacement uniforme grâce au gap
Réorganisation facile en glissant les blocs

Fixed ou Sticky ?

Position Fixed

Permet de garder un élément toujours visible, peu importe le défilement de la page.

Comportement :

L’élément est verrouillé à la fenêtre du navigateur (viewport), pas à une frame spécifique.
Exemples classiques :
- Barre de navigation toujours visible en haut
- Bouton d’action flottant en bas à droite

Mise en place :

S’assurer que l’élément est un enfant direct du frame du breakpoint.
Dans les options de positionnement :
- Passer de absolute à fixed
- Choisir les bords du viewport à "pin" (ex. : top + left + right pour une navbar)
Le composant est retiré du flux de contenu (comme absolute) et ne pousse pas les autres éléments.
Pour s’assurer que l’élément reste visible au-dessus des autres : ajuster le z-index si nécessaire.

Résultat :

L’élément reste figé à l’écran pendant que le reste du contenu défile en dessous.

Position Sticky

Permet de garder un élément visible temporairement lorsqu’il atteint le haut de l’écran, puis le laisser défiler quand le parent se termine.

Comportement :

L’élément défile avec la page, puis se fige lorsqu’il atteint le haut de la fenêtre.
Lorsqu’on atteint la fin de son conteneur parent, il défile de nouveau.

Exemple : une carte de prix ou un sous-menu qui reste visible pendant une partie de la lecture.

Mise en place :

L’élément doit être enfant d’un Stack ou Grid.
Tous les parents jusqu’au frame du breakpoint doivent avoir overflow réglé sur visible.
Dans l’inspecteur, passer la position à Sticky.
Définir une valeur d’offset (ex. : 100px) pour indiquer à quelle distance du haut il doit se coller.

Résultat :

L’élément se fige temporairement pendant le scroll.
Il repart en défilement lorsque le parent atteint la fin.

Dimensionnement

Créer des mises en page efficaces, flexibles et esthétiques repose sur le bon choix de dimensionnement pour chaque élément. Framer offre plusieurs options, chacune adaptée à des besoins différents selon la structure, le comportement réactif et les contraintes visuelles d’un projet.

Fixed (Taille fixe)

La taille fixe permet de donner à un élément une largeur et/ou une hauteur en pixels. Ces dimensions ne changent pas, peu importe la taille du parent ou des autres éléments.

Idéal pour les éléments petits ou décoratifs comme :

Icônes
Avatars
Logos
Modales

À utiliser quand la constance visuelle est essentielle.

Exceptions & Astuces

Si tu pins un élément à deux bords opposés, la dimension fixée peut devenir fluide pour s’adapter au parent.

Tu peux verrouiller les proportions (aspect ratio) :

Exemple : une image qui doit garder ses proportions même en largeur fluide.
Active le lock aspect ratio et définis la largeur à fill → la hauteur s’ajustera dynamiquement.

Attention

Les éléments fixés ne se redimensionnent pas automatiquement selon les tailles d’écran (sauf si tu utilises des breakpoints). Ils n’interagissent pas avec les dimensions de leurs frères ou de leur parent.

Relative (Taille relative)

La taille relative permet à un élément d’avoir une dimension basée sur un pourcentage (%) de son parent.

Compatible avec tous les types de positionnement (même absolute et fixed).
Ignore les éléments frères : un width: 50% sera toujours 50% du parent, peu importe l’espace disponible.
Peut dépasser 100% : utile pour des éléments décoratifs plus grands que leur contenant.

Cas d’usage

Formes décoratives qui doivent suivre le redimensionnement du parent tout en restant visibles.
Par exemple : un grand ovale au bas d’un hero section qui s’adapte à la largeur de son conteneur sans être tronqué.

Exemple

Un ovale large de 1600px dans un parent de 1000px → Framer convertit cela automatiquement à 160% de largeur.
L’élément reste toujours 160% de son parent, même si celui-ci s’élargit ou se rétrécit.

Viewport (Taille basée sur la fenêtre)

La taille basée sur le viewport permet à un élément d’avoir une hauteur (seulement) définie en VH (viewport height), où 1 VH = 1% de la hauteur de la fenêtre du navigateur.

Cas d’usage

Création de sections plein écran (ex. : hero sections).
Adaptation à toutes les hauteurs d’écran, sans devoir connaître les dimensions exactes de l’utilisateur.

Exemple

Un hero section avec height: 100 VH occupera toute la hauteur de l’écran, quelle que soit la taille du navigateur.

Outils visuels dans Framer

Framer propose un handle de redimensionnement dans le canvas pour simuler différents écrans. Tu peux aussi prévisualiser pour tester en conditions réelles.

Min et max

Lorsque l’on utilise des modes de dimensionnement flexibles comme fill ou relative, il arrive que les éléments deviennent trop petits ou trop grands, au détriment de l’esthétique et de la lisibilité. C’est là que les valeurs minimales (Min) et maximales (Max) entrent en jeu.

Min Width / Min Height

Empêche un élément de devenir trop petit (idéal pour préserver la lisibilité ou l’intégrité visuelle).

Max Width / Max Height

Empêche un élément de devenir trop grand (utile pour éviter un contenu étiré à l’excès).

Exemple

Le texte sur cette page a une largeur maximale afin que les lignes de texte ne soient pas trop longues.

Ajouter des images, des vidéos et du texte

Une fois les notions de frames, stacks et layouts bien comprises, il est temps d’ajouter ce qui donne vie à vos pages : images, vidéos et textes. C’est le cœur de tout bon site web.

Ajouter des images

Framer accepte :

Raster : .jpeg, .png, .webp, .gif, .tiff, .avif
Vectoriel : .svg

Framer propose plusieurs façons d’intégrer des images :

Glisser-déposer directement sur le canevas depuis votre ordinateur.
Créer une frame manuelle, puis :

Aller dans les propriétés de remplissage (Fill).
Choisir Image → Uploader ou glisser une image dans le champ prévu.

Menu "Layout" > Image : ajoute une frame déjà remplie par une image fictive (placeholder).

Avantage du glisser-déposer : Framer conserve les dimensions intrinsèques de l’image. Vous pouvez y revenir à tout moment via : clic droit → “Intrinsic Size”

Position et adaptation de l’image

Quand une image a des proportions différentes de sa frame, vous devez définir son comportement :

Position (Center, Top Center, etc.)
Focal Point : permet de définir la zone importante de l’image (ex. : les yeux sur un portrait).
Cela garantit que la zone essentielle reste visible, peu importe la taille de la frame.

Ajouter une vidéo

a) Fichier `.mp4`

Glisser le fichier sur le canevas
Ou utiliser le menu Layout > Video
Coller l’URL d’un fichier .mp4 hébergé ou uploader un fichier

Attention à la taille des fichiers : Les fichiers vidéo peuvent être lourds et limités selon votre abonnement Framer.

b) Intégration via YouTube ou Vimeo

Utiliser les composants média (Media) dans le panneau d’insertion
Glisser-déposer YouTube/Vimeo
Coller l’URL de la vidéo

Avantage :

Qualité optimisée automatiquement
Buffering et adaptation gérés par la plateforme (YouTube, Vimeo)

Ajouter du texte

Icône Text dans la barre d’outils
Ou raccourci clavier : T
Cliquez pour ajouter un champ dynamique (auto size) — idéal pour les titres
Cliquez-glissez pour un champ de largeur fixe

Attention : si vous ne tapez rien dans un champ texte, il sera automatiquement supprimé.

Propriétés des boîtes de texte

Une boîte de texte est comme une frame :

Elle a sa propre taille, position et propriétés
Vous pouvez :
- Ajuster largeur/hauteur manuellement
- Choisir un mode de dimensionnement :
  - Auto Width / Auto Height
  - Fixed Width / Auto Height
  - Fixed Width / Fixed Height

Insert Panel

Une mine d’or d’éléments prêts à l’emploi. Le panneau d’insertion de Framer permet d’accéder rapidement à des composants préfabriqués, des layouts, des intégrations interactives et bien plus — sans avoir à écrire une seule ligne de code.

Le panneau d’insertion est un accélérateur de création dans Framer. Que vous construisiez une landing page simple ou un site interactif complexe, tout y est drag and drop, intuitif et personnalisable.

Catégories principales du panneau d’insertion

1. Basics

Layouts complets (3 formats : desktop, tablette, mobile)
Sections individuelles
Navbars et menus

Utile pour commencer plus rapidement qu’avec une page blanche.

2. CMS (Content Management System)

Collections & Fields
Sert à afficher du contenu dynamique provenant de la base CMS de Framer.

3. Creative

Composants originaux avec animations ou logiques intégrées :

Fit Text (texte auto-ajustable)
Arc de texte animé
Scribbles (dessins à main levée)
Compte à rebours

4. Media

Images, vidéos
Lecteurs externes : YouTube, Vimeo
Animations Lottie
Lecteurs audio : Spotify, Apple Music, fichiers MP3

5. Forms

Formulaire natif Framer (no code)
Intégrations avec :
- Loops
- Mailchimp
- Kitt

6. Icons

Chaque bloc représente une bibliothèque entière d’icônes :
- Ex. : Phosphor, HeroIcons, etc.
Une fois sur le canevas, vous pouvez :
- Changer l’icône directement depuis le panneau de propriétés

7. Interactive

Composants dynamiques natifs de Framer (sans code) :

Sélecteur de langue (locale selector)
Barre de recherche globale
Bannière de cookies (RGPD)
Slideshow, Ticker, Carousel

8. Social

Intégrations prêtes pour :
- Instagram
- Facebook
- Google Maps

9. Utility

Composants utiles ou pour intégrations tierces :

Embed HTML (insérer du code personnalisé)
Bouton Copier dans le presse-papier
Bouton de téléchargement
Intégrations : Lemon Squeezy, Gumroad, etc.

Liens et pages

Connecter des pages, naviguer entre sections et personnaliser l’apparence des liens.

Créer un lien à partir d’un élément (texte ou autre)

Sélectionner l’élément
Cliquer sur "Link +" dans le panneau de propriétés (en haut)
ou utiliser le raccourci L (sauf si une portion de texte est sélectionnée, sinon cela écrit un "L")

Cibler un lien :

URL externe → coller l’URL (ex. : https://framer.com)
Page interne → commencer à taper le nom d’une page
- Suggère les pages disponibles
- Ajouter / après un nom de page filtre les sous-pages

Styles de lien (Link Styles)

S’applique uniquement aux liens créés à partir d’un calque de texte

Par défaut, un style de lien est appliqué. Possibilité de :

Créer un nouveau style (ex. : pour une barre de navigation)
Renommer le style (ex. : nav-link)
Éditer 3 états :
- Default (couleur initiale du lien)
- Hover (au survol)
- Current (si la page actuelle est celle du lien)
Ajouter une transition pour fluidifier le passage entre états (ease, durée, délai)

Créer un lien vers une section sur la même page

Sélectionner le frame principal de la section
En bas du panneau de propriétés, cliquer sur "Add scroll section"
Nommer la section (ex. : features)
Définir un offset Y si besoin (ex. : si une barre de navigation fixe masque la section)

Lier à cette section :

Sélectionner un élément
Lier vers la même page
Un menu "Section" apparaît → choisir la section (ex. : features)
Option : activer le défilement fluide (smooth scroll)

Créer un lien sur une portion de texte

Sélectionner le texte partiel
Ne pas utiliser L (cela écrirait le caractère “L”)
Cliquer manuellement sur "Link +"
Coller l’URL ou sélectionner une page/slug

Pour les articles CMS :

Taper blog/ pour filtrer
Sélectionner un slug CMS puis choisir une entrée (ex. : styling-elements)

Créer un lien à partir d’un bouton ou élément non textuel

Cliquer sur l’élément souhaité
Si vous sélectionnez accidentellement un élément imbriqué :
- Appuyer sur Échap pour remonter d’un niveau dans la hiérarchie
Ajouter un lien comme d’habitude (ex. : vers une URL externe)

Règle importante : Un élément qui a un lien ne peut pas contenir un autre élément avec un lien

Repérer les liens dans la structure

Dans le panneau Layers, un petit icône de lien apparaît sur les calques ayant un lien

Propriétés de style des frames

Remplissage (Fill)

Types de remplissage :

Couleur unie
Dégradé linéaire
Dégradé radial
Dégradé conique
Image (voir tutoriel précédent)

Le remplissage est placé derrière le contenu interne du frame.

Il peut être supprimé en cliquant sur le X à côté de la couleur.

Bordure (Border)

Couleur, épaisseur (en px) et style (plein, pointillé, tireté, double)
Peut être appliquée sur :
- Les 4 côtés à la fois
- Chaque côté indépendamment
La bordure est affichée au-dessus du contenu
Elle est alignée à l’intérieur du frame, donc elle ne change pas sa taille globale.
Opacité ajustable via le sélecteur de couleur (alpha)

Rayon (Radius)

Permet d’arrondir les coins d’un frame
Peut être appliqué de façon :
- Globale (les 4 coins en même temps)
- Individuelle (chaque coin séparément)

Ombre (Shadow)

Ombre classique ("Box Shadow") :

Propriétés :
- X et Y : position par rapport au centre
- Blur : flou de l’ombre
- Spread : taille / expansion de l’ombre

Ombre réaliste ("Realistic Shadow") :

Composée de plusieurs couches empilées
Paramètres :
- Diffusion : vitesse de dispersion
- Focus : niveau de flou
- Opacité ajustable via le sélecteur de couleur
Résultat : effet plus subtil et naturel qu’un simple box shadow

Opacité (Opacity)

Réduit la transparence de l’ensemble du frame ET de ses enfants
Agit comme un groupe visuel : tout devient plus ou moins visible

Visibilité (Visible / Not visible)

Visible = No → le frame est retiré du flux de mise en page
Contrairement à opacity = 0, qui laisse le frame occuper de l’espace
Utile avec des stacks ou des grilles :
- Opacity = 0 → l’objet est invisible mais occupe l’espace
- Visible = No → l’objet disparaît complètement

Overflow (Débordement)

Détermine le comportement des éléments enfants hors des limites du frame

ValeurEffet visuelHiddenCoupe les éléments qui dépassentVisibleAffiche les éléments même s’ils dépassentScrollCrée une zone défilable si le contenu dépasse

Propriétés avancées (via le bouton ➕)

Clique sur le bouton "+" dans le panneau Style pour accéder à :

Blending modes : fusion visuelle entre éléments
Image draggable : image déplaçable
Filtres CSS : flou, contraste, etc.
Masques : limiter l’affichage à une forme ou un contour

Design responsive

Le but est d'offrir aux visiteurs une expérience fluide, agréable et cohérente, peu importe l’appareil utilisé (ordinateur, tablette, téléphone). Le design responsive consiste à adapter automatiquement l’apparence d’un site web à différentes tailles et orientations d’écran. Cela implique deux choses :

Positionnement fluide : les éléments s’alignent et se déplacent dynamiquement selon l’espace disponible.
Mise à l’échelle automatique : le contenu (textes, images, sections) se redimensionne intelligemment.

CMS

Le CMS (Content Management System) de Framer centralise tout le contenu de votre site au même endroit.

Grâce à lui, vous n’avez plus besoin de répéter les mêmes modifications sur plusieurs pages. Mettez à jour une fois et vos changements se reflètent automatiquement partout où le contenu est utilisé.

Résultat : un site toujours cohérent, facile à maintenir et plus rapide à faire évoluer.

Qu’est-ce qu’un CMS ?

Un CMS est comme un classement numérique pour votre site web. Tout votre contenu (textes, images, liens, vidéos, etc.) est stocké dans des collections, organisées et structurées pour être réutilisées partout sur votre site. Lorsque vous modifiez une donnée dans le CMS, Framer met automatiquement à jour toutes les pages où cette donnée apparaît, sans effort supplémentaire.

Les 4 éléments clés du Framer CMS

Collections
- Fonctionnent comme des dossiers qui contiennent plusieurs éléments similaires.
- Exemples : articles de blog, projets de portfolio, produits d’e-commerce.
Champs (Fields)
- Définissent le type de contenu que chaque élément contient.
- Types courants :
  - Plain text : pour un titre (Vous pouvez appliquer un seul style de texte)
  - Formatted text : pour un paragraphe complet (Vous pouvez appliquer plusieurs styles de texte)
  - Image
  - Date : pour une date de publication.
  - Slug : identifiant URL unique généré automatiquement.
  - Toggle : champ booléen (ex. : contenu en vedette).
  - Link : pour un lien externe ou interne.
Pages CMS
- Générées automatiquement à partir des éléments d’une collection.
- Exemple : chaque article de blog génère sa propre page avec le design défini.
Listes de collections
- Affichent sur une page plusieurs éléments issus d’une collection.
- Exemples : liste d’articles récents, galerie de projets, catalogue de produits.
- Se mettent à jour automatiquement lorsque vous ajoutez ou modifiez du contenu.

Exemples d’utilisation

Blog : une collection d’articles avec titre, image de couverture, texte et auteur.
Portfolio : projets organisés avec visuels, description et lien vers une étude de cas.
E-commerce : catalogue de produits avec images, prix, description et bouton d’achat.
Agenda : événements avec date, lieu, description et lien d’inscription.

Comment l'utiliser

Création de la collection et des fields

Commencez par créer votre collection et cliquez sur Edit fields pour ajouter des champs (Fields). C'est à cette étape que vous allez définir le contenu à intégrer. Vous avez besoins d'un titre ? Ajoutez un field de texte. Vous avez besoins d'une image ? Ajoutez un field image.

Créez et designez la page CMS

Lorsque vous êtes sur le canvas, dans le menu de gauche, assurez-vous d'être sur l'onglet Pages, puis cliquez sur le + > New CMS Pages > [Nom de votre collection] > Detail page.

Maintenant la page créée, vous pouvez designer votre page en vous assurant d'avoir tous les éléments requis (Pour l'exemple ci-dessus, un titre, un sous-titre, une image et une icône

La page que vous créez servira de template pour toutes les entrées de votre CMS.

Lier les variables

L'étape finale et la plus importante est celle-ci. Vous allez maintenant lier les variables de votre CMS aux champs que vous avez ajouté à votre page. Dans l'exemple ci-dessus, vous allez lier "Text 1" au "Titre" du CMS, "Text 2" au "Sous-titre" du CMS, etc.

Pour ce faire, dans votre gabarit (Page) sélectionnez l'élément que vous voulez lier à votre CMS et identifiez la propriété dans le menu de droite (contenu, couleur, stroke, etc.) puis cliquez sur le petit + à gauche, Set Variable > [Donnée du CMS].

Pour l'exemple ci-dessous, on veut lier le sous-titre rouge au CMS. On le selectionne, puis on lie le contenu (Content) au sous-titre du CMS.

Résultat

Vous avez maintenant une page qui sert de gabarit pour toutes les entrées de votre CMS.

Publier son site

Apprendre à publier un site avec Framer, configurer un domaine personnalisé, comprendre le fonctionnement de l’optimisation, du staging et du déploiement progressif, ainsi que retirer un site de la publication si nécessaire.

Publier un site pour la première fois

Cliquez sur le bouton Publish en haut à droite de l’interface.

Cela génère automatiquement une URL publique temporaire (appelée base domain), sous la forme nomaléatoire.framer.website.

Une fenêtre s’ouvre avec :

L’URL publique du site
Le moment de la dernière mise à jour
Le nombre de changements depuis la dernière publication

Vous pouvez cliquer sur l’URL pour visualiser le site immédiatement dans un navigateur.

Utiliser un domaine personnalisé

Option A : Utiliser un sous-domaine Framer (Gratuit)

Accessible sans abonnement payant.
Vous pouvez choisir un nom unique (ex. monsite.framer.website, monsite.framer.ai, etc.).
Plusieurs extensions sont proposées : .website, .ai, .photos, .wiki, etc.
Framer vérifie automatiquement la disponibilité du nom.

Option B : Connecter votre propre domaine (Payant)

Requiert l’activation d’un plan payant sur le site.
Vous devez ensuite aller dans :
- Settings > Domains
- Cliquer sur Connect your own domain
- Entrer le nom de domaine souhaité (ex. monsite.com)

Configuration DNS (chez votre hébergeur de domaine) :

2 A Records :
- Nom = @
- Type = A
- Valeurs = deux adresses IP fournies par Framer
1 CNAME Record :
- Nom = www
- Type = CNAME
- Valeur = sites.framer.app
Certains fournisseurs permettent un autoconnect (connexion automatique).
Sinon, vous devez copier manuellement les enregistrements dans votre tableau de bord DNS.
Framer vérifie automatiquement que les enregistrements sont bien propagés.
⚠️ La propagation peut prendre jusqu’à 48 heures, mais c’est souvent beaucoup plus rapide.

Mettre à jour un site déjà en ligne

Cliquez de nouveau sur Publish lorsque vous apportez des modifications.

Les changements sont immédiatement visibles sur :

Le domaine personnalisé
Le sous-domaine Framer

Pas besoin de reconfigurer quoi que ce soit.

Retirer un site ou modifier les domaines

Supprimer un site en ligne :

Allez dans Settings > General.
Cliquez sur Unpublish.
Le site est retiré de tous les domaines (Framer et personnalisé).

Retirer un domaine personnalisé :

Allez dans Settings > Domains.
Cliquez sur les ... à droite du nom de domaine.
Sélectionnez Remove Domain.

Remix link (Remise)

Un Remix Link est un lien spécial qui permet à n’importe quel utilisateur d’ouvrir votre projet Framer dans son propre espace de travail comme une copie entièrement modifiable.

👉 En résumé : Un Remix Link = un « Dupliquer ce projet » instantané, mais contrôlé.

C’est une façon de partager un projet-template sans donner accès à l’original.
Très utile pour :

créer des templates que d’autres peuvent réutiliser
partager un projet avec des élèves ou participants
distribuer des ressources pédagogiques ou des kits UI
collaborer sans risquer de briser la version maîtresse

Pour partager un remix link il suffit de vous rendre ici :
Menu principal (F) > File > Copy Remix Link

Lorsque quelqu’un partage un Remix Link, la copie n’est pas créée au moment de l’envoi.
Elle est créée uniquement au moment où l’autre personne ouvre le lien.
👉 Cela signifie que toutes les modifications faites avant l’ouverture du lien seront incluses dans la copie.

🚀 Poursuis tes apprentissages

Voici du contenu supplémentaires facultatif pour continuer d'apprendre :

Navbar
Composantes
Intégrer une scène Spline
Curseur personnalisé
Sticky sections
SEO Optimization

🛠️ Ressources

Voici quelques ressources pertinentes :

Communauté Framer (Support)
Call to Inspiration
Framer University
Framer YouTube Channel

Atelier précédent

Atelier suivant

Design web (no code)

✅ Remise

📁 Livrable final

1 - Hero section

🧭 Objectifs

À la fin de cet atelier, tu auras développé ces compétences :

🏗️ L'atelier

Exercices

Exercice 1 : Reproduction de section

Livrable final

Livrable 1 : Hero section

Titre

Sous-titre

Call to action (CTA - Invitation à l'action)

Visuel

Vous devrez aussi :

Méthodologie :

🎓 La théorie

C'est quoi Framer ?

Introduction à Framer

Introduction à Framer

Créez votre compte Framer

L'interface

La barre d’outils (Toolbar)

À gauche :

Au centre :

À droite :

La barre latérale gauche (Left Sidebar)

La barre latérale droite (Right Sidebar)

Le canevas (Canvas)

Outils du bas de canevas :

L'anatomie d'un projet Framer

Workspace, dossiers et projets

Pages

La page « Home »

Propriétés d’une page

Dossiers et structure d’URL

Erreur 404

Les breakpoints

Responsive Design

Les Frames

Un frame peut :

Bon à savoir :

Les calques (Layers)

Sélectionner des calques

Sélection directe :

Remonter dans la hiérarchie :

Utilisation de Command/Ctrl :

Personnalisation du comportement :

Sélection multiple

Naviguer dans des calques imbriqués

Déplacer des calques (en position absolue)

Imbrication automatique des calques

Navigation dans le canevas

Conseils de productivité

Structure

Polyvalence des Frames

Créer un Frame dans Framer

Méthode 1 : Dessiner un frame manuellement

Raccourcis utiles en dessinant un frame :

Ajouter des éléments à un Frame

Créer un Frame parent autour d’éléments existants

Supprimer un frame parent sans supprimer les enfants

Positionnement absolu (Absolute Positioning)

Les 4 types de positionnement dans Framer

Qu’est-ce que le positionnement absolu ?

Définir la position dans Framer

Le concept de "Pinning"

Exemple :

Comment ça marche dans l’interface

Modifier la taille avec le pinning

Position absolue + composants réactifs

Conséquences :

Z-index : gérer les couches

Exemples :

Positionnement relatif et stacks (Relative Positioning)

Pourquoi utiliser un Stack ?

Qu’est-ce qu’un Stack ?

Comportement des éléments dans un Stack

Créer un Stack

a) Fichier `.mp4`