Leçon 2 — Figma design system : variants, tokens et libraries
Construction d'un design system pro : variants de composants, design tokens, styles partagés et publication en library.
Objectifs pédagogiques
- Créer des variants pour gérer plusieurs états d'un composant (Primary, Hover, Disabled)
- Définir des design tokens (couleurs, typographies, espacements, ombres)
- Maîtriser les styles partagés (color, text, effect, grid)
- Publier une library partagée entre fichiers et équipe
- Comprendre l'architecture d'un design system d'entreprise (Atomic Design)
Introduction — pourquoi un design system change la donne
Un design system est une collection cohérente de composants, styles, règles et documentation qui définit l'identité visuelle d'un produit. C'est l'équivalent designs des chartes graphiques print, mais pour le numérique. Material Design (Google), Human Interface Guidelines (Apple), Fluent UI (Microsoft), Carbon (IBM) sont des design systems publics célèbres.
Bénéfices :
- Cohérence visuelle entre écrans et entre produits
- Vitesse de design (x3-5 selon Figma Inc.)
- Onboarding rapide des nouveaux designers
- Pont vers développeurs : tokens partagés en CSS variables ou Tailwind config
« Design systems unlock the speed and quality your team needs to compete in today's market. » — Figma — Pourquoi un design system
1. Variants — états multiples d'un composant
Un variant est une variation d'un composant maître. Au lieu de créer 4 components séparés (Button Primary, Secondary, Disabled, Hover), vous créez UN component avec 4 variants.
1.1 Créer un Component Set (variant)
- Créez un component standard (Cmd+Alt+K)
- Sélectionnez-le → panneau droit → bouton « + Variant » dans la section Properties
- Figma duplique le component en mode variant. Renommez les variants : « Default », « Hover », « Active », « Disabled »
- Modifiez chaque variant (couleur, ombre, opacité)
- Ajoutez d'autres dimensions de variants : Size (Small, Medium, Large), Icon (None, Left, Right), Loading (True, False)
1.2 Properties dans Variants
Une fois plusieurs variants créés, ajoutez des Properties pour structurer :
| Property Type | Usage | Exemple |
|---|
| Variant | Liste de valeurs | State: Default / Hover / Active / Disabled |
| Boolean | True/False | Has Icon: true / false |
| Instance Swap | Choisir une icône parmi un set | Icon: ChevronLeft / Plus / Trash |
| Text | Texte personnalisé | Label: "Click me" |
Cas pratique 2 — Système de boutons complet
Créez un système de boutons à 3 dimensions :
- Component de base : bouton Default Primary Medium
- Ajoutez Property "Variant" : State (Default, Hover, Active, Disabled)
- Ajoutez Property "Variant" : Size (Small, Medium, Large)
- Ajoutez Property "Boolean" : Has Icon (true/false)
- Figma génère 4×3×2 = 24 variants au total
- Configurez chaque variant manuellement (couleur, padding, font-size)
- Utilisez dans le canvas : panneau droit → choisir State + Size + Has Icon. Le component s'adapte instantanément.
2. Styles partagés
Les styles sont des valeurs réutilisables nommées. Modifier le style propage à tous les éléments l'utilisant.
2.1 Types de styles
| Type | Exemples | Création |
|---|
| Color (Fill, Stroke) | Primary 500, Secondary 100, Error | Panneau Fill → icône Style |
| Text | Heading 1, Body M, Caption | Panneau Text → icône Style |
| Effect | Shadow SM/MD/LG, Inner shadow | Panneau Effects → icône Style |
| Grid | Desktop 12 col, Mobile 4 col | Panneau Layout Grid → icône Style |
2.2 Convention de nommage
Avec slashes pour créer une hiérarchie :
Color/Brand/Primary 500Color/Neutral/Gray 100 à Gray 900Color/Semantic/Success, Color/Semantic/Error, Color/Semantic/WarningText/Heading/H1, Text/Body/Regular, Text/Body/BoldEffect/Shadow/SM, Effect/Shadow/MD
3. Design tokens — pont vers le code
Un design token est une variable de design (« Primary Color », « Spacing 4 ») exportable vers le code (CSS variables, Tailwind, iOS, Android). C'est le langage commun entre designers et développeurs.
3.1 Variables Figma (depuis 2023)
Figma a introduit en juin 2023 les Variables natives. Plus puissantes que les Styles, elles permettent :
- Valeurs primitives : Color, Number, String, Boolean
- Aliases (référence à une autre variable)
- Modes : Light / Dark, Mobile / Desktop, etc.
- Application dans Auto-layout (padding, gap, spacing)
3.2 Créer des variables
- Panneau Local Variables (icône dé en haut à droite) ou Cmd+K
- Créez une Collection : « Primitives », « Semantic »
- Add new variable : color-blue-500 = #2563EB
- Add new variable : semantic-primary = {color-blue-500} (alias)
- Ajoutez un mode « Dark » et redéfinissez les valeurs
3.3 Plugin Tokens Studio
Pour les design systems pro, utilisez Tokens Studio (anciennement Figma Tokens). Synchronisation bidirectionnelle Figma ↔ GitHub via JSON, export multi-plateformes (CSS, SCSS, JSON, iOS, Android).
Cas pratique 3 — Mini-design-system pour SaaS
Construisez le squelette d'un design system :
- Variables Primitives :
- color-blue-50, 100, 200... 900
- color-gray-50 ... 900
- color-red-500, color-green-500, color-yellow-500
- spacing-1 = 4, spacing-2 = 8, spacing-3 = 12, spacing-4 = 16, spacing-6 = 24, spacing-8 = 32
- radius-sm = 4, radius-md = 8, radius-lg = 16, radius-full = 9999
- Variables Semantic (aliases) :
- bg-default = color-white
- bg-muted = color-gray-50
- text-primary = color-gray-900
- text-muted = color-gray-500
- border-default = color-gray-200
- Mode Dark : redéfinissez les semantic (bg-default = color-gray-950, etc.)
- Toggle mode dans la frame → toute votre maquette bascule en Dark Mode instantanément
4. Atomic Design — méthodologie d'organisation
Méthodologie créée par Brad Frost (auteur du livre « Atomic Design »). Hiérarchise les composants en 5 niveaux :
| Niveau | Description | Exemples |
|---|
| Atomes | Éléments indivisibles UI | Bouton, Input, Icon, Label, Tag |
| Molécules | Combinaison de quelques atomes | Champ recherche (Input + Bouton), Card produit (Image + Texte + Bouton) |
| Organismes | Section UI complexe | Header (Logo + Menu + Search + Avatar), Footer, Sidebar |
| Templates | Squelette de page | Layout 2 colonnes avec sidebar |
| Pages | Instance concrète avec données réelles | Page d'accueil, Profile utilisateur, Checkout |
4.1 Structure de fichier Figma recommandée
- Page « 🎨 Design Tokens » : variables + styles
- Page « ⚛️ Atoms » : Button, Input, Avatar, Badge, Icon
- Page « 🧬 Molecules » : SearchBar, Card, FormField, Dropdown
- Page « 🦠 Organisms » : Header, Footer, Sidebar, Modal
- Page « 📄 Templates » : Layouts vides
- Page « 🚀 Pages » : Maquettes finales
5. Libraries — partage entre fichiers
5.1 Publier une library
- Panneau Assets → icône Library en haut → Publish library
- Donnez un nom et une description
- Choisissez les styles et components à inclure
- Publish
5.2 Consommer une library
- Dans un autre fichier : panneau Assets → Library button
- Add to file
- Les components et styles deviennent disponibles dans le panneau Assets et dans les sélecteurs Style
5.3 Mises à jour
Quand vous publiez une nouvelle version (bouton Publish updates), Figma notifie tous les fichiers consommateurs avec un badge. Les utilisateurs peuvent accepter manuellement les updates ou autoriser l'auto-update.
Best practice : ne pas mélanger design system et maquettes : créez un fichier dédié « ITAG Design System » qui contient UNIQUEMENT les components, styles et variables. Les maquettes pages sont dans d'autres fichiers qui consomment cette library. Ceci facilite la maintenance et la version control.
6. Bonnes pratiques de naming et documentation
- Préfixer les components privés par
_ (sous-composants non destinés aux maquettes) - Documenter chaque component avec un texte de description (panneau droit)
- Ajouter des « Cover » : créer une frame d'aperçu pour chaque catégorie
- Utiliser des emojis dans les noms de pages pour navigation rapide
Pièges fréquents — design systems Figma :- Trop d'overrides cassent les updates : si vous changez la position d'un élément dans une instance, le master ne pourra plus déplacer ce groupe.
- Doublons de styles : sans convention de nommage stricte, vous finissez avec « Primary Blue », « primary-blue », « Brand/Primary », « Blue 500 » qui font la même chose.
- Variables non publiées : créées localement, elles ne sont pas accessibles depuis d'autres fichiers tant que vous ne les avez pas publiées.
- Conflits Library : si vous renommez un component utilisé partout, les instances peuvent perdre leur lien. Toujours faire le rename DANS Figma (pas en supprimant/recréant).
- Variables vs Styles : Variables sont plus modernes mais Styles supportent gradients linéaires (qu'une Variable ne peut pas). Mix les deux intelligemment.
Synthèse — Points-clés à retenir
- Les variants regroupent plusieurs états d'un même composant dans un Component Set
- Les Properties structurent les variants : Variant, Boolean, Instance Swap, Text
- Les styles partagés couvrent : Color, Text, Effect, Grid avec nommage Slash
- Les Variables (depuis 2023) supportent aliases, modes (Light/Dark) et types Color/Number/String/Boolean
- L'Atomic Design (Brad Frost) hiérarchise en 5 niveaux : Atomes, Molécules, Organismes, Templates, Pages
- Publier une library permet de partager components et styles entre fichiers et équipe
- Toujours séparer le fichier Design System des fichiers Maquettes
- Plugin Tokens Studio synchronise Figma ↔ GitHub pour design tokens pro
Pour aller plus loin
