Pourquoi maîtriser les composants et l’auto-layout change tout

La plupart des designers utilisent Figma comme un outil de dessin. Ils créent des rectangles, ajoutent du texte, alignent manuellement. Résultat : chaque modification prend des heures, les designs ne sont pas cohérents, et les développeurs reçoivent des fichiers inexploitables.

Les composants et l’auto-layout transforment Figma en un système de design programmatique. Un bouton modifié une fois se met à jour partout. Un layout s’adapte automatiquement au contenu. Vous passez de « dessiner des écrans » à « construire un système » — exactement comme un développeur pense en composants React ou Vue.

Composants : les fondamentaux revisités

Créer un composant réutilisable

Sélectionnez un élément et appuyez sur Ctrl+Alt+K (ou clic droit → Create Component). Le cadre passe en violet — c’est votre composant maître (Main Component). Chaque copie est une instance qui hérite des modifications du maître.

Règle d’or : Si un élément apparaît plus de 2 fois dans votre design, c’est un composant. Boutons, cartes, inputs, headers, footers, badges, avatars — tout doit être componentisé.

Architecture de nommage

Utilisez le slash (/) pour créer une hiérarchie dans le panneau Assets. Cette convention est essentielle pour les projets complexes :

Button/Primary/Default
Button/Primary/Hover
Button/Primary/Disabled
Button/Secondary/Default
Button/Secondary/Hover
Input/Text/Default
Input/Text/Focus
Input/Text/Error
Card/Product/Small
Card/Product/Large
Card/Blog/Default

Chaque slash crée un niveau de dossier. Vos collègues et vous-même retrouverez n’importe quel composant en quelques secondes.

Variants : un composant, multiples états

Les variants regroupent les différentes versions d’un composant dans un seul conteneur. Créez-les ainsi :

Créez toutes les versions de votre bouton (default, hover, active, disabled, loading)
Sélectionnez tous les composants
Cliquez sur « Combine as Variants » dans le panneau de droite
Nommez les propriétés : State (Default/Hover/Disabled), Size (SM/MD/LG), Type (Primary/Secondary/Ghost)

Résultat : dans le panneau de propriétés, les designers choisissent l’état via des menus déroulants au lieu de chercher le bon composant manuellement. Un seul composant « Button » remplace 15 composants séparés.

Component Properties (Figma 2024+)

Les propriétés de composant vont au-delà des variants. Elles permettent de modifier le contenu sans détacher l’instance :

Text Property — Rendez le texte d’un bouton éditable sans toucher à la structure. Clic droit sur le texte → « Apply text property »
Boolean Property — Afficher/masquer un élément (icône, badge, sous-titre). Le designer coche/décoche dans le panneau
Instance Swap — Permettre de changer une icône ou un avatar dans l’instance. Définissez quels composants sont interchangeables
Preferred Values — Limitez les choix de couleurs ou tailles pour garder la cohérence. Empêche les designers de sortir du design system

Auto-layout : le guide complet

Le concept fondamental

L’auto-layout est le CSS Flexbox de Figma. Il définit comment les éléments se positionnent les uns par rapport aux autres automatiquement. Plus de calculs manuels de position ou de taille — le contenu dicte la mise en page.

Pour ajouter un auto-layout : sélectionnez un frame et appuyez sur Shift+A. C’est le raccourci que vous utiliserez le plus souvent.

Direction et espacement

Horizontal (→) — Les éléments s’empilent de gauche à droite. Utilisez pour : barres de navigation, groupes de boutons, tags, breadcrumbs.

Vertical (↓) — Les éléments s’empilent de haut en bas. Utilisez pour : listes, cartes empilées, sections de page, formulaires.

Wrap — Les éléments passent à la ligne quand l’espace manque. Utilisez pour : grilles de tags, galeries d’images, grilles de produits responsives.

Gap (espacement) — Définissez l’espace entre les éléments. Un spacing system cohérent utilise des multiples de 4 ou 8 : 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px.

Padding et alignement

Le padding contrôle l’espace entre le contenu et les bords du frame. Deux modes :

Padding uniforme — Cliquez sur l’icône de chaîne pour appliquer la même valeur partout. Utile pour les boutons : padding 12px vertical, 24px horizontal
Padding individuel — Désactivez la chaîne pour des valeurs différentes haut/droite/bas/gauche. Utile pour les sections de page : 64px haut/bas, 24px droite/gauche

Alignement : Neuf positions possibles (3×3 : haut-gauche, haut-centre, haut-droite… etc). L’alignement contrôle où les enfants se positionnent quand le parent est plus grand qu’eux.

Resizing : Fixed, Hug et Fill

C’est ici que la magie opère :

Fixed — Taille fixe en pixels. Le contenu ne change pas la taille du frame. Utilisez pour : icônes, avatars, images à taille fixe
Hug Contents — Le frame s’adapte à la taille de son contenu. Comme width: fit-content en CSS. Utilisez pour : boutons, tags, badges, cartes dont la hauteur varie
Fill Container — Le frame prend toute la largeur/hauteur disponible du parent. Comme width: 100% en CSS. Utilisez pour : inputs dans un formulaire, colonnes qui partagent l’espace

Combinaison puissante : Un bouton avec texte en Hug horizontalement (s’adapte au texte) + Fixed en hauteur (toujours 44px). Un formulaire avec inputs en Fill (prennent toute la largeur) dans un container en Hug verticalement (s’adapte au nombre de champs).

Auto-layout imbriqués

La vraie puissance vient de l’imbrication. Une page web typique est construite ainsi :

Page (Vertical, Fill width)
├── Header (Horizontal, Fill width, Hug height)
│   ├── Logo (Fixed)
│   ├── Navigation (Horizontal, Hug)
│   │   ├── Nav Link (Hug)
│   │   ├── Nav Link (Hug)
│   │   └── Nav Link (Hug)
│   └── CTA Button (Hug)
├── Hero Section (Vertical, Fill width, padding 64px)
│   ├── Heading (Fill width)
│   ├── Subtitle (Fill width, max-width 600px)
│   └── Button Group (Horizontal, Hug)
├── Features Grid (Wrap, Fill width, gap 24px)
│   ├── Feature Card (Fixed 300px width)
│   ├── Feature Card (Fixed 300px width)
│   └── Feature Card (Fixed 300px width)
└── Footer (Vertical, Fill width)

Chaque niveau est un auto-layout dans un auto-layout. Le résultat : modifiez le texte du heading, et toute la page se réajuste automatiquement.

Construire un design system complet : exercice pratique

Étape 1 : Tokens de base

Créez une page « Foundations » avec vos primitives :

Couleurs — Définissez comme styles Figma : Primary/50 à Primary/900, Neutral/50 à Neutral/900, Success, Warning, Error. Minimum 5 nuances par couleur
Typographie — Créez des styles de texte : Heading/H1 à H6, Body/Large, Body/Default, Body/Small, Caption, Overline. Définissez la taille, line-height (1.5 pour le body, 1.2 pour les headings), et le font-weight
Spacing — Documentez votre échelle : 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128px
Border radius — 4px (subtle), 8px (default), 12px (medium), 16px (large), 9999px (pill/full)
Shadows — 3 niveaux : sm (0 1px 2px), md (0 4px 8px), lg (0 8px 24px)

Étape 2 : Composants atomiques

Construisez les éléments de base avec auto-layout :

Bouton : Auto-layout horizontal, padding 12/24, gap 8 (entre icône et texte). Variants : Primary/Secondary/Ghost × Default/Hover/Active/Disabled × SM/MD/LG. Propriétés : label (text), leftIcon (instance swap, boolean), rightIcon (idem).

Input : Auto-layout vertical (label + champ + message d’erreur), gap 4. Le champ lui-même est un auto-layout horizontal (icône + texte + icône clear). Variants : Default/Focus/Error/Disabled. Propriétés : label, placeholder, helperText, hasIcon (boolean).

Badge : Auto-layout horizontal, padding 4/8, border-radius pill. Variants : couleur (6 options) × taille (SM/MD). Propriété : label (text), hasDot (boolean).

Étape 3 : Composants composés

Assemblez les atomes en molécules :

Card : Auto-layout vertical. Image (fixed height) + Content area (auto-layout vertical : titre + description + tags en auto-layout horizontal wrap + bouton). Le tout en Hug height, Fill ou Fixed width.

Navigation bar : Auto-layout horizontal, space-between (gap: auto entre le groupe gauche et le groupe droit). Logo (fixed) + Nav links (auto-layout horizontal, gap 32) + Actions (auto-layout horizontal, gap 16).

Form : Auto-layout vertical, gap 16. Chaque ligne est soit un Input seul (Fill width), soit un auto-layout horizontal de 2 inputs (chacun en Fill, gap 16 entre eux). Bouton submit en Hug ou Fill selon le design.

Techniques avancées

Absolute Position dans l’auto-layout

Parfois, un élément doit se superposer au layout (badge de notification sur un avatar, bouton close sur une modal). Sélectionnez l’élément enfant et cliquez sur l’icône « Absolute position » dans le panneau de droite. L’élément sort du flux auto-layout et se positionne avec des contraintes (top, right, bottom, left).

Min et Max width/height

Définissez des limites de taille pour des composants responsifs. Un champ de recherche en Fill container avec min-width 200px et max-width 600px : il prend l’espace disponible mais ne devient ni trop petit ni trop large. Indispensable pour les designs qui doivent fonctionner en mobile et desktop.

Variables Figma (2024+)

Les variables remplacent les styles pour les valeurs primitives. Créez des collections :

Primitive — Couleurs brutes : blue-500: #3B82F6, gray-100: #F3F4F6
Semantic — Rôles : color-primary: blue-500, color-bg-page: gray-100, color-text-body: gray-900
Component-specific — button-bg-primary: color-primary, button-text-primary: white

L’avantage : activez le mode sombre en changeant uniquement la collection « Semantic ». color-bg-page passe de gray-100 à gray-900, color-text-body de gray-900 à gray-100. Tous les composants s’adaptent automatiquement.

Interactive Components (prototypage avancé)

Ajoutez des interactions directement dans les composants : hover sur un bouton, focus sur un input, ouverture d’un dropdown. Dans le mode Prototype, connectez les variants entre eux avec des transitions « While hovering » ou « On click ». Chaque instance hérite automatiquement des interactions — plus besoin de reconnecter chaque écran.

Workflow professionnel avec les composants

Organisation du fichier

📄 Design System (fichier partagé en librairie)
├── 📑 Cover (titre, version, date de mise à jour)
├── 📑 Foundations (couleurs, typo, spacing, grilles)
├── 📑 Icons (tous les icônes en composants)
├── 📑 Components/Atoms (boutons, inputs, badges, avatars)
├── 📑 Components/Molecules (cards, forms, navbars)
├── 📑 Components/Organisms (headers, footers, sidebars)
└── 📑 Patterns (layouts de page types)

📄 Projet Client (fichier de design)
├── 📑 Cover
├── 📑 Wireframes
├── 📑 Desktop Screens
├── 📑 Mobile Screens
├── 📑 Prototype Flow
└── 📑 Handoff Notes

Publier et maintenir une librairie

Créez votre fichier Design System dans un projet d’équipe
Allez dans Assets → icône livre → « Publish library »
Sélectionnez les composants et styles à publier
Ajoutez une description des changements (changelog)
Dans les fichiers projet, activez la librairie via Assets → icône livre → recherche
Quand vous modifiez le design system, re-publiez. Les fichiers projet affichent une notification de mise à jour

Handoff développeur efficace

Un design system bien construit facilite énormément le handoff :

Nommage cohérent — Vos composants Figma correspondent aux composants React/Vue. Button/Primary/Large → <Button variant= »primary » size= »lg » />
Inspect mode — Les développeurs voient directement les propriétés auto-layout (direction, gap, padding) qui correspondent au CSS flexbox
Variables → CSS custom properties — Vos variables Figma se traduisent directement en –color-primary, –spacing-md, etc.
Dev Mode (payant) — Génère des snippets de code, montre les redlines, compare les versions. Très utile pour les équipes design-dev intégrées

Erreurs courantes et comment les éviter

Détacher les instances — Presque jamais nécessaire. Si vous détachez, vous perdez la connexion au composant maître. Utilisez plutôt les propriétés et les overrides
Trop de variants — 50+ variants dans un composant le rendent inutilisable. Séparez en sous-composants ou utilisez les propriétés boolean/instance swap
Ignorer le responsive — Testez vos composants en Fill container à différentes largeurs. Un bouton qui casse à 120px de large est un mauvais composant
Pas de documentation — Ajoutez des descriptions aux composants (visible dans le panneau Assets). Documentez l’usage prévu, les do/don’t, et les propriétés disponibles
Mélanger les auto-layouts et le positionnement libre — Dans un frame auto-layout, tous les enfants doivent suivre le flux (sauf ceux en absolute position intentionnellement). Un enfant positionné manuellement cassera le layout

Maîtriser les composants et l’auto-layout dans Figma n’est pas optionnel pour un designer professionnel en 2025. C’est la compétence qui sépare un designer junior qui dessine des écrans d’un designer senior qui construit des systèmes. Pratiquez sur un projet personnel : redesignez une app que vous utilisez quotidiennement en créant chaque élément comme un composant avec auto-layout.

Guide complet : Figma avancé — composants et auto-layout