Figma Variables

Le framework

1. 01

   Creez vos tokens de couleur

   Definissez des variables semantiques : primary, secondary, surface, text. Changez une variable, tout le fichier suit. Plus jamais de hex codes en dur.

2. 02

   Gerez l'espacement

   4, 8, 12, 16, 24, 32, 48. Vos variables de spacing remplacent les valeurs magiques. Chaque composant utilise le meme systeme, la coherence est automatique.

3. 03

   Activez les modes

   Light mode, dark mode, brand A, brand B : un meme design, plusieurs sets de variables. Vous switchez de theme en un clic sans dupliquer un seul ecran.

4. 04

   Scopez vos variables

   Restreignez l'usage : une variable de couleur pour les fills uniquement, une autre pour les strokes. Ca evite les erreurs et guide votre equipe.

5. 05

   Connectez au code

   Vos variables Figma deviennent des design tokens en JSON. Le dev recoit les memes noms, les memes valeurs. Zero perte en traduction.

Pour aller plus loin