Figma Variables & Modes : le guide ultime pour le theming

Comprendre les variables Figma : quatre types pour gouverner votre système

Depuis leur introduction en 2023, les variables Figma ont transformé la manière dont nous concevons des systèmes de design. Avant leur arrivée, nous dépendions exclusivement des styles pour gérer les couleurs, les typographies et les effets. Les variables vont beaucoup plus loin en permettant de stocker quatre types de valeurs — Color, Number, String et Boolean — et de les réutiliser de façon dynamique à travers l'ensemble de vos fichiers. Cette fondation rend enfin possible un theming véritablement systématique dans Figma.

La puissance des variables reside dans leur capacité a être référencées les unes par les autres. Un token sémantique comme color/surface/primary peut pointer vers une primitive color/blue/600, et cette relation est préservée à travers tous vos composants. Quand vous changez la valeur de la primitive, chaque référence se met a jour instantanément. C'est exactement le comportement que les développeurs connaissent avec les CSS custom properties, et c'est ce qui fait des variables Figma un pont naturel entre le design et le code.

Les variables de type Number sont particulièrement utiles pour les spacements, les arrondis et les tailles. En définissant une échelle de spacing cohérente — 4, 8, 12, 16, 24, 32, 48 — et en l'appliquant via des variables aux propriétés d'auto-layout comme le gap et le padding, vous garantissez une consistance spatiale qui etait auparavant impossible a maintenir sans discipline héroïque de la part de chaque designer.

Collections et modes : la mécanique du theming multi-variantes

Les Variable Collections organisent vos tokens par catégorie logique : une collection pour les couleurs, une pour les espacements, une pour les tailles typographiques, une pour les booléens de visibilité. Cette séparation n'est pas qu'une question d'organisation — elle est structurelle, car les modes s'appliquent au niveau de la collection. Si votre collection de couleurs possède un mode Light et un mode Dark, vous pouvez basculer l'ensemble de votre palette en un seul clic sans affecter vos espacements.

Les modes ne se limitent pas au light et dark. J'utilise régulièrement des modes pour gérer les variantes de marque dans les projets multi-brand, les niveaux de densité d'interface pour les applications adaptatives, les breakpoints pour le responsive design et même les locales linguistiques. Un mode Compact peut réduire vos spacements de vingt pour cent, un mode Brand-B peut remplacer votre palette entière, le tout sans dupliquer un seul composant.

Un point critique a connaître concerne les limites par plan. Le plan Free n'autorise qu'un seul mode par collection, ce qui rend le theming impossible à ce niveau. Le plan Professional offre quatre modes, suffisants pour un theming light/dark avec deux variantes de marque. Le plan Enterprise monte a quarante modes, ce qui ouvre la porte aux systèmes de design les plus complexes. Planifiez votre stratégie de modes en fonction de ces contraintes des le depart.

Scoping et code syntax : le pont vers les développeurs

Le scoping des variables est une fonctionnalité souvent négligée mais fondamentale pour la qualité de votre système. Chaque variable peut être restreinte à des contextes d'application spécifiques : fills, strokes, corner radius, gap, padding, text, opacity et bien d'autres. En limitant une variable de couleur au scope fills uniquement, vous empêcherez un designer de l'appliquer accidentellement à un trait ou à un texte. Cette contrainte élimine une catégorie entière d'erreurs d'utilisation.

La fonctionnalité Code Syntax permet d'associer à chaque variable un nom de code distinct du nom affiché dans Figma. Votre variable peut s'appeler surface/primary dans l'interface designer tout en etant référencée comme --color-surface-primary en CSS, $surface-primary en SCSS ou surfacePrimary en JavaScript. Cette correspondance directe entre les mondes du design et du code accélère considérablement le handoff et réduit les erreurs de traduction.

En activant le Dev Mode de Figma, les développeurs voient directement les noms de code associés à chaque variable utilisée dans un composant. Plus besoin de tableaux de correspondance manuels ou de documentation externe. Le lien est vivant, mis à jour en temps reel et consultable dans le contexte exact du composant inspecte. C'est un gain de temps considérable pour toute l'équipe.

Tokens Studio et le format W3C DTCG : industrialiser la gestion de tokens

Pour les systèmes de design de taille professionnelle, les variables natives de Figma ne suffisent pas toujours. Le plugin Tokens Studio, devenu un standard communautaire, étend les capacités de Figma avec des fonctionnalités avancees : références entre fichiers, expressions mathématiques, gestion de token sets modulaires et surtout un support complet du format W3C Design Tokens Community Group. Sa version 2.0 introduit une plateforme autonome qui va au-dela du simple plugin.

Le format W3C DTCG est la spécification émergente pour l'échange de design tokens entre outils. En structurant vos tokens selon ce standard, vous vous assurez une compatibilité avec l'écosystème grandissant d'outils qui le supportent. Tokens Studio exporte directement dans ce format, ce qui permet ensuite d'alimenter un pipeline de transformation via Style Dictionary v4 pour générer des variables CSS, des fichiers Swift, du XML Android ou tout autre format cible.

Mon workflow type combine Tokens Studio pour la gestion dans Figma, un repository Git pour le versionnage des fichiers JSON, et Style Dictionary v4 dans un pipeline CI/CD pour la transformation. Chaque modification de token dans Figma déclenche une synchronisation vers Git, qui déclenche à son tour la génération de code. Ce pipeline élimine toute intervention manuelle entre le design et le code de production.

Patterns avances : multi-brand, responsive et migration progressive

Le pattern de theming multi-brand repose sur une architecture a deux couches. La première couche contient vos tokens de base — les décisions fondamentales de votre système comme l'échelle typographique et la grille de spacing. La seconde couche contient les tokens spécifiques à chaque marque, définis comme des modes dans vos collections de couleurs et de typographies. Chaque marque hérite de la structure commune mais personnalise l'expression visuelle. Un composant Button fonctionne de manière identique pour toutes les marques, seule son apparence change.

Pour le responsive design, je combine des modes de breakpoint avec l'auto-layout. Une collection de spacing peut avoir des modes Mobile, Tablet et Desktop qui ajustent les valeurs de padding et de gap. En appliquant un mode à un frame parent, tous les composants enfants héritent automatiquement des valeurs appropriees. C'est plus élégant et plus maintenable que de gérer des variantes de composants distinctes pour chaque taille d'écran.

Si vous avez un système existant base sur les styles Figma, la migration vers les variables peut se faire progressivement. Figma supporte les styles et les variables en parallèle, ce qui permet de convertir collection par collection sans perturber le travail en cours. Je recommande de commencer par les couleurs, car c'est la où le gain du theming par modes est le plus immédiat, puis d'étendre aux spacements et aux tailles typographiques dans un second temps.