Les design tokens (couleurs, espacements, typo) assurent la cohérence entre design et code. Format standard (DTCG), outils (Style Dictionary, Tokens Studio) et intégration Figma ↔ CSS/JS.
Un token est une variable nommée (ex. color.primary, spacing.md). Le format DTCG (Design Tokens Community Group) définit un schéma JSON. Les outils Style Dictionary et Tokens Studio transforment les tokens en thèmes CSS, SCSS, JS ou mobile. Pour les design systems, les tokens évitent les dérives (couleurs en dur, espacements incohérents) et permettent le theming (light/dark, marques). Figma peut exporter des tokens ; les plugins relient design et code.
Conseil : commencer par couleur, typo et espacement, puis étendre aux composants.
Points forts / Points faibles
Points forts
- Cohérence design ↔ code
- Theming et multi-marques
- Outils et standard DTCG
- Figma et pipelines automatisés
Points faibles
- Mise en place initiale et gouvernance
- Évolution des outils et du format
- Documentation à maintenir