Variables et design tokens dans Figma : guide pratique
Guide pratique des variables Figma : création de thèmes, gestion des modes, export de design tokens vers le code.
Les variables et les tokens de design constituent le systeme nerveux d un design system moderne dans Figma. Introduites officiellement en juin 2023, les variables Figma permettent de definir des valeurs nommees et reutilisables pour les couleurs, les nombres, les chaines de caracteres et les booleens, avec la capacite de varier selon des modes. Cette fonctionnalite transforme Figma d un outil de dessin vectoriel en une veritable plateforme de gestion de tokens de design, rapprochant le design du code comme jamais auparavant.
La distinction entre variables et tokens peut sembler subtile mais elle est fondamentale. Un token de design est un concept abstrait : une decision de design nommee (la couleur de surface principale est blanche en mode clair). Une variable Figma est l implementation technique de ce concept dans l outil. Les variables Figma sont les conteneurs qui portent les tokens de design, leur donnant une existence concrete dans les fichiers Figma. Cette terminologie est importante pour la communication entre les equipes design et developpement.
Ce guide explore en profondeur chaque aspect des variables Figma : la distinction entre tokens primitifs et semantiques, l organisation en collections et en modes, les quatre types de variables (Number, String, Boolean, Color), le scoping pour controler ou les variables sont accessibles, la gestion du theming avec les modes, l implementation du dark mode et les strategies d export vers le code. Chaque section fournit des recommandations pratiques basees sur l experience de design systems en production.
1. Tokens primitifs versus tokens semantiques
L architecture de tokens a deux niveaux est le fondement de tout systeme de variables bien concu. Les tokens primitifs representent les valeurs brutes de votre palette : blue-500, gray-100, font-size-16, spacing-24. Ils n ont pas de contexte d utilisation : blue-500 est simplement une nuance de bleu, sans indication sur ou elle doit etre utilisee. Dans Figma, les tokens primitifs sont des variables qui contiennent des valeurs absolues (un code hexadecimal, un nombre en pixels) et qui ne changent jamais entre les modes.
Les tokens semantiques attribuent un role fonctionnel aux valeurs primitives. Surface-primary, text-secondary, border-interactive, spacing-component-gap sont des tokens semantiques qui decrivent leur usage, pas leur valeur. Un token semantique est toujours un alias vers un token primitif : surface-primary pointe vers white en mode clair et vers gray-900 en mode sombre. Cette indirection est la cle du theming : changer de theme consiste simplement a repointer les tokens semantiques vers d autres primitifs.
Certains systemes introduisent un troisieme niveau intermediaire appele tokens de composant. Ce niveau definit des tokens specifiques a un composant : button-primary-background, card-border-color, input-placeholder-text. Ces tokens de composant aliasent les tokens semantiques et permettent une personnalisation granulaire sans modifier le systeme global. Cependant, ce troisieme niveau ajoute de la complexite et n est recommande que pour les design systems matures servant de multiples produits.
Dans Figma, l aliasage se cree en faisant pointer une variable vers une autre variable. Quand vous editez une variable dans le panneau de variables, vous pouvez saisir une valeur absolue ou selectionner une autre variable comme reference. L icone de chaine indique qu une variable est un alias. Pour maintenir la lisibilite, les tokens primitifs sont generalement dans une collection nommee Primitives et les tokens semantiques dans une collection nommee Semantic ou Tokens.
La convention de nommage est critique pour la maintenabilite. Adoptez une hierarchie de nommage avec des separateurs slash : color/primitive/blue/500, color/semantic/surface/primary, spacing/primitive/24, spacing/semantic/component/gap. Figma utilise ces separateurs pour creer automatiquement des groupes dans le panneau de variables, facilitant la navigation. Documentez votre convention de nommage dans un fichier accessible a toute l equipe et verifiez sa coherence regulierement.
2. Collections et modes : organiser la variabilite
Une collection de variables dans Figma est un conteneur logique qui regroupe des variables partageant une meme dimension de variation. Chaque collection possede un ou plusieurs modes, et chaque variable dans la collection a une valeur potentiellement differente pour chaque mode. La collection est le mecanisme fondamental qui permet aux variables de varier selon le contexte : un theme, un breakpoint, une marque ou toute autre dimension que vous definissez.
L organisation en collections doit refleter les dimensions de variation independantes de votre systeme. Creez une collection Theme pour les couleurs qui varient entre les modes clair et sombre. Creez une collection Breakpoint pour les tailles et espacements qui varient entre desktop, tablette et mobile. Creez une collection Brand si vous gerez des marques multiples. Chaque collection est independante : vous pouvez appliquer un mode Theme et un mode Breakpoint simultanement a un meme frame.
La creation de modes dans une collection se fait via le panneau de variables. Cliquez sur le bouton + dans l en-tete des colonnes de modes pour ajouter un nouveau mode. Chaque mode est une colonne dans le tableau de variables, et vous pouvez saisir des valeurs differentes pour chaque variable dans chaque mode. Le plan gratuit de Figma limite les collections a un seul mode. Le plan Professional offre jusqu a 4 modes par collection, et les plans superieur offrent des modes supplementaires.
L application des modes a un frame est simple mais puissante. Selectionnez un frame sur le canevas, ouvrez le panneau de droite et trouvez la section des variables. Vous y verrez un selecteur pour chaque collection contenant des modes. Choisissez le mode desire et toutes les variables de cette collection utilisees dans ce frame et ses enfants seront resolues selon le mode selectionne. Les modes se propagent en cascade : un enfant herite du mode de son parent sauf s il a un mode explicitement defini.
Pour les design systems multi-produits, la strategie de collections avancee utilise des collections separees pour les tokens de chaque produit, toutes aliasant les memes primitifs. La collection Produit-A contient les tokens semantiques specifiques au produit A, la collection Produit-B ceux du produit B. Les deux aliasent les primitifs de la collection commune. Cette architecture permet a chaque produit d avoir sa personnalite visuelle tout en partageant une base coherente.
3. Types de variables : Color, Number, String, Boolean
Les variables Color sont le type le plus utilise. Elles stockent une valeur de couleur au format RGBA et peuvent etre appliquees a toutes les proprietes de couleur dans Figma : fills, strokes, backgrounds et effets. Une variable Color peut contenir une valeur absolue (un code hexadecimal comme #3B82F6) ou aliaser une autre variable Color. Les variables Color supportent la transparence via la composante alpha, permettant de definir des overlays et des etats semi-transparents comme des tokens reutilisables.
Les variables Number stockent une valeur numerique et s appliquent aux proprietes dimensionnelles : width, height, padding, gap, border-radius, border-width, font-size, line-height, letter-spacing et opacite. Elles sont fondamentales pour les tokens de spacing, de typographie et de dimensionnement. Une variable Number peut etre un entier ou un decimal, et son champ d application (scoping) determine dans quels contextes elle est proposee par l auto-suggestion de Figma.
Les variables String stockent une chaine de texte et sont principalement utilisees pour les contenus textuels variables et les noms de police. Bien que moins courantes que les Color et Number, elles sont utiles pour les systemes multilingues ou les textes changent selon un mode Langue, ou pour les polices qui varient entre les marques. Par exemple, une variable String font-family/heading peut pointer vers Inter en mode Brand-A et vers Roboto en mode Brand-B.
Les variables Boolean stockent une valeur true/false et sont utilisees pour controler la visibilite des couches et les proprietes booleennes des composants. Une variable Boolean show-badge peut etre true en mode Premium et false en mode Free, masquant automatiquement les badges premium dans les designs du produit gratuit. Les variables Boolean s appliquent egalement aux Component Properties de type Boolean, creant un pont entre les variables globales et le comportement des composants.
La combinaison des quatre types permet de modeliser des systemes complexes. Imaginons un composant de carte produit : les couleurs de fond et de texte sont des variables Color (changent selon le theme), les paddings et les tailles sont des variables Number (changent selon le breakpoint), le label du badge est une variable String (change selon la langue) et la visibilite du badge promo est une variable Boolean (change selon le contexte marketing). Chaque dimension de variation est geree par une collection dediee avec ses propres modes.
Besoin d’aide en Figma ?
Nos experts vous accompagnent. Recevez 3 devis gratuits sous 24h.
Gratuit · Sans engagement · Reponse sous 24h
4. Scoping : controler l accessibilite des variables
Le scoping des variables definit dans quels contextes une variable est proposee par l auto-suggestion de Figma. Sans scoping, toutes les variables apparaissent dans tous les selecteurs, creant un menu surcharge et confus. Le scoping permet de filtrer : une variable de spacing n apparait que dans les selecteurs de gap et padding, une variable de border-radius n apparait que dans le selecteur de corner radius, et une variable de couleur de texte n apparait que dans le selecteur de fill pour les couches de texte.
Pour configurer le scoping, ouvrez le panneau de variables, faites un clic droit sur une variable et selectionnez Edit variable. Dans la section Scoping, vous trouverez des cases a cocher pour chaque contexte d application. Pour les variables Color, les scopes disponibles incluent : All fills, Frame fill, Shape fill, Text fill, Stroke. Pour les variables Number, les scopes incluent : Width and height, Gap, Padding, Border radius, Font size, Font weight, Line height, Letter spacing, Paragraph spacing, Opacity.
Une strategie de scoping efficace suit la nomenclature de vos tokens. Toutes les variables du groupe color/surface/ sont scopees a Frame fill et Shape fill. Toutes les variables du groupe color/text/ sont scopees a Text fill. Toutes les variables du groupe color/border/ sont scopees a Stroke. Toutes les variables du groupe spacing/ sont scopees a Gap, Padding, Width and height. Cette correspondance entre le nom et le scope rend l utilisation intuitive et previent les mauvais usages.
Le scoping est particulierement important pour les grandes organisations. Un design system avec 200+ variables devient inutilisable sans scoping car chaque selecteur affiche la liste complete. Avec un scoping correct, un designer qui selectionne un champ de padding ne voit que les 8-10 variables de spacing pertinentes, et un designer qui selectionne une couleur de texte ne voit que les 5-6 variables de couleur de texte. Cette curation reduit la charge cognitive et accelere le workflow.
Revoyez et mettez a jour le scoping regulierement, surtout apres l ajout de nouvelles variables. Un oubli de scoping est facile a manquer car la variable fonctionne correctement, elle est simplement proposee dans trop de contextes. Incluez la verification du scoping dans votre checklist de publication de library. Des plugins comme Variable Organizer peuvent auditer automatiquement le scoping de toutes vos variables et signaler les incoherences.
5. Implementation du theming avec les variables
Le theming est le cas d utilisation le plus courant des variables avec modes dans Figma. Un theme definit l ensemble des apparences visuelles d un produit : les couleurs, les ombres, les radius et parfois les typographies et les espacements. L implementation d un systeme de theming dans Figma suit un workflow precis : definir les primitifs, creer les tokens semantiques, configurer les modes, aliaser les semantiques vers les primitifs selon chaque mode, puis appliquer les modes aux frames de travail.
Commencez par definir votre palette primitive complete. Dans une collection Primitives (sans modes, un seul mode par defaut), creez toutes les couleurs brutes de votre systeme : les gris du blanc au noir en 10 niveaux, votre couleur primaire en 10 niveaux, votre couleur secondaire, vos couleurs de feedback (success, warning, error, info) en 3-5 niveaux chacune. Cette palette represente l univers complet des couleurs disponibles, independamment de tout contexte d utilisation.
Creez ensuite la collection Themes avec deux modes : Light et Dark. Dans cette collection, definissez vos tokens semantiques : surface/primary, surface/secondary, surface/tertiary, text/primary, text/secondary, text/disabled, border/default, border/strong, interactive/primary, interactive/primary-hover, feedback/success, feedback/error, etc. Pour chaque token, aliasez-le vers le primitif approprie dans chaque mode. Par exemple, surface/primary alias white en Light et gray-900 en Dark.
Les ombres et les elevations sont souvent oubliees dans le theming mais sont importantes pour le mode sombre. En mode clair, les ombres utilisent des noirs semi-transparents (rgba(0,0,0,0.1)). En mode sombre, les ombres classiques sont invisibles sur un fond sombre et doivent etre remplacees par des bordures subtiles ou des luminosites legerement differentes. Creez des tokens d elevation specifiques qui aliasent des ombres en mode clair et des bordures ou des fonds legerement plus clairs en mode sombre.
Testez votre theming exhaustivement en creant une page de reference contenant une instance de chaque composant de votre systeme. Appliquez le mode Light a toute la page, puis basculez en Dark. Verifiez visuellement que chaque composant reste lisible, esthetique et fonctionnel dans les deux modes. Portez une attention particuliere aux images, aux icones et aux illustrations qui peuvent necessiter des variantes specifiques par theme. Documentez les exceptions et les ajustements necessaires.
6. Implementation complete du dark mode
Le dark mode n est pas une simple inversion des couleurs. C est un systeme de design a part entiere qui necessite des decisions specifiques pour garantir la lisibilite, le confort visuel et l esthetique. Dans Figma, l implementation du dark mode passe par les modes de la collection de themes, mais la qualite du resultat depend de la reflexion portee a chaque token semantique. Les surfaces sombres utilisent generalement des gris tres fonces (gray-900, gray-800) plutot que du noir pur (#000000), qui est trop contrastant et fatiguant pour les yeux.
La hierarchie des surfaces en mode sombre suit une logique d elevation. La surface de base est la plus sombre (gray-950 ou gray-900). Les elements eleves (cartes, modals, menus) utilisent des surfaces progressivement plus claires (gray-800, gray-700). Cette progression de luminosite cree une illusion de profondeur qui remplace les ombres, moins visibles sur fond sombre. Dans Figma, definissez 4-5 niveaux de surface (surface/base, surface/elevated-1, surface/elevated-2, surface/overlay) avec des valeurs adaptees a chaque mode.
Les couleurs d accentuation doivent etre ajustees pour le mode sombre. Une couleur primaire saturee comme blue-600 (#2563EB) qui fonctionne bien sur fond blanc peut etre agressive sur fond sombre. Desaturez legerement et eclaircissez vos couleurs d accentuation en mode sombre : blue-400 (#60A5FA) est plus confortable que blue-600 sur un fond gris fonce. De meme, les couleurs de feedback (rouge pour les erreurs, vert pour le succes) doivent etre adoucies pour eviter un contraste excessif.
Les images et les illustrations posent un defi specifique en mode sombre. Les images avec des fonds blancs ou clairs creent des flashs lumineux desagreables dans une interface sombre. Plusieurs strategies existent : appliquer un overlay semi-transparent sur les images, reduire la luminosite des images de 10-15% en mode sombre, ou utiliser des illustrations avec des fonds transparents. Dans Figma, vous pouvez creer un composant Image qui applique automatiquement un overlay en mode sombre via une variable Boolean et une couche semi-transparente.
Le contraste en mode sombre requiert des verifications specifiques. Le ratio de contraste WCAG s applique differemment : du texte clair sur fond sombre doit atteindre les memes ratios (4.5:1 pour AA, 7:1 pour AAA) que du texte sombre sur fond clair. Cependant, la perception du contraste varie : un contraste eleve en mode sombre est plus fatigant qu en mode clair. Visez un ratio de 7:1 pour le texte principal en mode sombre et evitez le texte blanc pur (#FFFFFF) qui est trop lumineux. Preferez un blanc legerement attenue comme #E5E5E5 ou #F0F0F0.
7. Export et synchronisation des tokens vers le code
L export des variables Figma vers le code est une etape critique pour maintenir la coherence entre design et developpement. Figma propose une API REST qui permet de lire toutes les variables d un fichier, incluant leurs noms, types, valeurs, modes et alias. Les equipes utilisent cette API pour extraire automatiquement les tokens et les transformer en fichiers de code (CSS custom properties, SCSS variables, Swift constants, Kotlin resources) via des scripts de transformation personnalises ou des outils standardises.
Style Dictionary, developpe par Amazon, est l outil de reference pour la transformation de tokens. Il prend en entree un fichier JSON de tokens et genere des sorties dans de multiples formats. Le workflow typique est : extraction des variables Figma via l API, transformation en format JSON compatible Style Dictionary, puis generation des fichiers de code pour chaque plateforme cible. Les transforms de Style Dictionary gerent les conversions de nommage (slash en camelCase, kebab-case) et de valeur (hex en RGBA, pixels en rem).
Tokens Studio for Figma (anciennement Figma Tokens) est un plugin qui offre une alternative visuelle a l API. Il se synchronise directement avec un repository Git (GitHub, GitLab, Bitbucket, Azure DevOps), exportant les tokens en format JSON et creant des pull requests automatiques quand les tokens changent. Ce workflow permet aux designers de modifier les tokens dans Figma et de declencher automatiquement le pipeline de build qui deploie les nouvelles valeurs en production.
La strategie de synchronisation peut etre unidirectionnelle ou bidirectionnelle. En mode unidirectionnel, Figma est la source de verite et les tokens sont pousses vers le code. En mode bidirectionnel, les modifications de tokens dans le code sont reflectees dans Figma et vice-versa. Le mode unidirectionnel est plus simple et recommande pour la plupart des equipes. Le mode bidirectionnel est utile quand les developpeurs doivent ajuster des tokens pendant l implementation et que ces ajustements doivent se refleter dans Figma.
Automatisez completement le pipeline de synchronisation pour eliminer les erreurs humaines. Configurez un webhook sur votre repository de tokens qui declenche un build a chaque push. Le build execute Style Dictionary, genere les fichiers de code, execute les tests visuels de regression (via Chromatic ou Percy) et deploie les tokens si les tests passent. Ce pipeline CI/CD pour les tokens garantit que chaque modification de design est propagee rapidement et fiablement vers toutes les plateformes cibles.
Questions frequentes
Les variables Figma remplacent-elles Tokens Studio ?
Les variables Figma et Tokens Studio sont complementaires, pas concurrentes. Les variables Figma gerent nativement les couleurs, les nombres, les chaines et les booleens avec des modes, ce qui couvre les besoins de base du theming et du responsive. Tokens Studio ajoute des types de tokens non supportes nativement (ombres composites, border shorthand, typographie composite), une synchronisation Git directe, un support des references croisees entre fichiers et un historique des modifications. La strategie optimale est d utiliser les variables Figma comme interface de design et Tokens Studio comme pont vers le code.
Combien de variables peut-on creer dans un fichier Figma ?
Figma ne publie pas de limite stricte sur le nombre de variables, mais la performance se degrade au-dela de quelques milliers de variables dans un meme fichier. Un design system typique utilise entre 200 et 500 variables pour un systeme de taille moyenne (palette de couleurs, spacing, typographie, radius, effets). Les systemes multi-marques ou multi-produits peuvent atteindre 1000-2000 variables. Au-dela, envisagez de segmenter vos variables en fichiers de library separes pour maintenir les performances.
Comment gerer les tokens de shadow et de border-radius qui ne sont pas supportes nativement par les variables Figma ?
Les ombres (box-shadow, drop-shadow) et les gradients ne sont pas directement supportes comme types de variables Figma. Deux approches existent. La premiere utilise des variables Number separees pour chaque composante de l ombre (offset-x, offset-y, blur, spread) et une variable Color pour la couleur, composees dans un Effect Style. La seconde utilise Tokens Studio qui supporte les ombres et les gradients comme types composites et les synchronise avec le code. Le border-radius est gere par les variables Number avec un scope dedie.
Quelle est la meilleure strategie pour migrer des styles Figma existants vers des variables ?
La migration se fait progressivement pour eviter les disruptions. Commencez par creer vos variables primitives correspondant aux valeurs de vos Color Styles et Text Styles existants. Puis creez les variables semantiques aliasant les primitives. Ensuite, mettez a jour les composants de votre library pour utiliser les variables au lieu des styles, en commencant par les composants les plus utilises. Publiez les modifications par lots pour permettre aux equipes consommatrices de s adapter. Conservez les styles existants en parallele pendant la transition et supprimez-les une fois que tous les fichiers ont migre vers les variables.
Comment les variables interagissent-elles avec les Component Properties dans Figma ?
Les variables et les Component Properties sont deux systemes complementaires. Les variables definissent des valeurs globales reutilisables (couleurs, nombres, chaines, booleens) avec des modes. Les Component Properties definissent l interface configurable d un composant (variantes, toggles, textes, swaps). Les deux interagissent quand une variable Boolean est liee a une Boolean Component Property : le mode de la variable determine automatiquement l etat de la propriete. De meme, les variables de couleur ou de nombre appliquees dans les variantes d un composant changent automatiquement avec le mode du frame parent.
Guides complementaires
Comment créer un design system sur Figma : guide complet 2025
Maîtrisez la création d'un design system complet sur Figma : couleurs, typographie, composants réutilisables et design tokens pour une cohérence parfaite.
FigmaLes 30 meilleurs plugins Figma pour designers en 2025
Sélection complète des 30 meilleurs plugins Figma classés par catégorie : productivité, accessibilité, contenu, animations et collaboration.
FigmaFigma vs Sketch : comparatif complet pour designers en 2025
Comparaison détaillée Figma vs Sketch : fonctionnalités, collaboration, prix et performances pour vous aider à choisir le bon outil.
Outils gratuits recommandes
Lancez votre projet figma
500+ experts verifies prets a vous accompagner. Devis gratuit sous 24h.