Les Variables Figma ne sont plus une fonctionnalité avancée réservée aux grosses équipes produit. En 2026, tout design system encore construit sur des styles statiques accumule une dette technique qui coûtera cher à rembourser. Les équipes qui ont franchi le pas le disent toutes : on ne revient pas en arrière.
Le changement de fond n’est pas cosmétique. Variables et Modes ont reconfiguré la logique même du design system, en passant d’une collection de styles figés à une architecture de valeurs gouvernées. Ce guide fait le point sur ce que ça change concrètement.
Variables ou Styles : clarifier la confusion une bonne fois
Figma propose les deux, et la confusion persiste dans beaucoup d’équipes. La différence n’est pas une question de préférence.
| Styles | Variables | |
|---|---|---|
| Ce que c’est | Paquet de propriétés visuelles groupées | Valeur unique nommée et réutilisable |
| Contextuel | Non | Oui, via les Modes |
| Typographie | Oui | Oui, depuis 2026 |
| Adaptatif dark/light | Non | Oui |
| Synchronisation code | Partielle | Oui, import/export natif |
La règle pratique en 2026 : les Styles servent à grouper des Variables pour créer des raccourcis réutilisables, par exemple un style de texte qui combine plusieurs variables de typographie. Ils ne remplacent plus les Variables, ils les complètent.
Les quatre types de Variables à maîtriser
Color et Number : les bases
Ce sont les deux types originaux, aujourd’hui bien documentés. En pratique :
- Color : toutes les couleurs de la palette, des états interactifs, des surfaces et des composants
- Number : espacements, rayons de bordure, tailles de police, opacités
Le piège classique : continuer à créer des styles de couleur en parallèle des variables Color. Les deux coexistent dans Figma, mais maintenir les deux double le travail et génère des incohérences.
String : les variables qui changent tout pour la typographie
Les variables String permettent de stocker du texte : noms de familles de polices, labels, chemins d’images. L’apport le plus concret concerne la typographie.
En liant la propriété font-family d’un composant à une variable String, changer la police de tout le système se fait en modifiant une seule valeur. Ce qui prenait une demi-journée de recherche-remplacement prend désormais dix secondes.
Une variable String nommée brand-font liée à tous les composants texte du système : modifier sa valeur met instantanément à jour l’ensemble de la bibliothèque.
Boolean : gérer les états sans dupliquer les composants
Les variables Boolean stockent true ou false. Elles servent à afficher ou masquer des layers selon le contexte, à basculer entre des états sans créer des variantes en double.
Cas d’usage direct : un composant card avec ou sans badge promotionnel. Plutôt que deux variantes distinctes dans la bibliothèque, une variable Boolean contrôle la visibilité du badge. Le composant reste un.
Les Modes : un seul système, tous les contextes
C’est la que les Variables prennent toute leur puissance. Un Mode est un ensemble de valeurs alternatives pour une même collection de variables. Concrètement : un seul composant Button, deux Modes, deux apparences visuelles complètement différentes.
Dark mode et Light mode depuis une seule base
C’est l’usage le plus immédiat. La collection Color contient un Mode Light et un Mode Dark. Chaque variable de couleur à deux valeurs : une par Mode. Basculer le thème d’un écran entier se fait en changeant le Mode appliqué au frame.
Plus besoin de pages dupliquées, de composants séparés par thème ou de librairies parallèles. Un système, deux apparences.
Multi-marque et multi-densité : les cas avancés
En 2026, les équipes qui gèrent plusieurs marques ou plusieurs produits depuis un seul design system bénéficient d’un support natif. Chaque marque devient un Mode dans la collection Brand. Chaque densité d’interface (compact, confortable, spacieux) devient un Mode dans la collection Spacing.
Une mise à jour de charte graphique qui aurait demandé deux semaines de travail sur un design system basé sur les styles prend désormais quelques heures. Le Mode change, les composants suivent.
Variables de typographie : le changement le plus sous-estimé
La prise en charge de la typographie par les Variables est arrivée en 2026 et reste sous-exploitée dans la majorité des équipes. Ce qu’elle rend possible :
- Lier font-family et font-weight à des variables String
- Lier font-size et line-height à des variables Number
- Créer des styles de texte qui combinent ces variables, et qui s’adaptent automatiquement selon le Mode actif
Le résultat : un style de texte Heading/L qui affiche 32px sur desktop et 24px sur mobile, piloté par un changement de Mode, sans dupliquer le composant. La même logique que le responsive en CSS, mais directement dans Figma.
Import/export de variables : la fin des désynchronisations code-design
La promesse du single source of truth entre Figma et le code à longtemps été une aspiration de conférence. En 2026, l’import/export natif des variables en fait une réalité opérationnelle.
Les tokens définis dans Figma s’exportent directement vers le dépôt de code, au format JSON ou via des plugins comme Tokens Studio. Les développeurs consomment les mêmes valeurs que les designers voient dans leurs maquettes. Quand un designer modifie un token de couleur dans Figma, le changement se propage dans le code via un simple export.
C’est un gain structurel pour toute équipe qui a déjà perdu du temps sur des corrections de couleur en prod qui ne correspondaient pas aux specs Figma.
Par où commencer si votre système utilise encore les styles statiques
La migration n’a pas à être totale du premier coup. Une approche par étapes :
- Auditer les styles existants : identifier quels styles de couleur peuvent devenir des variables Color sans casser les composants existants
- Créer la collection Color avec deux Modes : Light et Dark, même si vous ne gérez pas encore le dark mode. La structure sera la quand le besoin arrive.
- Migrer les espacements : remplacer les valeurs Number hardcodées par des variables. C’est rapide et le gain est immédiat sur la cohérence.
- Attaquer la typographie en dernier : c’est la migration la plus délicate, à faire une fois que les Variables Color et Number sont stabilisées.
La migration vers les Variables n’est pas un chantier optionnel. C’est le chemin vers un design system qui résiste à la montée en charge, aux changements de marque et à la collaboration avec les développeurs.
