Les styles globaux sont des ensembles prédéfinis de propriétés visuelles (typographie, couleur, effets, etc.) qui peuvent être appliquer à plusieurs éléments.
- Exemples :
- Text style : « Titre H1 – Inter Bold 32px – #1A1A1A »
- Color style : « Primary/500 – #2563EB »
- Avantages :
- Cohérence visuelle
- Mise à jour centralisée
- Documentation implicite du langage visuel
Limitation : Les styles globaux sont souvent statiques et peu sémantiques. Ils ne portent pas toujours de sens fonctionnel (ex. : “Bouton primaire” vs “#2563EB”).
Dans Figma
- Utilisez les variables de design (depuis la fonctionnalité Variables) pour stocker les valeurs sémantiques (ex.
--color-button-primary). - Créez des styles globaux basés sur ces variables (ex. un text style “Label/Button” qui utilise la variable
--font-size-sm)
En développement
- Les variables deviennent des design tokens (via Style Dictionary, Theo, ou outils similaires).
- Les styles globaux n’existent plus en tant que tels — ils sont remplacés par des classes CSS ou des composants qui consomment les tokens.
Explorer les thématiques : Figma, Design conception numérique