At Webflow Conf 2023, Webflow presented several major new features, such as Localization, the Spline integration and more. Among them, variables arrived in the Webflow Designer. They work like salt in a recipe and bring consistency to your whole site. In this complete guide to Webflow variables, we show you how to create them, organize them and use them all the way into your interactions.
Types of variables in Webflow
Webflow variables go further than a simple styling tool. They keep your visual identity consistent and make the design process smoother. Think of the time you save when you change the main color of your entire Webflow site in a single click.
Variables in HTML and CSS code
For designers who want full control, these variables are valuable allies. They keep things consistent while making updates easier. Once your code variables are defined, every change you make is applied automatically across your whole site.
Variables in the Webflow interface
Webflow goes further by building variables directly into its interface. From the Designer, you can define and adjust variables for colors (for a background, a font, an element…), fonts (body text, H1, H2, H3 headings…) and sizes (spacing, a border, a margin, an element…). You can change everything without touching the code, which is handy when the whole team wants to pitch in.
Mastering Webflow variables with Ouiflow
Now that you know the different types of variables, let's see how to use them.
Creating a variable
Variables have their own panel in the new Webflow interface. To open it, click the new tag-shaped icon, located between the components icon and the styles icon.
Tip. If you are in a hurry, the "V" key opens this panel directly.
How do you add a new variable?
In this panel, click "+ New Variable" at the top right to create a new variable. This is also where you find all the variables you have already created.
How do you find a variable you have created?
When you have many variables, finding the right one can take time. Webflow offers a search function. Type the variable's name in the search bar to find it quickly.
How do you edit a variable?
Find your variable, click on it and adjust its value. The changes apply immediately everywhere the variable is used.
You can also name your variable, set its value (a color or a font size) and even add a description to remind you what it is for.
You now know how to create your font variables, color variables and more.
Connecting your variables
Creating variables is a first step. Using them well is another, and at Ouiflow we guide you step by step. For example, you can connect variables to each other.
Once you understand these relationships, you create more consistent and responsive designs. Take a button color that depends on the site's main color. You have a "Main color" variable and a "Button color" variable. Link them, and every time you change the "Main color", the "Button color" adjusts automatically.
The same principle applies to all variables, colors as well as fonts and font sizes. When you change a variable, the change carries over to every element linked to it.
How do you connect variables?
Select the element you want to customize, open the style panel and click the small purple link icon next to the property you want to bind. Then choose the matching variable from the dropdown list.
Building your variables takes a little time. But using them without preparing them properly would be counterproductive, and you would lose the gains in productivity and quality they bring.
Managing your variables
Organizing your variables is like sorting a toolbox. At Ouiflow, we recommend sorting them into 2 categories, a group of variables and a group with the links between variables. This distinction clarifies the role of each variable and makes them easier to use.
Group your variables by characteristic, with a simple, clear name. If you need several font colors, name the group font-color and add the characteristic, which gives you:
- font-color/primary
- font-color/secondary
- font-color/…
When your variables are grouped by characteristic, you move between them much more easily without wasting time searching.
The customization options become very broad. Try these interconnections on your own project to see what they bring.
Variables in animations and interactions
Webflow takes the experience even further. At Webflow Conf 2023, the team wrapped up its presentation of variables by announcing their integration into Designer animations. Your sites can now react to visitors' actions through dynamic interactions.
How do you make a variable dynamic?
In Webflow, making a variable dynamic is simple. Open the interactions panel and choose the interaction you want to apply a variable to. At the bottom of the panel, there is a new "Set variable value" section. Choose the change you want and you are done. You can also open the variables panel and copy the CSS code to add it to the code of the element you want to change.
For example, you can link a color variable to a hover action, so a button changes color when the user hovers over it.
A use case?
Here are a few concrete examples of what these variables change in how you design a site.
A light and dark mode. This is the most obvious use of dynamic variables. Link a variable to a button, and your users switch between a light mode and a dark mode in 1 click, based on their preferences.
Other uses. Dynamic variables open up many possibilities. Picture a site whose background color changes with the time of day, or an element that animates based on the user's scroll position. With Webflow and its variables, you have the tools to bring your ideas to life and focus on your users. A site that changes color with the visitor's mood or follows the beat of the music, it is up to you to imagine what comes next.
Used well, Webflow variables make your site more interactive and deliver a tailored user experience.
Webflow variables in brief
What to remember about variables:
- Well-designed variables. They are built for designers and developers alike, so everyone gets something out of them.
- Very simple. They are easy to create, edit and link to each other or to animations.
- Instant changes. The time you save can go back into improving your projects.
- Intuitive creation. You design dynamic, interactive sites that are more pleasant for your users.
Tips for using them effectively:
- Plan ahead. Before creating your variables, list the elements you will use most often.
- Name clearly. Give each variable a descriptive name to avoid confusion.
- Test regularly. After connecting a variable, preview your site to check that everything works as expected.
- Stay organized. If you have many variables, group them by category or tag them to make navigation easier.
Managing your variables well in Webflow lets you design consistent, high-quality sites. Once you master them, they speed up design and give your users a polished experience.
If you want to use Webflow for your site, come and talk to us. We will look together at how our expertise can help you.
Psst.
New types of variables should arrive on Webflow soon. Stay tuned, the Ouiflow team will tell you about them as soon as they are available.
If you prefer a more detailed video explanation of variables, watch the video below.