Les Variables Figma permettent de définir des tokens dynamiques (couleurs, espacements, rayons) réutilisables dans tout le fichier. Light/dark, thèmes et design system deviennent gérables sans dupliquer les styles.
Les collections regroupent les variables par thème ou par mode (light, dark, brand). Les aliases permettent de référencer une variable depuis une autre. Les modes (ex. light/dark) appliquent des valeurs différentes à la même variable selon le contexte. Pour les design systems et les interfaces multi-thèmes, les Variables remplacent les couleurs et espacements en dur et alignent Figma avec les tokens que vous exportez vers le code (Style Dictionary, etc.).
Conseil : nommer les variables comme en code (--color-primary, --spacing-md) pour faciliter la synchro design-dev.
Points forts / Points faibles
Points forts
- Single source of truth pour couleurs et espacements
- Modes (light/dark) sans dupliquer les frames
- Alignement avec les design tokens et le code
- Évolution continue (modes, types)
Points faibles
- Courbe d'apprentissage pour les alias et les modes
- Export vers le code à configurer (plugins, API)
- Performance sur des fichiers très gros à surveiller