FigmaDESIGN TOKENS VERS
Prérequis
- Collections variables Figma publiées (couleur, spacing, radius, typo)
- Fichier `globals.css` ou module tokens TypeScript dans le repo
- Stack front identifiée (Tailwind v4, CSS modules, styled-components)
- Rule Cursor ou convention « pas de hex hors variables »
Sans pont entre variables Figma et le code, chaque intégrateur interprète les hex à la main — les écarts visuels s'accumulent sprint après sprint. En partageant la même nomenclature sémantique entre Figma et `globals.css`, vous verrouillez la cohérence du design system. Vous allez couvrir le nommage, l'export et la gouvernance côté développement.
Structurer les collections Figma
Séparez primitives (`color/gray/500`) et sémantique (`color/border/default`). Les composants Figma ne lient que des variables sémantiques.
Créez des collections par domaine : Color, Spacing, Radius, Typography, Motion. Publiez chaque collection avant handoff.
Si le projet prévoit light/dark, configurez les modes Figma et leurs équivalents CSS (`:root` + `[data-theme=dark]`). Documentez la stratégie dans Notion.
Aligner le nommage Figma et CSS
Convention unique : slash Figma → tiret CSS (`color/surface/elevated` → `--color-surface-elevated`). Le mapping doit être automatisable ou documenté dans Notion.
Pour Tailwind, exposez les tokens via `@theme` ou `tailwind.config` étendu. Interdisez les valeurs arbitraires `bg-[#334455]` dans la rule Cursor.
Typo : exportez font-family, size, line-height et letter-spacing. Liez les styles de texte Figma aux classes utilitaires (`text-body-lg`).
Exporter et intégrer dans le repo
Choisissez le flux : export manuel documenté, plugin Tokens Studio, ou script CI. L'essentiel est la reproductibilité.
Ouvrez une PR `chore(tokens): sync figma Q2` qui ne touche que `globals.css`, `tokens.ts` ou le fichier theme Tailwind. Le designer valide sur preview Vercel.
En Dev Mode, vérifiez que chaque couleur référence une variable publiée. Si le dev voit un hex brut, il remonte l'écart avant d'intégrer.
Erreurs fréquentes
Dupliquer les tokens en « legacy » et « new » sans plan de migration.
Exporter les primitives seules : rebrand = refactor de tous les composants.
Oublier les états sémantiques (`color/text/disabled`, `color/border/error`).
Sync ponctuelle : les variables Figma évoluent, le CSS reste figé six mois.
Ce qu'il faut retenir
Une source sémantique partagée Figma ↔ CSS.
Nommage prévisible, modes documentés, PR tokens dédiée.
Dev Mode et rule Cursor empêchent le hardcode.
Re-sync régulière à chaque release design system.
FAQ
Utile si vous ciblez iOS, Android et web depuis un JSON unique. Pour un site Next.js seul, des custom properties bien nommées suffisent souvent.
Surchargez les sémantiques dans un fichier `theme-client.css` importé après les tokens de base — ne dupliquez pas toute la bibliothèque.
Oui : variables CSS comme source, Tailwind comme consommation ergonomique. Évitez les valeurs magiques dans les composants.