LexiqueFramer
Framer est l'outil no-code des sites animés : on y dessine, on y anime au scroll et on publie depuis la même fenêtre, avec des composants de code quand il en faut. Voici son vocabulaire complet.
129 TERMES · COLLECTION OUTIL · UNIVERS NO-CODE
/ LES ESSENTIELS
Les 6 termes à connaître
avant tous les autres.
/ INDEX FRAMER
Les 129 termes, définis en une phrase.
/ CHERCHER
/ SAUTER À
/ NATURE
A
AbsoluteLa position ‘Absolute’ détache un élément du flux du document et le place par rapport à son conteneur parent. Tu définis précisément les coordonnées (top, right, bottom, left), permettant par exemple de superposer un badge au coin d’une image sans…AccessibilityLa section ‘Accessibility’ regroupe les attributs ARIA (aria-label, role, alt) et les pratiques pour rendre tes designs accessibles, en améliorant la navigation au clavier et la compatibilité avec les lecteurs d’écran.Advanced GridLa section ‘Advanced Grid’ propose des fonctionnalités complémentaires : définition de zones nommées, auto-fit/auto-fill, tracking et alignment avancé pour des mises en page complexes et modulaires.Align itemsL’option ‘Align items’ contrôle l’alignement des enfants sur l’axe secondaire d’un Auto Layout (axe croisé). Aligne en haut, centre ou bas pour harmoniser la présentation et garantir que les éléments restent alignés.Animation de composantsLes animations de composants utilisent Framer Motion pour animer n’importe quel composant ou calque. Tu définis des états initiaux et finaux (variants), choisis la durée, les easing et les délais, et associes ces animations à des événements (hover,…Animation LottieLe composant Lottie dans Framer permet d’importer et d’intégrer des animations vectorielles exportées au format JSON depuis Adobe After Effects via le plugin Bodymovin.Appear - Layer in view‘Appear - Layer in view’ permet de faire apparaitre un élément lorsque celui entre dans la fenêtre en paramétrant différents points de contrôle.Appear - On load‘Appear - On load’ déclenche automatiquement des animations (fade, slide, scale) lors du chargement de la page.Appear - On scroll‘Appear - On scroll’ lance une animation dès qu’un élément entre dans le viewport pendant le défilement, créant un effet de surprise et guidant l’attention de l’utilisateur sur les sections clé.Appear - Section in view‘Appear - Section in view’ se déclenche lorsque l’ensemble d’une section est visible à un pourcentage défini. Idéal pour synchroniser des animations de groupe et construire des récits visuels cohérents au scroll.ArcEffet typographique qui dispose un texte le long d’un arc de cercle ou d’une courbe. Les options permettent d’ajuster le rayon, le sens de lecture (intérieur/extérieur), l’angle de départ et l’espacement, afin de créer des titres circulaires ou des…AudioLe composant Audio te permet d’ajouter des fichiers sonores (MP3, WAV) à ton projet Framer. Tu peux configurer la lecture automatique, l’icône de contrôle, le volume initial, la mise en boucle et gérer les interactions (play, pause) via des triggers…B
Backface visibilityLa propriété ‘Backface visibility’ détermine si l’arrière d’un élément 3D est visible lors d’une rotation, utile pour gérer les flips ou les animations 3D complexes.BalanceL’option ‘Balance’ répartit automatiquement les mots sur chaque ligne pour éviter les lignes trop courtes ou trop longues, améliorant l’esthétique des paragraphes.Base de donnéesLa base de données (Data) de Framer est un système de collections JSON qui agit comme un CMS light. Tu crées des collections de données structurées (articles, produits, témoignages), puis liez ces données dynamiques à tes composants à l’aide de data…BlendingLe mode ‘Blending’ (mix-blend-mode) définit comment un élément se mélange avec l’arrière-plan ou les couches sous-jacentes, créant des jeux de couleurs et des effets artistiques.BorderLa propriété ‘Border’ configure les bordures d’un élément : épaisseur, style (solid, dashed, dotted) et couleur.BreakpointsLes ‘Breakpoints’ permettent de créer des styles responsive à chaque taille d’écran. Tu peux ajouter plusieurs points de rupture (mobile, tablette, desktop) et adapter les propriétés CSS (taille, layout, visibilités) pour garantir une expérience…C
Code blockLe Code Block (composant Code) dans Framer t'offre un espace pour écrire et exécuter du code React/JavaScript personnalisé.Code et boutons utilitairesLe panneau Code et boutons utilitaires regroupe les fonctionnalités pour personnaliser ton projet via du code.Code overridesLes ‘Code overrides’ permettent d’injecter des fonctions en React pour modifier dynamiquement les propriétés, les styles ou le comportement des composants, offrant une personnalisation avancée via le panneau Custom Code.ColorLa propriété ‘Color’ définit la couleur du texte via hex, RGB ou variables de thème. Tu peux aussi modifier la transparence pour créer des effets de texte fantômes ou de fond.Columns & RowsDans ‘Columns & Rows’, tu configures le nombre et la taille des colonnes et lignes, ainsi que les gaps. Cette grille sert de base à ton layout, offrant une structure rigide ou flexible selon le besoin.Compte FramerLe compte Framer est ton espace personnel où tu gères tes projets, tes équipes, tes facturations et tes réglages de profil.ContraLes Contraintes (Contra) dans Framer définissent comment un calque se positionne et se redimensionne par rapport à son parent.Copy to clipboardLe composant Copy to Clipboard ajoute un bouton interactif qui copie automatiquement un texte, un lien ou une donnée spécifique dans le presse-papier de l’utilisateur lors du clic.CountdownLe composant Countdown affiche un compte à rebours jusqu’à une date ou un événement cible défini par l’utilisateur.CursorLe style ‘Cursor’ ajuste le type de curseur au survol (pointer, text, crosshair), renforçant le feedback visuel et guidant l’utilisateur quant aux interactions possibles.D
DepthLa propriété ‘Depth’ (translateZ) déplace un élément le long de l’axe Z, créant un effet de profondeur 3D, souvent combinée à la perspective pour simuler une scène immersive.DirectionLa ‘Direction’ dans Auto Layout oriente l’agencement des enfants en horizontal (row) ou vertical (column). Cette simple bascule transforme instantanément un groupe d’éléments en liste ou en ligne d’items responsives.DistributeLe paramètre ‘Distribute’ répartit l’espace disponible entre les éléments d’un Auto Layout selon différents modes (space-between, space-around, space-evenly), offrant un espacement uniforme sans avoir à modifier chaque marge.DownloadLe composant Download déclenche le téléchargement d’un fichier ou d’une ressource hébergée dans tes Assets. Tu spécifies l’URL du fichier et un nom de fichier pour l’attribut « download », permettant aux visiteurs de récupérer facilement des…DragLe mode ‘Drag’ autorise le glissement d’un élément avec la souris ou le doigt. Tu peux restreindre le mouvement à un axe, définir des inerties ou déclencher des callbacks pour personnaliser l’interactivité.DraggableL’option ‘Draggable’ active le drag-and-drop natif sur un composant, sans code supplémentaire. Combine-la avec des interactions pour construire des interfaces glissantes et interactives.E
EmbedLe composant Embed permet d’insérer du code HTML ou des scripts externes (calendriers, chatbots, formulaires tiers).EventbriteLe composant Eventbrite Embed intègre la billetterie de tes événements Eventbrite. En collant l’URL ou le code d’intégration d’un événement, tu affiches le formulaire de réservation, la liste des tickets et les détails pratiques (date, lieu),…F
FillLe paramètre ‘Fill’ définit la couleur de fond ou le dégradé d’un élément. Tu peux appliquer des images ou des SVG comme fill et ajuster l’opacité pour obtenir des effets visuels variés.FiltersLes ‘Filters’ appliquent des effets CSS (blur, brightness, contrast, saturate) directement depuis le panneau, parfaits pour retoucher des images ou créer des overlays stylisés.Fit TextLe plugin Fit Text ajuste automatiquement la taille du texte pour qu’il remplisse parfaitement son conteneur sans overflow.FixedLa position ‘Fixed’ ancre un élément par rapport au viewport du navigateur. Ce comportement est parfait pour des barres de navigation, en-têtes ou boutons de retour en haut de page qui doivent rester visibles quel que soit le scroll.FontLa propriété ‘Font’ sélectionne la police de caractères (Google Fonts ou custom). Tu peux définir un fallback, ajuster la taille, le style et les variantes OpenType pour un rendu typographique précis.FormulairesLe composant Formulaires (Form) te permet de créer des champs de saisie (texte, e-mail, mot de passe, etc.) pour collecter des informations auprès des utilisateurs.Formulaires personnalisésLes formulaires personnalisés permettent de concevoir des formulaires avec des champs sur-mesure (inputs, selects, checkboxes) et de les connecter à des endpoints externes via des requêtes HTTP.FrameLe Frame est l’élément de base dans Framer, un conteneur vectoriel ou d’images qui sert à construire ton interface.G
GapLe réglage ‘Gap’ définit l’espacement uniforme entre les éléments d’un Auto Layout ou d’un Grid. Contrairement aux marges, le gap s’applique automatiquement à tous les enfants, simplifiant la gestion de l’espacement.GifLe format GIF permet d’ajouter des images animées légères dans tes projets. Dans Framer, tu importes un fichier GIF classique via le composant Image, puis contrôles l’iteration ou le pause via des overrides pour optimiser la performance et…GridLe composant Grid implémente un layout CSS Grid, où tu définis le nombre de colonnes, de rangées, les gaps et les zones nommées.I
IconesLes icônes (Icones) dans Framer peuvent provenir de librairies intégrées (Feather, Material) ou d’assets importés.ImageLe composant Image sert à importer et afficher des images (JPG, PNG, SVG, GIF). Tu as le contrôle sur le Fit (Cover, Contain), le positionnement de la focalisation, et peux paramétrer le lazy loading pour optimiser les performances.Image et vidéoLe composant Image et vidéo rassemble les deux médias : tu peux importer des images (JPG, PNG, SVG) et des vidéos (MP4, WebM) dans un seul composant multimédia.Image RenderingLe style ‘Image Rendering’ contrôle la méthode de rendu des images (auto, crisp-edges, pixelated), utile pour les effets pixel art ou pour garder des images nettes lors des redimensionnements.Intégration de formulaires (Mailchimp, Formspark, Waitlist, etc)L’intégration de formulaires (Emails signup) permet de connecter les données collectées à des services tiers comme Mailchimp, Airtable ou Zapier.L
Le designerLe Designer de Framer est l’interface visuelle qui regroupe le canvas, le panneau Layers, l’inspecteur de propriétés et l’accès aux overrides.Lemon squeezy & GumroadLes intégrations Lemon Squeezy et Gumroad permettent de vendre des produits numériques ou des abonnements directement depuis ton site Framer.Lemon Squeezy et GumroadLes intégrations Lemon Squeezy et Gumroad permettent de vendre des produits numériques et des abonnements directement depuis ton site Framer.Les alignementsLe panneau ‘Alignements’ propose des commandes visuelles pour positionner tes éléments à l’intérieur de leur conteneur.Les cookiesLe gestionnaire de cookies offre un composant de bannière conforme au RGPD et au CCPA. Il affiche un message d’information sur l’utilisation des cookies, propose des options d’acceptation ou de refus et stocke le choix dans un cookie.Letter spacingLe paramètre ‘Letter spacing’ (espacement des lettres) module l’espace entre chaque caractère, utile pour améliorer la lisibilité ou appliquer un style typographique spécifique.Line heightLe paramètre ‘Line height’ (interligne) règle l’espacement vertical entre les lignes, crucial pour la lisibilité du paragraphe et l’esthétique générale du texte.LinksLe style ‘Links’ regroupe les paramètres d’apparence et d’interaction pour tes liens hypertextes. Tu configures l’état par défaut, hover, visited, et active, et peux ajouter des animations (soulignement, changement de couleur) pour renforcer le…Liste de collection et champsLa liste de collection et champs (Collection List) utilise Framer Data pour afficher dynamiquement des éléments.LogoLe composant Logo te permet d’importer et d’afficher ton identité visuelle (SVG ou image raster). Place-le dans la Navbar ou comme élément Sticky pour renforcer la reconnaissance de ta marque.LoopL’option ‘Loop’ rend une animation cyclique, se répétant indéfiniment ou un nombre de fois défini. Pratique pour des loaders, des icônes animées ou des effets de fond perpétuels.M
MaskLa propriété ‘Mask’ utilise une forme ou un SVG comme masque pour afficher uniquement la zone souhaitée d’un élément, idéal pour des effets de découpe créatifs.MenuLe composant Menu offre une navigation responsive avec items et sous-menus configurables. Tu ajoutes tes liens, définis l’apparence visuelle (espacement, typographie, couleurs) et paramètres l’icône burger pour la version mobile.Min & MaxLes propriétés « Min & Max » fixent les limites minimale et maximale de la largeur et de la hauteur d'un élément. Elles garantissent qu'un composant reste lisible et ne déborde pas quand le conteneur ou l'écran change de taille.Moteur de recherche (Search)Le 'moteur de recherche' (Search) de Framer indexe ton contenu (pages, collections) pour fournir une recherche en temps réel.O
OpacitéLa propriété ‘Opacité’ contrôle la transparence d’un élément. Combine-la avec des transitions pour créer des effets de fade-in/fade-out et gérer la visibilité progressive des composants.OpenTable et TheForkLes intégrations OpenTable et TheFork intègrent les modules de réservation de tables dans ton site Framer. En collant le code d’intégration fourni par OpenTable ou TheFork (widget HTML/iframe), tu affiches le formulaire de réservation, les créneaux…OriginLa propriété ‘Origin’ (transform-origin) spécifie le point de pivot pour toutes les transformations (scale, rotate), comme le centre ou un coin, modifiant le comportement visuel des animations.OverflowLa propriété ‘Overflow’ gère le contenu qui dépasse un conteneur. Choisis entre visible, hidden, scroll ou auto pour créer des zones de défilement internes sans perturber le layout global.Overflow X & YLes paramètres ‘Overflow X & Y’ gèrent séparément le débordement horizontal et vertical, offrant un contrôle précis sur l’apparition des barres de scroll et le masquage du contenu.Overlay - FixedL’overlay ‘Fixed’ ancre une couche superposée par rapport au viewport. Idéal pour les modales et les popups qui doivent rester centrées et accessibles quel que soit le scroll.Overlay - RelativeL’overlay ‘Relative’ place une couche superposée dans le flux de son parent, permettant un positionnement contextuel tout en conservant la hiérarchie des calques.P
PaddingLe ‘Padding’ ajoute un espace intérieur entre le contenu d’un élément et ses bordures. Tu peux ajuster le padding individuellement pour chaque côté afin de gérer la respiration visuelle et le confort de lecture.Pages dynamiquesLes pages dynamiques (Dynamic Pages) se basent sur une Collection Data pour générer automatiquement des pages individuelles.Paragraph spacingLe style ‘Paragraph spacing’ ajoute un espace après chaque paragraphe, facilitant la séparation visuelle et améliorant la clarté du texte, surtout dans les blocs denses.PatternLe composant Pattern permet de créer des motifs répétitifs en définissant une forme de base, l’espacement et la direction de répétition.PerspectiveLa propriété ‘Perspective’ définit la distance de projection pour les transformations 3D, influençant la façon dont les éléments s’écartent ou convergent en perspective.PluginsLes plugins dans Framer s’installent via la galerie intégrée et étendent les fonctionnalités (nouvelles bibliothèques d’icônes, animations, intégrations).Pointer eventsLa propriété ‘Pointer events’ (pointer-events) détermine si un élément peut recevoir ou ignorer les interactions de la souris/toucher, permettant de créer des zones cliquables transparentes.Preserve 3DLe réglage ‘Preserve 3D’ (transform-style) permet aux éléments enfants de conserver leur environnement 3D plutôt que d’être aplatis, nécessaire pour des scènes 3D emboîtées.PressL’effet ‘Press’ (tap) définit l’apparence d’un élément lorsque l’utilisateur clique ou touche l’écran. Il simule un retour haptique digital (rétrécissement, ombre portée) pour confirmer l’action.Product HuntLe badge Product Hunt te permet d’ajouter un lien et un compteur de votes vers ton produit sur Product Hunt. Tu copies le snippet de badge depuis Product Hunt, l’intègres avec le composant Embed et tes visiteurs peuvent voter directement depuis ton…R
RadiusLe ‘Radius’ (border-radius) arrondit les coins d’un élément. Définis des valeurs uniformes ou distinctes pour chaque coin afin de créer des boutons, des cartes ou des images aux bords doux.Redirections (Redirects)Les règles de redirection (Redirects) te permettent de gérer les URL de ton site publié : créez des redirections 301 ou 302, définis une page 404 personnalisée et configure des chemins conditionnels dans le panneau Hosting.Réglages générauxLes réglages General (généraux) d’un projet Framer incluent les paramètres de breakpoints responsive, le thème de couleurs globales, la police par défaut, les unités (px, rem, %) et les options de layout.RelativeLa position ‘Relative’ conserve l’élément dans le flux tout en autorisant un décalage par rapport à sa position d’origine.Réseaux sociaux (Social)Le composant 'Réseaux sociaux' (Social) permet d’ajouter des icônes ou des widgets de partage et de suivi pour des plateformes comme Facebook, Twitter, LinkedIn ou Instagram.Rows & columnsDans Framer, le mode Auto Layout 'Rows & columns' organise automatiquement les calques enfants en lignes (rows) ou colonnes (columns).S
Scale, skew et rotateLes transformations ‘Scale, skew et rotate’ appliquent respectivement un redimensionnement, une inclinaison et une rotation 2D sur les éléments, utiles pour animer ou styliser des composants.ScribbleEnsemble de dessins en SVG que l'on peut placer sur son siteScribblesL’outil 'Scribbles' offre une fonctionnalité de dessin libre sur le canvas : tu crées des formes vectorielles à main levée, que Framer convertit en chemins éditables.Scroll SectionLa propriété ‘Scroll Section’ définit des zones où des animations basées sur le scroll sont déclenchées, permettant de séquencer des effets section par section pour un déroulé narratif.Scroll speedLe réglage ‘Scroll speed’ modifie la vitesse relative d’une animation liée au défilement. Tu peux créer des effets de parallaxe rapides ou lents pour enrichir la profondeur visuelle.Scroll transform‘Scroll transform’ mappe la progression du scroll à des transformations CSS (translate, rotate, scale), synchronisant les animations avec le mouvement de l’utilisateur pour un effet immersif.Scroll variantLe ‘Scroll variant’ combine les variants Framer Motion aux triggers de scroll. Tu définis plusieurs états selon les variantes de composants que tu as créé en fonction du défilement, et Framer assure la transition fluide entre eux.ScrollbarsLe style ‘Scrollbars’ personnalise l’apparence des barres de défilement (épaisseur, couleur, radius), assurant une cohérence visuelle avec le reste de ton design.SectionsBlocs verticaux prêts à l’emploi (héros, fonctionnalités, témoignages, FAQ, etc.) que l’on insère par glisser‑déposer.Sélecteur de langue (Local Selector)Le 'Sélecteur de langue' (Local selector) est un composant qui ajoute un menu déroulant ou une liste d’icônes pour changer la langue de ton site.SelectionLa propriété ‘Selection’ permet d'avoir accès aux couleurs appliquées aux éléments enfants de l'élément sélectionnéShadowsLe style ‘Shadows’ ajoute des ombres portées (box-shadow) pour donner de la profondeur. Règle l’offset, le flou, l’étendue et la couleur pour simuler des effets de lumière réalistes.Size (text)Le réglage ‘Size (text)’ spécifie la taille de la police en px, rem ou em, garantissant la lisibilité et l’accessibilité tout en maintenant une dimension responsive.Size pour GridL’option ‘Size pour Grid’ dans le panneau Grid définit la taille des colonnes et lignes (tracks) en unités fixes (px), relatives (fr, %) ou auto.Slider (slideshow)Le 'Slider (slideshow)' est un composant interactif qui affiche une série de diapositives (images, textes, composants) de manière séquentielle.Stagings & versionsLa section 'Stagings & versions' génère des URLs de prévisualisation pour chaque version ou branche de ton projet.StickyLa position Sticky (comportement collant) dans Framer permet à un frame ou à un composant de rester fixé à un point défini (par exemple le haut du viewport) lorsque tu scrolles.StrokeLa propriété ‘Stroke’ (text stroke) trace un contour autour des caractères. Ajuste l’épaisseur et la couleur pour des effets de lettrage appelant l’attention.StylesLes 'Styles' (Saved Styles) sont des préréglages de styles que tu peux créer pour la typographie, les couleurs, les ombres et les effets.T
Tap colorLa propriété ‘Tap color’ (highlight-color) définit la couleur de surbrillance mobile lors du tap, offrant un feedback visuel immédiat et améliorant l’expérience utilisateur sur smartphones.TemplateLe ‘Template’ agit comme un maître de style pour ton projet. En définissant des règles globales (couleurs, typographies, espacements), toute modification dans le template se réplique automatiquement sur les composants liés, assurant une cohérence…Text AlignLe choix ‘Text Align’ définit l’alignement du texte (left, center, right, justify), structurant la présentation et aidant à guider le regard de l’utilisateur à travers le contenu.Text DecorationLa propriété ‘Text Decoration’ gère les décorations (underline, overline, line-through), permettant de souligner, barrer ou ajouter des lignes décoratives au texte.Text ShadowsLe style ‘Text Shadows’ applique des ombres au texte pour ajouter du relief ou un effet néon. Tu contrôles l’offset, le flou et la couleur pour des styles variés.Text TransformLa propriété ‘Text Transform’ modifie la casse du texte (uppercase, lowercase, capitalize) sans changer le contenu brut, pratique pour uniformiser les titres ou labels.TickerLe 'Ticker' crée un bandeau défilant de texte ou de contenu (actualités, mentions) à la manière d’un fil d’informations.Time & dateLe composant 'Time & date' affiche l’heure et la date actuelles dans un format personnalisé (12h/24h, calendrier), met à jour automatiquement et prend en charge les fuseaux horaires ou le format local.V
Variables de composantsLes 'Variables de composants' sont des valeurs dynamiques (texte, nombres, booléens) que tu définis dans le panneau Data.Variantes de composantsLes 'Variantes de composants' utilisent Framer Motion pour définir plusieurs états (variants) d’un même composant, comme 'initial', 'hover', 'tap' ou 'exit'.VideoLe composant 'Video' importe et intègre des fichiers vidéo (MP4, WebM) ou des flux HLS. Tu contrôles la lecture (autoplay, loop, muted), affiches ou caches les contrôles natifs et peux superposer des éléments interactifs ou des animations…VisibilitéLa propriété ‘Visibilité’ (CSS visibility) masque ou affiche un élément sans modifier l’espace occupé. Tu peux basculer entre visible, hidden ou collapse pour gérer les affichages dynamiques.W
WeightLa propriété ‘Weight’ ajuste l’épaisseur du texte (light, regular, bold, etc.), permettant de varier l’impact visuel et de hiérarchiser l’information via la force du contraste typographique.Width & HeightLes contrôles ‘Width & Height’ permettent de définir ou de contraindre la taille d’un élément en pixels, % ou unités viewport (vw, vh).WireframerOutil d'intelligence artificielle qui crée des pages pré‑construits et qui crée une nouvelle page dans l’arborescence du site.WrapLe ‘Wrap’ active le passage d’une nouvelle ligne ou colonne lorsqu’il n’y a plus d’espace disponible. Essentiel pour créer des galeries d’images ou des listes d’articles qui se réorganisent automatiquement selon la taille du container.FIN DE L'INDEX FRAMER
Retour en haut/ SE FORMER
Tu connais les mots.
Apprends à t'en servir.
La formation Framer reprend chacun de ces termes en pratique, projet par projet. Accès à vie.
Voir la formation Framer★ ★ ★ ★ ★ 4,9/5 · 86 AVIS
/ AUTRES COLLECTIONS













