Imagine un monde où tu peux changer tous tes boutons d’une couleur en un clic, passer du mode clair au mode sombre sans refaire 45 frames, ou encore partager des noms de couleurs cohérents avec les développeurs... Ce monde existe. Et il s’appelle Variables Figma.
Depuis quelque temps, Figma a sorti une nouveauté qui pourrait bien changer la façon dont on conçoit les interfaces : les variables et les design tokens. Voici un tour d’horizon concret, sans blabla inutile, pour comprendre comment ça peut transformer ton quotidien.
1- Qu’est-ce qu’une variable dans Figma ?
C’est l’équivalent des variables qu’on utilise en code. Une couleur, un texte, un nombre, un booléen : tu peux les définir une fois, les utiliser partout, et les mettre à jour en un clic.
Types de variables :
Couleurs : parfait pour créer ta palette (primaire, secondaire, d’arrière-plan...)
Nombres : idéal pour les espacements, les tailles de bordure ou les rayons
Textes : pratique pour les labels dynamiques (ex. Valider / Submit)
Booléens : pour gérer des états (visible / invisible, actif / inactif)
Et surtout : tu peux les combiner à des "modes" (comme dark/light, mobile/desktop).
2- Variables vs Styles : la grande différence
Avant, on avait des styles figés. Maintenant, place à la souplesse :
Styles Figma (avant) | Variables Figma (maintenant) |
|---|---|
Couleurs fixes | Valeurs dynamiques |
Pas de logique conditionnelle | Opérateurs, alias, mode |
Locales et liées uniquement à Figma | Exportables en tokens JSON |
Peu connectés au dev | Synchronisation facile avec code |
Les variables permettent d’intégrer ton design system dans le code sans friction. Tu ne bosses plus dans ta bulle, tu joues en équipe.
3- Cas d’usage concrets : ce que tu peux réellement faire
a. Mode sombre automatique
Tu crées deux modes : Light / Dark. Les couleurs de fond, de texte, de bordure changent en un clic. Pas besoin de dupliquer les maquettes.
<$color-background: Light / Dark>b. Grille d’espacement modulable
Définis une échelle de valeurs (spacing-1, spacing-2, etc.) à appliquer et tu peux les utiliser dans tous tes composants, et les ajuster facilement.
c. Textes dynamiques pour maquettes multilingues
Tu gères tes textes comme des variables : label.submit = "Envoyer" / "Submit". C’est simple, rapide, et super utile si tu fais du design pour plusieurs régions.
4. Variables + Code = Design Tokens synchronisés
Là où ça devient magique, c’est quand tu exportes tes variables sous forme de tokens JSON. Tu peux les importer et les consommer :
par des frameworks comme Style Dictionary, Tailwind, Tokens Studio
dans des design systems codés (ex: avec Angular, React, Vue…)
Tokens Studio for Figma
Ou carrément dans ton repo front-end
Exemple d’export :
{
"color.primary": {
"value": "#0055ff",
"type": "color"
}
}Un seul fichier, un seul langage commun entre design et dév.
5- Design + Dev = Teamwork amélioré
Quand on parle la même langue, tout va plus vite :
Les noms sont clairs pour tout le monde (
color.primary,spacing.md...)Le dev n’a plus besoin de deviner ce que "bleu 2" signifie
Les retours QA sont réduits
Et surtout : tu peux documenter ton design system avec plus de rigueur.
6- Bien organiser ses variables : quelques astuces
Structure par type :
color,space,radius,textUtilise des noms prédictibles :
color.text.default,radius.sm, etc.Garde les modes simples au départ (Dark/Light), puis étends (Mobile/Desktop)
Teste ton système avec un composant réel (un bouton par exemple)
Tu veux briller en review ? Organise tes variables comme un pro.
7- En résumé : les bénéfices clés
Travailler avec des variables, c’est :
Plus de cohérence visuelle
Une évolution du design plus fluide
Moins de détours techniques
Une meilleure communication entre designers et développeurs
Bref, tu ne conçois plus des maquettes : tu conçois un système.
le live Figma du 19 juin 2025
Si tu veux creuser ce sujet, Figma organise un webinaire gratuit avec Alexia Danton pour expliquer tout ça en live.
