Variables de couleur Figma : guide complet pour les systèmes de design

Les systèmes de design s'effondrent dès que les valeurs de couleur divergent entre le design et le code. Un bouton est d'un bleu dans Figma, d'un bleu légèrement différent dans le composant React, et d'un troisième bleu dans la configuration Tailwind. Les variables de couleur Figma — introduites en 2023 et considérablement améliorées depuis — sont le mécanisme qui comble cet écart. Elles transforment les codes hexadécimaux bruts en tokens nommés et sémantiques qui peuvent être référencés dans l'ensemble d'un fichier de design, basculés entre thèmes en un seul clic, et exportés directement vers les formats que les ingénieurs utilisent réellement.

Ce guide couvre le cycle de vie complet : créer des variables, les organiser en collections, configurer les modes clair et sombre, et exporter vers les propriétés CSS personnalisées et la configuration Tailwind.

Que sont les variables Figma ?

Une variable Figma est une valeur nommée pouvant être référencée par n'importe quelle propriété de couche — couleur de remplissage, contour, rayon, espacement, opacité. Quand vous changez la valeur de la variable, chaque couche qui la référence se met à jour automatiquement.

Les variables de couleur stockent spécifiquement une valeur de couleur et lui donnent un nom significatif. Au lieu qu'un rectangle ait un remplissage codé en dur de #3B82F6, il référence la variable color/brand/primary. Quand vous mettez à jour color/brand/primary vers #2563EB, chaque instance dans le fichier se met à jour instantanément.

C'est fondamentalement différent des Styles Figma (l'ancien système). Les styles ne peuvent s'appliquer qu'à des propriétés de style entières (comme "remplissage" ou "contour"), et ils ne supportent pas les modes ou la thématisation. Les variables supportent les modes, ce qui en fait le bon outil pour tout système de design nécessitant des thèmes clair et sombre — ou toute autre variante, comme un mode d'accessibilité à contraste élevé.

Variables vs Styles

Pour les nouveaux systèmes de design, les variables sont le bon choix. Les styles restent utiles pour les propriétés de texte complexes et les effets que les variables ne couvrent pas.

Créer des variables de couleur dans Figma

Les variables de couleur se trouvent dans le panneau Variables, accessible via l'icône de grille dans le panneau de droite, ou via Edition → Variables dans le menu.

Configuration d'une collection

Les variables sont organisées en collections. Chaque collection peut avoir plusieurs modes (comme Clair et Sombre). Avant de créer des variables individuelles, planifiez la structure de votre collection.

Un système bien organisé utilise deux ou trois collections :

1. Primitives — valeurs de couleur brutes sans signification sémantique (red/500, blue/200, neutral/900)
2. Sémantiques — tokens pilotés par le but qui référencent les primitives (color/text/primary, color/background/surface)
3. Composants (optionnel) — tokens spécifiques aux composants qui référencent les sémantiques (button/background/default)

Cette hiérarchie garantit que les changements se propagent correctement. Si vous voulez ajuster votre bleu de marque, vous changez une primitive. Chaque token sémantique qui la référence se met à jour, ce qui met à son tour à jour chaque composant référençant ces sémantiques.

Pour créer une collection : 1. Ouvrez le panneau Variables 2. Cliquez sur + (Nouvelle collection) 3. Nommez-la "Primitives" (ou votre nom préféré)

Création de variables

À l'intérieur d'une collection, cliquez sur le bouton + (Nouvelle variable). Pour les variables de couleur, sélectionnez Couleur comme type.

Nommez les variables en utilisant la notation barre oblique pour créer des groupes :

color/brand/primary
color/brand/secondary
color/text/primary
color/text/secondary
color/background/base
color/background/elevated
color/border/default
color/feedback/success
color/feedback/warning
color/feedback/danger

La barre oblique crée une hiérarchie de dossiers visuelle dans le panneau Variables, rendant gérable des centaines de variables.

Saisie des valeurs

Pour chaque variable, cliquez sur le swatch de couleur et entrez la valeur hexadécimale, ou choisissez dans le sélecteur de couleur. Pour votre collection Primitives, entrez des valeurs hexadécimales brutes. Pour votre collection Sémantiques, au lieu d'entrer un code hexadécimal, cliquez sur l'icône de variable dans le sélecteur de couleur et sélectionnez une variable primitive pour créer un alias (référence).

Les alias sont la clé des systèmes de design maintenables. Votre token sémantique color/background/base devrait aliaser neutral/50 en mode clair et neutral/950 en mode sombre — pas coder des valeurs hexadécimales directement en dur.

Utilisez le Générateur de palette pour générer un ensemble complet et harmonieux de couleurs primitives à partir d'une seule couleur de marque avant de commencer à créer des variables. Le Générateur de nuances est idéal pour créer la gamme 50–950 pour les neutres et les couleurs de marque que vous utiliserez comme tokens primitifs.

Modes de variables pour les thèmes clair et sombre

Les modes sont la fonctionnalité la plus puissante des variables Figma. Une seule variable peut contenir des valeurs différentes pour des contextes différents, et vous basculez entre eux au niveau du cadre.

Ajout d'un mode sombre

1. Ouvrez la collection Sémantiques dans le panneau Variables
2. Cliquez sur + Mode dans la ligne d'en-tête des modes
3. Nommez le nouveau mode "Sombre"

Maintenant chaque variable sémantique a deux colonnes : Clair et Sombre. Pour chaque variable : - Valeur en mode clair : référence à la primitive claire appropriée (par exemple, neutral/50 pour les arrière-plans, neutral/900 pour le texte) - Valeur en mode sombre : référence à la primitive sombre appropriée (par exemple, neutral/950 pour les arrière-plans, neutral/50 pour le texte)

Exemple de correspondance sémantique

Notez que color/brand/primary utilise une nuance différente pour le mode sombre — le bleu de base #2563EB peut passer le contraste WCAG AA sur fond blanc mais échouer sur un fond sombre. Passer à la nuance 400 blue/400 #60A5FA restaure un contraste adéquat sur les surfaces sombres.

Application des modes aux cadres

Sélectionnez n'importe quel cadre dans Figma et regardez la section Variables dans le panneau de droite. Vous verrez votre collection avec un menu déroulant indiquant le mode actuel. Passez à "Sombre" et l'ensemble du cadre, y compris toutes les couches enfants qui référencent des variables sémantiques, se re-rend instantanément en mode sombre.

C'est l'équivalent design de l'activation d'une classe CSS sur l'élément racine — le même mécanisme qui fait fonctionner le mode sombre dans le code.

Modes supplémentaires

Les modes ne se limitent pas au clair et au sombre. Envisagez : - Contraste élevé — pour l'accessibilité (conformité WCAG AAA) - Marque A / Marque B — pour les produits en marque blanche multi-marques - Compact / Confortable — pour les variantes de densité (lors de l'utilisation de variables numériques pour l'espacement)

Chaque mode ajoute une colonne à vos variables. La puissance évolue avec le nombre de composants qui référencent des tokens sémantiques.

Synchronisation des variables avec le code

Les variables ne sont utiles que si les ingénieurs peuvent les consommer sans transcription manuelle. Il y a deux chemins principaux : l'export basé sur des plugins et l'API REST native de Figma.

Export basé sur des plugins (recommandé)

Le plugin Tokens Studio for Figma (anciennement Figma Tokens) est la norme de l'industrie pour la synchronisation bidirectionnelle entre les variables Figma et le code. Il peut :

• Exporter toutes les variables vers un fichier JSON de tokens (format W3C Design Token)
• Pousser vers GitHub, GitLab ou tout dépôt
• S'intégrer avec Style Dictionary pour transformer les tokens en CSS, Tailwind, Sass et autres formats de sortie

Un fichier de tokens exporté typique ressemble à :

{
  "color": {
    "brand": {
      "primary": {
        "$value": "#2563EB",
        "$type": "color"
      }
    },
    "text": {
      "primary": {
        "$value": "{color.neutral.900}",
        "$type": "color"
      }
    }
  }
}

La syntaxe {color.neutral.900} préserve les références d'alias dans la sortie JSON, afin que les outils de transformation sachent que le token sémantique dérive d'une primitive — pas d'une valeur autonome.

API REST Figma

L'API REST de Figma expose les variables directement à l'endpoint /v1/files/{file_key}/variables/local. Vous pouvez automatiser l'extraction dans le cadre d'un pipeline CI/CD :

curl -H "X-Figma-Token: YOUR_TOKEN" \
  "https://api.figma.com/v1/files/YOUR_FILE_KEY/variables/local" \
  | jq '.meta.variables'

La réponse inclut les IDs de variables, les noms, les valeurs résolues par mode et les relations d'alias. Un script Node.js ou Python personnalisé peut transformer cette sortie dans le format dont votre base de code a besoin.

Export vers les propriétés CSS personnalisées

Le format de sortie de code le plus direct pour les projets web est les propriétés CSS personnalisées. Une configuration Style Dictionary peut transformer votre JSON de tokens en fichier CSS :

// style-dictionary.config.js
module.exports = {
  source: ["tokens/**/*.json"],
  platforms: {
    css: {
      transformGroup: "css",
      prefix: "color",
      buildPath: "src/styles/",
      files: [
        {
          destination: "tokens.css",
          format: "css/variables",
          options: {
            outputReferences: true,
          },
        },
      ],
    },
  },
};

La sortie CSS générée ressemble à ceci :

:root {
  /* Primitives */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;
  --color-blue-400: #60A5FA;
  --color-blue-600: #2563EB;

  /* Sémantiques — mode clair */
  --color-background-base: var(--color-neutral-50);
  --color-background-elevated: var(--color-neutral-100);
  --color-text-primary: var(--color-neutral-900);
  --color-brand-primary: var(--color-blue-600);
}

[data-theme="dark"] {
  --color-background-base: var(--color-neutral-950);
  --color-background-elevated: var(--color-neutral-900);
  --color-text-primary: var(--color-neutral-50);
  --color-brand-primary: var(--color-blue-400);
}

Les ingénieurs utilisent --color-brand-primary dans leurs composants. Quand [data-theme="dark"] est appliqué à l'élément racine, la variable se résout automatiquement à la valeur du mode sombre — aucun JavaScript requis au niveau du composant.

Export vers la configuration Tailwind

Pour les projets Tailwind CSS v3, la sortie de tokens se mappe à tailwind.config.js :

// tailwind.config.js
const tokens = require('./tokens/resolved.json');

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: tokens.color.brand.primary.$value,
          secondary: tokens.color.brand.secondary.$value,
        },
        text: {
          primary: 'var(--color-text-primary)',
          secondary: 'var(--color-text-secondary)',
        },
        background: {
          base: 'var(--color-background-base)',
          elevated: 'var(--color-background-elevated)',
        },
      },
    },
  },
};

Pour Tailwind v4, l'approche est encore plus propre. Tailwind v4 utilise du CSS directement pour la configuration, ce qui signifie que votre fichier CSS de tokens peut être importé et consommé sans configuration JavaScript du tout :

/* tailwind.css */
@import "tailwindcss";
@import "./tokens.css";

@theme {
  --color-brand-primary: var(--color-brand-primary);
  --color-text-primary: var(--color-text-primary);
  --color-background-base: var(--color-background-base);
}

Ce motif signifie que la chaîne variable Figma → JSON de tokens → propriété CSS personnalisée → classe utilitaire Tailwind est entièrement automatisée. Quand un designer met à jour une couleur dans Figma, le changement circule dans le pipeline jusqu'au CSS de production sans intervention manuelle.

Organisation des variables à grande échelle

Pour les systèmes de design comportant des centaines de variables, l'organisation évite que le panneau ne devienne ingérable.

Conventions de nommage

Un nommage cohérent permet l'automatisation. Un motif courant :

{catégorie}/{sous-catégorie}/{variante}/{état}

Exemples :

color/text/primary
color/text/secondary
color/text/disabled
color/interactive/primary/default
color/interactive/primary/hover
color/interactive/primary/active
color/interactive/primary/disabled

Évitez d'inclure les noms de modes dans les noms de variables (color/text/primary-dark est un anti-motif). Les modes sont gérés par le système de variables lui-même — le nom de la variable reste le même, la valeur change par mode.

Délimitation des variables

Figma vous permet de délimiter les variables à des types de propriétés spécifiques. Une variable destinée uniquement aux arrière-plans devrait être délimitée à "Remplissage" — elle n'apparaîtra pas dans le sélecteur de couleur lors de la définition d'un contour ou d'une couleur de texte. Cela réduit l'encombrement et évite les mauvais usages.

Clic droit sur n'importe quelle variable → Modifier la variable → Décochez les options de portée pour restreindre où elle apparaît.

Documentation dans Figma

Ajoutez des descriptions à chaque variable dans le panneau Modifier la variable. De bonnes descriptions expliquent l'intention :

• color/brand/primary — "Couleur de marque primaire. À utiliser pour les principaux CTA, liens et éléments d'emphase. Pas pour les arrière-plans."
• color/feedback/danger — "États d'erreur et d'actions destructives uniquement. Ne pas utiliser pour les avertissements généraux."

Ces descriptions sont incluses dans les réponses de l'API REST Figma et peuvent être intégrées automatiquement dans les commentaires de code généré.

Points clés à retenir

• Les variables sont le fondement des systèmes de design évolutifs : elles remplacent les valeurs hexadécimales codées en dur par des tokens nommés et sémantiques qui se mettent à jour globalement lors de leur modification.
• Utilisez une hiérarchie Primitives → Sémantiques : les primitives contiennent des valeurs brutes, les sémantiques aliasent les primitives avec des noms significatifs. Les composants référencent les sémantiques, jamais directement les primitives.
• Les modes permettent le changement de thème sans dupliquer les composants : les valeurs clair et sombre vivent dans la même variable, et une bascule de mode au niveau du cadre change l'ensemble du design.
• Exportez via Tokens Studio ou l'API REST Figma : l'automatisation comble le fossé design-code afin que les variables restent synchronisées entre Figma et votre base de code.
• Les propriétés CSS personnalisées et la configuration Tailwind sont les cibles de sortie les plus courantes. Les variables CSS sont consommées directement ; la configuration Tailwind mappe les noms de tokens vers les classes utilitaires.
• Utilisez le Générateur de palette pour créer votre palette primitive initiale, et le Générateur de nuances pour produire la gamme complète 50–950 pour chaque couleur avant d'entrer les valeurs dans Figma.