Comment créer et utiliser des variables CSS dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer et utiliser des variables CSS (design tokens) dans Webflow.

1. Créez vos variables dans Webflow

Dans le Designer, ouvrez le panneau Variables (icône palette en haut à gauche). Cliquez sur + pour créer une nouvelle variable. Donnez-lui un nom (ex: color-primary) et définissez sa valeur. Les variables sont disponibles pour les couleurs, la typographie et les espacements.

2. Appliquez les variables dans vos styles

Dans le panneau Styles d'un élément, là où vous définissez habituellement une couleur ou une taille, cliquez sur l'icône de variable et sélectionnez votre variable dans la liste. Tous les éléments utilisant cette variable se mettent à jour automatiquement quand vous la modifiez.

3. Créez des modes (dark mode, variantes)

Les variables Webflow supportent les modes : définissez des valeurs alternatives pour les mêmes variables (ex: color-primary en version dark mode). Activez un mode via une classe ou un attribut sur le body.

4. Variables CSS custom via embed

Pour les variables non supportées nativement (espacements complexes, shadows, radius), ajoutez un embed CSS global avec vos custom properties et utilisez-les dans du CSS custom ou des embeds sur les pages.

Conclusion

Les variables CSS accélèrent les changements globaux et garantissent la cohérence. Pour les bonnes pratiques de nommage : créer un système de couleurs cohérent.