Design Tokens

Definition

Standard de representation des decisions de design (couleurs, typo, espacement) dans un format agnostique (JSON/YAML). Convertis en CSS, Sass, JS, iOS, Android via des outils.

Analogie

Une partition de musique : un format universel que chaque instrument (plateforme) peut jouer.

Exemple de code

// tokens.json (W3C Design Token format)
{
  "color": {
    "primary": {
      "$value": "#3498db",
      "$type": "color"
    }
  }
}
// => CSS: --color-primary: #3498db;
// => Sass: $color-primary: #3498db;

Cas d'usage

Synchroniser les valeurs de design entre Figma, web, mobile et toutes les plateformes.

Termes lies