Introducing Variables in the Webflow Designer

Variables allow you to create a consistent design system for your site. You can create variables for size, color, and font styles and reuse them for a consistent and faster design experience. When you update a variable value, that change will update everywhere it’s used on the site, even on elements in different classes.
00:00 - Introduction
01:25 - Create
02:09 - Apply
03:02 - Edit
03:27 - Manage
04:03 - Unlink
04:29 - Delete
05:12 - Recap
Read all about it → university.webflow.com/lesson...
----------
Get started with Webflow: wfl.io/2r7cVUW
Join the Webflow Community: webflow.com/community
webflow.com
/ webflow
/ webflow

[@ruandemeyer2497]

As a visual communicator the removing of icon's on the new layout is something to get use to. Overall much better on the eye.

[@rohandash9838]

The webflow university courses are still talking about swatches. Took me a while to figure this out. About time you update this in your courses as well. Great stuff tho!

[@pilot341]

Hi Webflow. I understanding variable in the webflow designer is very well. Here in British English word "Colour"!

[@design2code]

Great feature! 🙏

[@sachinRao15]

Can't use them in the interaction panel when we want to animate color properties 😔

[@Webflow]

Thank you for your feedback! The team is actively working on the product gaps for variables including interactions. So for now the best option is to just copy/paste the color values as static values and link them to variables when that functionality ships.

[@GiampaoloTenti-vv3hu]

Great! Is there a way to export or share them through projects?

[@MSTSHAKILABEGUM]

Nice

[@jdanielortega]

Can the Variables tab almost fully replace the classic Style Page we create to keep things organized or am I missing something?

[@celinereynaud5183]

Hey, is it possible to copy/paste or duplicate variables for one site to another ? That would be a great thing to do cause, size variables are regularly the same ... and creating every time these variables takes quite a lot of time ^^

[@1Waym]

Please let us change value of a variable depending on the breakpoint size

[@andreasgaida7892]

What's the difference to a "master" color that's used?

[@hulmie]

So is this Webflow's version of design tokens?

[@Webflow]

Variables and tokens are related. Here's a presentation by Timothy Ricks which goes into more detail: czcams.com/video/z-x87oAyXOY/video.html

[@erc8311]

Is this different from color swatches at all, other than being easier to manage?

[@Webflow]

This expands the idea of swatches into reusable values for things like typography and size (em, rem, px, %...)! Learn more about how you can use variables → university.webflow.com/lesson/variables

[@wajidappleeos]

now is coming new features ? when Web flow had updated?

[@Webflow]

Lots of features were announced at Webflow Conf in October and lots more to come. You can view the Webflow Conf 2023 Keynote over at czcams.com/video/Dfplt-jbp9o/video.htmlfeature=shared&t=1277

[@adipa0101]

Please please please.. Let us change the order of variable or color pallete or anything, its frustrating that we cant change the order of them. Thanks Webflow..

[@Webflow]

Will share this to the team! We're definitely looking into and wanting to implement updates to make using variables in Webflow more smooth. Thank you! ☺️

[@LutherDePapier]

Awesome. But I'll miss the comedy.