Tokens Studio est un outil central dans les workflows modernes de design système. Il permet aux équipes produit, design et développement de :
- Définir des design tokens de façon collaborative : couleurs, typographies, espacements, durées d’animation, ombres, etc., sous forme de variables sémantiques (ex.
--color-primary-action). - Organiser ces tokens en modes (thèmes clair/sombre, plateformes web/mobile) et en hiérarchies imbriquées.
- Exporter les tokens vers Figma (sous forme de Variables Figma) et vers le code (JSON, CSS, SCSS, Tailwind, iOS, Android, etc.) via des formats agnostiques.
- Synchroniser en temps réel les décisions design avec le code source, souvent via GitHub ou un design system platform.
- Éviter la duplication et garantir la cohérence visuelle à grande échelle.
Contrairement à la gestion native des Variables Figma (introduites en 2023), Tokens Studio propose :
- Une interface dédiée et plus puissante pour la gestion de tokens complexes.
- Un format de stockage basé sur JSON/YAML, facile à versionner.
- Une intégration robuste avec des outils comme Style Dictionary, Storybook, Zeroheight, ou des pipelines CI/CD.
- La possibilité de transformer les tokens (ex. convertir des couleurs HSL en hexadécimal selon la plateforme cible).
Site officiel : https://tokens.studio
Plugin Figma : Tokens Studio for Figma