Lors de la Webflow Conf 2023, Webflow a présenté plusieurs nouveautés majeures, comme Localization, l’intégration de Spline et d’autres fonctionnalités. Parmi elles, les variables font leur entrée dans le Designer Webflow. Elles jouent le rôle du sel dans une recette, elles apportent de la cohérence à tout votre site. Dans ce guide complet sur les variables Webflow, nous vous montrons comment les créer, les organiser et les utiliser jusque dans vos interactions.
Les types de variables dans Webflow
Les variables Webflow vont plus loin qu’un simple outil de mise en forme. Elles garantissent une identité visuelle homogène et fluidifient la création. Pensez au temps gagné quand vous changez la couleur dominante de tout votre site Webflow en un seul clic.
Les variables dans le code HTML et CSS
Pour les designers qui veulent tout contrôler, ces variables sont de précieuses alliées. Elles garantissent la cohérence tout en facilitant les mises à jour. Une fois vos variables de code définies, chaque changement que vous apportez se répercute automatiquement sur l’ensemble de votre site.
Les variables dans l’interface Webflow
Webflow va plus loin en intégrant les variables directement dans son interface. Depuis le Designer, vous pouvez définir et ajuster des variables de couleurs (pour un fond, une police, un élément…), de polices (le texte, les titres H1, H2, H3…) et de tailles (un espacement, une bordure, une marge, un élément…). Tout se modifie sans toucher au code, ce qui est pratique quand toute l’équipe veut mettre la main à la pâte.
Maîtriser les variables Webflow avec Ouiflow
Maintenant que vous connaissez les différents types de variables, voyons comment les utiliser.
Créer sa variable
Les variables ont leur propre panneau dans la nouvelle interface Webflow. Pour y accéder, cliquez sur la nouvelle icône en forme d’étiquettes, située entre celle des composants et celle des styles.
Astuce. Si vous êtes pressé, la touche « V » ouvre directement ce panneau.
Comment ajouter une nouvelle variable ?
Dans ce panneau, cliquez sur « + New Variable » en haut à droite pour créer une nouvelle variable. C’est aussi ici que vous retrouvez toutes les variables déjà créées.
Comment retrouver une variable que l’on a créée ?
Quand vous avez beaucoup de variables, retrouver la bonne peut prendre du temps. Webflow propose une fonction de recherche. Tapez le nom de la variable dans la barre de recherche pour la retrouver rapidement.
Comment modifier une variable ?
Trouvez votre variable, cliquez dessus et ajustez sa valeur. Les changements s’appliquent immédiatement partout où la variable est utilisée.
Vous pouvez aussi nommer votre variable, définir sa valeur (une couleur ou une taille de police) et même ajouter une description pour vous rappeler à quoi elle sert.
Vous savez désormais créer vos variables de police, de couleurs et plus encore.
Connecter vos variables
Créer des variables est une première étape. Les utiliser à bon escient en est une autre, et chez Ouiflow nous vous guidons pas à pas. Vous pouvez notamment connecter des variables entre elles.
En comprenant ces relations, vous créez des designs plus cohérents et plus réactifs. Prenons une couleur de bouton qui dépend de la couleur principale du site. Vous avez une variable « Couleur principale » et une autre « Couleur du bouton ». Liez-les, et chaque fois que vous modifiez la « Couleur principale », la « Couleur du bouton » s’ajuste automatiquement.
Le principe s’applique à toutes les variables, les couleurs comme les polices et leurs tailles. Quand vous modifiez une variable, le changement se répercute sur tous les éléments qui y sont liés.
Comment connecter des variables ?
Sélectionnez l’élément à personnaliser, ouvrez le panneau de style et cliquez sur la petite icône violette de lien à côté de la propriété à lier. Choisissez ensuite la variable correspondante dans la liste déroulante.
Construire ses variables prend un peu de temps. Mais les utiliser sans les avoir correctement préparées serait contre-productif, et vous perdriez le gain de productivité et de qualité qu’elles apportent.
Gérer ses variables
Organiser ses variables ressemble à ranger une boîte à outils. Chez Ouiflow, nous conseillons de les classer en 2 catégories, un groupe de variables et un groupe avec les liens entre les variables. Cette distinction clarifie la fonction de chaque variable et optimise leur utilisation.
Regroupez vos variables selon leurs caractéristiques, avec un nom simple et compréhensible. Pour avoir plusieurs couleurs de police, nommez le groupe font-color et précisez la caractéristique, ce qui donne :
- font-color/primary
- font-color/secondary
- font-color/…
En regroupant vos variables par caractéristique, vous naviguez beaucoup plus facilement entre elles sans perdre de temps à les chercher.
Les possibilités de personnalisation deviennent très larges. Testez ces interconnexions sur votre projet pour en mesurer l’intérêt.
Des variables dans les animations et interactions
Webflow pousse l’expérience encore plus loin. Lors de la Webflow Conf 2023, l’équipe a conclu sa présentation des variables en annonçant leur intégration dans les animations du Designer. Vos sites peuvent désormais réagir aux actions des visiteurs grâce aux interactions dynamiques.
Comment rendre une variable dynamique ?
Dans Webflow, rendre une variable dynamique est simple. Ouvrez le panneau des interactions et choisissez l’interaction à laquelle vous voulez appliquer une variable. En bas du panneau, une nouvelle section « Set variable value » est apparue. Choisissez le changement à effectuer et le tour est joué. Vous pouvez aussi ouvrir le panneau des variables et copier le code CSS pour l’intégrer dans le code de l’élément à modifier.
Vous pouvez par exemple lier une variable de couleur à une action de survol, pour changer la couleur d’un bouton quand l’utilisateur passe la souris dessus.
Un exemple d’utilisation ?
Voici quelques exemples concrets pour voir ce que ces variables changent dans la conception d’un site.
Un mode clair et sombre. C’est l’usage le plus évident des variables dynamiques. Associez une variable à un bouton, et vos utilisateurs basculent entre un mode clair et un mode sombre selon leurs préférences, en un clic.
D’autres usages. Les variables dynamiques ouvrent beaucoup de possibilités. Un site dont la couleur de fond change selon l’heure de la journée, ou un élément qui s’anime selon la position de défilement de l’utilisateur. Avec Webflow et ses variables, vous avez les outils pour concrétiser vos idées et vous concentrer sur vos utilisateurs. Un site qui change de couleur selon l’humeur du visiteur ou qui suit le rythme de la musique, à vous d’imaginer la suite.
Bien utilisées, les variables Webflow rendent votre site plus interactif et offrent une expérience utilisateur sur mesure.
Les variables Webflow en bref
Ce qu’il faut retenir des variables :
- Des variables bien pensées. Elles sont conçues pour les designers comme pour les développeurs, chacun y trouve son compte.
- Une grande simplicité. Elles se créent, se modifient et s’associent facilement entre elles ou avec des animations.
- Des modifications instantanées. Le temps gagné peut être réinvesti dans l’amélioration de vos projets.
- Une création intuitive. Vous concevez des sites dynamiques et interactifs, plus agréables pour vos utilisateurs.
Conseils pour une utilisation efficace :
- Planifiez à l’avance. Avant de créer vos variables, listez les éléments que vous utiliserez le plus souvent.
- Nommez clairement. Donnez à chaque variable un nom descriptif pour éviter toute confusion.
- Testez régulièrement. Après avoir connecté une variable, prévisualisez votre site pour vérifier que tout fonctionne comme prévu.
- Restez organisé. Si vous avez de nombreuses variables, regroupez-les par catégorie ou étiquetez-les pour faciliter la navigation.
Bien gérer ses variables dans Webflow permet de concevoir des sites homogènes et de qualité. Une fois maîtrisées, elles accélèrent la conception et garantissent une expérience soignée à vos utilisateurs.
Si vous voulez utiliser Webflow pour votre site, venez en discuter avec nous. Nous verrons ensemble comment notre expertise peut vous aider.
Psst.
De nouveaux types de variables devraient arriver prochainement sur Webflow. Restez attentif, l’équipe Ouiflow vous en parlera dès que ces nouveautés seront disponibles.
Si vous préférez des explications plus détaillées en vidéo sur les variables, regardez la vidéo ci-dessous.