Synchroniser les design tokens avec Figma et le code
Activité
— 0 entrée
Pas encore d'entrée.
MaturitéPopulaire
Activité
— 0 entrée
Pas encore d'entrée.
BudgetFremium + Open Source
Pays🇺🇸 🇩🇪
TechnicitéFull dev
Mis à jour16 août 2026
Pourquoi ce workflow ?
zed
Les étapes
ÉtapeActionOutilLivrable
1. Inventorier les valeursListez les couleurs, espacements et typographies réellement utilisés dans les maquettes. Un token sans usage constaté dans un composant n'existe pas encore.FigmaInventaire des valeurs
2. Choisir une convention de nommageLe point qui bloque tout le monde. Comparez les grammaires existantes avant d'inventer la vôtre — renommer plus tard casse toutes les références.AucunConvention documentée
3. Créer les tokens dans Tokens StudioUn set par famille — couleur, espacement, typographie. Séparez les tokens de référence des tokens sémantiques dès le départ.Tokens StudioSets de tokens
4. Brancher la synchronisation GitTokens Studio pousse un JSON dans une branche dédiée du dépôt. Passez par une pull request : c'est votre seul filet avant que les valeurs partent en production.Githubtokens.json versionné
Contexte d'usage
Vérifie vite si tu es dans la bonne configuration avant de te lancer.
Signaux qu'il est temps
→Des hexa en dur apparaissent dans les PR malgré les specs
→Ta QA passe 30%+ de son temps à traquer des écarts visuels
→Les designers modifient des tokens sans les devs
→3+ plateformes (web, iOS, Android) consomment les mêmes tokens
Gains attendus
+Une seule source de vérité pour les tokens, partagée design ↔ code
+Review des changements design par pull request, comme du code
+Consommation multi-plateforme (web, iOS, Android) via un seul pipeline
Historique versionné des décisions design, traçable dans Git
Une config par plateforme. Commencez par le CSS, ajoutez iOS et Android quand le besoin arrive vraiment.
Style Dictionary
variables.css
6. Automatiser le buildUne GitHub Action rejoue la transformation à chaque merge. Les devs consomment un paquet versionné, jamais un fichier copié à la main.GithubPaquet publié
