LexiqueFigma
Figma est l'outil de maquette où se dessinent les interfaces avant d'être construites : cadres, auto-layout, composants, variables, prototype. Voici son vocabulaire complet.
55 TERMES · COLLECTION OUTIL · UNIVERS NO-CODE
/ LES ESSENTIELS
Les 6 termes à connaître
avant tous les autres.
INTERFACEAlignement (Auto‑Layout)Contrôle l’alignement collectif des enfants à l’intérieur d’un Auto‑Layout : Start, Center, End, ou Stretch sur l’axe principal et l’axe croisé.INTERFACEFrameUn Frame est un conteneur qui définit un système de coordonnées et un plan de travail. Il sert d’artboard, de section de page ou de composant parent pour appliquer l’Auto-Layout, le masquage, l’export, etc.INTERFACEContraintesRègles de redimensionnement qui définissent comment un calque réagit quand son parent change de taille (ex. Pin Left & Right, Scale, Center).INTERFACEVariablesFonctionnalité introduisant des « design tokens » dynamiques : couleurs, nombres, chaînes, booléens. Elle permet de piloter thèmes, modes et états depuis un même panneau.INTERFACEText StyleStyle regroupant police, taille, graisse, interlignage et autres propriétés typographiques. Il standardise la hiérarchie de titres, sous‑titres et paragraphes.INTERFACEDev ModeDev Mode est une vue dédiée aux développeurs ; elle révèle code CSS/iOS/Android généré, variables, assets téléchargeables et comparaisons de versions pour faciliter l’implémentation.
/ INDEX FIGMA
Les 55 termes, définis en une phrase.
/ CHERCHER
/ SAUTER À
/ NATURE
A
AbsoluteParamètre qui permet à un calque placé dans un Auto‑Layout de s’extraire du flux automatique et d’être positionné librement tout en conservant la structure Auto‑Layout générale.ActionRéponse exécutée lorsqu’un Trigger se produit : Navigate To, Open Overlay, Swap Overlay, Scroll To, Back, Close Overlay, etc.Alignement (Auto‑Layout)Contrôle l’alignement collectif des enfants à l’intérieur d’un Auto‑Layout : Start, Center, End, ou Stretch sur l’axe principal et l’axe croisé.Alignement (Position)Options qui alignent un ou plusieurs calques par rapport à leur parent ou entre eux : gauche, centre, droite, haut, milieu, bas, distribution horizontale ou verticale.AnimationEffet de transition appliqué entre deux frames (Instant, Dissolve, Smart Animate, Push, Slide In/Out). Les paramètres incluent durée, easing et direction.AssetsOnglet listant les ressources réutilisables du fichier : composants, styles locaux et variables. Il permet de glisser‑déposer ces éléments dans le canvas et de voir leur état (publié/local).B
Barre d’outilsLa barre d’outils horizontale située en bas du canvas regroupe les outils essentiels : sélection, dessin, texte, commentaires, zoom, etc.Boolean VariableVariable vraie/faux utilisée pour contrôler la visibilité conditionnelle d’un calque ou l’état actif/inactif d’un composant dans les prototypes.C
Clip ContentOption qui masque tout contenu qui dépasse les limites d’un frame ou d’un Auto‑Layout, utile pour créer des masques ou gérer les scroll areas.Color StyleStyle qui encapsule une couleur unie ou un dégradé. En l’appliquant à plusieurs calques, tout changement ultérieur mettra à jour l’ensemble des instances.Color VariableVariable de type « Color » stockant une valeur HEX/RGB/HSL. Elle se lie aux remplissages, strokes et effets pour changer de thème instantanément.CommentaireLe mode Commentaire bascule Figma en annotation collaborative : chaque commentaire est épinglé sur la toile et notifie les collaborateurs concernés, favorisant la revue et la validation.ContraintesRègles de redimensionnement qui définissent comment un calque réagit quand son parent change de taille (ex. Pin Left & Right, Scale, Center).Corner radiusValeur qui arrondit les coins d’un rectangle ou d’un frame. Peut être définie uniformément ou séparément pour chaque coin pour créer des formes organiques.D
DashboardLe tableau de bord est la page d’accueil de Figma ; il affiche tes fichiers récents, tes projets d’équipe et les modèles (templates).Dev ModeDev Mode est une vue dédiée aux développeurs ; elle révèle code CSS/iOS/Android généré, variables, assets téléchargeables et comparaisons de versions pour faciliter l’implémentation.DimensionsChamps Largeur (W) et Hauteur (H) permettant de définir la taille absolue d’un calque ou d’un frame, ou de passer en mode ‘Hug’ ou ‘Fill’ lorsqu’il est dans un Auto‑Layout.Direction & GapLa ‘Direction’ (Horizontal ou Vertical) dicte le sens d’empilement des enfants dans un Auto‑Layout, tandis que le ‘Gap’ fixe l’espacement constant entre eux.E
Effect StylePréréglage d’effets (Shadow, Blur) appliqué de manière cohérente aux composants. Idéal pour harmoniser les élévations ou les profondeurs dans un design system.EffectsListe d’effets visuels : Ombre portée, Inner Shadow, Layer Blur et Background Blur. Chaque effet possède ses propres paramètres (offset, blur, spread…).ExportFonction qui génère des fichiers PNG, JPG, SVG ou PDF à différentes échelles (1x, 2x, 4x…). Les paramètres d’export se configurent dans le panneau droit ou via le raccourci ⇧⌘E.F
FillSection où l’on ajoute et gère les remplissages : couleur unie, dégradé linéaire/radial/angulaire, image ou vidéo.FrameUn Frame est un conteneur qui définit un système de coordonnées et un plan de travail. Il sert d’artboard, de section de page ou de composant parent pour appliquer l’Auto-Layout, le masquage, l’export, etc.L
LayersOnglet affichant la pile de calques, groupes, frames et composants de la page courante. On y réorganise la hiérarchie, verrouille ou masque des éléments et sélectionne rapidement des objets.Layout GridGrilles (colonnes, rangées ou carré) superposées aux frames pour assurer des mises en page cohérentes ; on peut créer plusieurs grilles et ajuster marge, gouttière et type.Local StylesStyles enregistrés uniquement dans le fichier courant : Text, Color, Effect ou Grid. Ils centralisent les attributs pour garantir la cohérence et facilitent la mise à jour globale.P
PaddingMarge interne d’un élément en auto‑Layout entre son bord et ses contenus ; elle peut être réglée globalement ou par côté (haut, droite, bas, gauche).PageUne Page est un espace de travail au sein d’un fichier Figma. On y place des frames ou prototypes distincts ; pratique pour séparer les étapes d’un projet (wireframes, UI finale, tests).Panneau de stylePanneau latéral droit où l’on règle l’apparence et les contraintes d’un calque : position, Auto‑Layout, remplissages (Fill), contour (Stroke), effets (shadow, blur), grilles, export, etc.PenL’outil Plume (raccourci : P) crée des tracés vectoriels à segments droits ou courbes via des points d’ancrage Bézier, idéal pour des formes précises ou des icônes.PencilL’outil Crayon dessine des tracés vectoriels à main levée qui sont ensuite lissés automatiquement ; pratique pour des esquisses rapides ou des micro‑illustrations.PositionsGroupe de réglages dans le panneau de style qui contrôle l’emplacement (X, Y), la rotation et le point d’origine d’un calque ou d’un frame.Preview MockupFenêtre de prévisualisation (⌘⌥P) ouvrant ton prototype dans un navigateur embarqué. Elle affiche la maquette dans le cadre d’un appareil virtuel et permet de tester les interactions en temps réel.PrototypeMode qui transforme les frames en écrans interactifs : on relie des nœuds, définit les déclencheurs (tap, hover…), transitions et animations pour simuler le comportement d’une application.S
ScaleOutil d’échelle (raccourci : K) qui redimensionne proportionnellement ou librement des calques, groupes ou frames tout en conservant leurs contraintes internes.Scroll BehaviorParamètres définissant la manière dont un frame gère le défilement : vertical, horizontal, bidirectionnel ou sans scroll.SectionLa Section permet d’entourer plusieurs frames afin de regrouper des écrans (par exemple un user‑flow) et d’ajouter un titre descriptif.Selection ColorsPanneau contextuel qui affiche les couleurs de remplissage/stroke utilisées par les calques sélectionnés, permettant de les modifier rapidement en une seule action.SliceUn Slice définit une zone précise à exporter (PNG, SVG, PDF…) sans bouger les calques originaux. Utile pour générer des assets irréguliers ou multiples en une seule passe.Starting FlowÉcran de départ d’un prototype. En le déclarant comme « Starting Flow », Figma lance la prévisualisation à partir de ce frame et définit le point d’entrée lorsque tu partages le lien.StrokeContour appliqué autour d’un calque ; on y définit couleur, épaisseur, position (inside, center, outside), taille des bouts (caps) et jonctions (joins).T
Text StyleStyle regroupant police, taille, graisse, interlignage et autres propriétés typographiques. Il standardise la hiérarchie de titres, sous‑titres et paragraphes.TexteL’outil Texte (raccourci : T) crée des calques textuels éditables. Tu peux choisir police, style, interlignage, alignement et transformer le texte en éléments Auto‑Layout ou composants.TransformSection qui regroupe la rotation (en degrés) et le retournement horizontal/vertical d’un calque. On y trouve aussi le point d’origine pour pivoter autour d’un coin ou du centre.TriggerÉvènement déclencheur d’une interaction (On Click, On Tap, While Hovering, After Delay, Key/Gamepad, etc.). Il écoute l’action de l’utilisateur pour initier le flux.V
Variable CollectionsPremier niveau d’organisation des variables : chaque collection regroupe des tokens dédiés à un produit, une plateforme ou une bibliothèque.Variable GroupsSous‑regroupements logiques à l’intérieur d’une collection (ex. « Brand/Primary », « Neutral/Light ») qui facilitent la navigation et la maintenance.Variable ModesVariantes parallèles d’un même jeu de variables (Light / Dark, iOS / Android). Chaque mode propose des valeurs différentes mais partage la même structure.VariablesFonctionnalité introduisant des « design tokens » dynamiques : couleurs, nombres, chaînes, booléens. Elle permet de piloter thèmes, modes et états depuis un même panneau.FIN DE L'INDEX FIGMA
Retour en haut
/ SE FORMER
Tu connais les mots.
Apprends à t'en servir.
La formation Figma reprend chacun de ces termes en pratique, maquette par maquette. Accès à vie.
Voir la formation Figma★ ★ ★ ★ ★ 4,9/5 · 86 AVIS
/ AUTRES COLLECTIONS
Le vocabulaire des autres outils,
au même endroit.
/ WEBFLOW106 termes WebflowLayout, CMS, interactions, publication : le vocabulaire du Designer.Explorer/ FRAMER129 termes FramerComposants, variables, effets : le vocabulaire du site animé.Explorer/ NO-CODE354 termes No-codeWebflow, Figma, Framer, Shopify : le vocabulaire des outils que tu utilises tous les jours.Explorer
