Figma Variables est sorti en juin 2023 et à changé la façon dont les design systems sont construits. Avant les Variables, changer la couleur primaire d’un design system signifiait modifier chaque composant individuellement. Avec les Variables et les Modes, c’est un seul changement qui se propage à tout le système.
En 2026, les équipes qui n’utilisent pas encore les Variables travaillent avec un design system de la génération précédente. L’investissement initial pour migrer est de 2 à 5 jours selon la taille du système. Le gain en maintenance sur 12 mois est significatif.
Ce que sont les Variables Figma
Une Variable Figma est une valeur nommée et réutilisable. Elle peut stocker une couleur, un nombre (pour les espacements, tailles de police, rayons de coins), une chaîne de texte, ou un booléen. Une fois définie, elle peut être appliquée à n’importe quelle propriété compatible d’un composant ou d’un calque.
Les Variables remplacent et complètent les Styles Figma (couleurs et typographies liées) avec une flexibilité supplémentaire : elles supportent les Modes.
Variables primitives vs sémantiques
La distinction la plus importante pour construire un système robuste est la différence entre variables primitives et variables sémantiques. C’est la même architecture que les design tokens en code, et c’est pour cette raison que les Variables Figma peuvent être synchronisées directement avec les tokens de production (via des plugins comme Token Studio).
- Primitives (ou « global tokens ») : les valeurs brutes de la palette.
blue-500: #2563EB,gray-100: #F3F4F6,space-4: 16px. Elles ne sont jamais utilisées directement dans les composants. - Sémantiques (ou « alias tokens ») : des variables qui référencent des primitives et décrivent un usage.
color-primary: {blue-500},color-background: {gray-100},space-md: {space-4}. Ce sont ces variables qui sont appliquées aux composants.
Pourquoi deux niveaux ? Parce que quand on change de thème (light/dark, brand A/brand B), seuls les tokens sémantiques changent de référence. Les composants n’ont pas besoin d’être modifiés : color-background passe de gray-100 (light) à gray-900 (dark) automatiquement.
Sans séparer primitives et sémantiques, les Variables Figma deviennent vite un système opaque où personne ne sait pourquoi telle valeur à été choisie. Avec cette architecture, chaque changement de thème ou de marque est prévisible et non destructif.
Implémenter les thèmes dark/light avec les Modes
Les Modes permettent de définir plusieurs variantes d’un même ensemble de variables. L’usage le plus courant est le thème dark/light, mais les Modes servent aussi à gérer plusieurs marques dans un même design system.
Configuration pas à pas :
- Créer un groupe de Variables sémantiques :
Semantic/Colors - Ajouter deux Modes :
LightetDark - Pour chaque variable sémantique, définir la valeur primitive correspondante dans chaque Mode.
color-background=white-0en Light,gray-950en Dark. - Appliquer les variables sémantiques aux composants (remplir les couleurs des composants avec les variables, pas avec des valeurs directes)
- Tester le changement de Mode sur un frame : toute la frame bascule entre light et dark en un clic dans le panneau Variables
Variables numériques pour les espacements et la typographie
Les Variables numériques s’appliquent aux espacements (padding, gap, margin), aux rayons de coins, à l’opacité et aux tailles de police. C’est une fonctionnalité moins connue mais très puissante pour la cohérence du système.
Une échelle d’espacement définie en Variables :
space-1: 4px,space-2: 8px,space-3: 12px,space-4: 16px,space-6: 24px,space-8: 32px
Chaque composant utilise ces Variables pour ses espacements internes. Si l’échelle change (passage de 4px à 5px comme unité de base), tous les composants s’ajustent automatiquement. Sans Variables, ce changement nécessite de modifier chaque composant manuellement.
Synchronisation avec le code via Token Studio
Le plugin Token Studio (anciennement Figma Tokens) permet de synchroniser les Variables Figma avec les design tokens de production en JSON, en CSS custom properties, ou directement avec des outils comme Style Dictionary.
Le bénéfice : le design system Figma et le design system code partagent la même source de vérité. Un changement de couleur fait dans Figma peut être exporté, révisé, et intégré dans le codebase sans copier-coller manuel. C’est l’étape finale vers un design system véritablement synchronisé entre design et développement.
