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

/ 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…

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.

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.

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.

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…

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.

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

Le vocabulaire des autres outils,
au même endroit.