Les design tokens sont les atomes de votre design system : des valeurs nommées (couleurs, tailles, espacements, ombres) qui représentent les décisions de design de façon abstraite et cross-platform. Plutôt que d'écrire color: #1877F2, vous écrivez color: var(--color-brand-primary). Ce niveau d'abstraction permet de synchroniser votre design entre Figma, web, iOS et Android.
Qu'est-ce qu'un design token ?
Un design token est une paire nom/valeur qui encode une décision de design. {color.brand.primary: #1877F2}, {spacing.4: 16px}, {font.size.lg: 1.125rem}. Ces valeurs peuvent être exportées dans n'importe quel format : CSS custom properties, JSON, SCSS variables, Swift constants, Kotlin values. Un seul changement dans le token met à jour toutes les plateformes simultanément.
Niveaux de tokens : global, alias, component
L'architecture recommandée : Global tokens (les valeurs brutes : blue-500: #3B82F6), Alias tokens (les rôles sémantiques : color-action-primary: {blue-500}), Component tokens (spécifiques à un composant : button-background: {color-action-primary}). Cette hiérarchie permet de changer le thème en modifiant uniquement les alias tokens sans toucher aux composants.
Style Dictionary : transformer les tokens en code
Style Dictionary (Amazon) est l'outil de référence pour transformer des tokens JSON en variables CSS, Sass, iOS Swift, Android XML... Un seul fichier de tokens source génère toutes les sorties. Configurez votre build pipeline pour générer automatiquement les fichiers plateforme à chaque modification des tokens.
Figma Tokens et synchronisation design-code
Figma Tokens (plugin) puis la fonctionnalité native Variables Figma permettent de définir vos design tokens directement dans Figma et de les synchroniser avec votre codebase via GitHub. Les designers modifient les tokens dans Figma, une PR est créée automatiquement — une révolution pour la cohérence design-code.
Tokens pour le theming et le dark mode
Les design tokens brillent pour le theming. Définissez deux sets de tokens : light theme et dark theme, avec les mêmes noms de tokens alias mais des valeurs différentes. color-surface: #FFFFFF en light devient color-surface: #1A1A1A en dark. Un simple switch de thème via data-theme="dark" applique instantanément toutes les modifications. Aucun autre CSS nécessaire.
Tokens d'espacement : le système de spacing
Définissez un système d'espacement basé sur une échelle cohérente (multiples de 4 ou 8 : 4, 8, 12, 16, 24, 32, 48, 64, 96). Nommez-les space-1 à space-24 ou space-xs à space-3xl. Tous les padding, margin et gap de votre interface utilisent uniquement ces valeurs — jamais de padding: 13px arbitraire. Cette discipline crée une harmonie visuelle mesurable.
Implémentation pratique avec CSS custom properties
En CSS, les design tokens deviennent des custom properties :root { --color-primary: #1877F2; --spacing-4: 1rem; }. Tous vos composants utilisent ces variables. Pour le dark mode : [data-theme="dark"] { --color-primary: #4A9FF0; }. Cette approche est compatible avec tous les navigateurs modernes et s'intègre parfaitement avec React, Vue et Svelte.
Gouvernance : maintenir les tokens dans le temps
Les design tokens ne s'auto-gèrent pas. Définissez qui peut modifier les tokens globaux (généralement l'équipe design system), un processus de review pour les changements impactants, et une documentation claire de chaque token (description, exemples d'usage, raison d'être). Un Storybook avec une page dédiée aux tokens aide toute l'équipe à comprendre et utiliser le système correctement.
Conclusion et prochaines étapes
Design tokens constitue un pilier essentiel de votre pratique professionnelle. Ce guide vous a présenté les fondamentaux et les meilleures pratiques du domaine, mais l'apprentissage ne s'arrête jamais.
Pour progresser efficacement :
- Pratiquez régulièrement en appliquant ces techniques sur vos projets réels
- Restez à jour avec les évolutions du secteur en suivant les ressources spécialisées
- Partagez vos expériences avec la communauté pour enrichir votre réseau professionnel
- Mesurez vos résultats avec des indicateurs clairs pour ajuster votre approche
La cohérence et la rigueur dans l'application des méthodes présentées vous permettront d'atteindre rapidement vos objectifs. Lancez-vous dès maintenant et mesurez vos progrès !
