Variables & Collections

Variables are reusable design tokens that let you define and manage values across your Webflow projects. They enable you to create a single source of truth for common values like colors, spacing, and typography. When you update a variable’s value, that change automatically propagates everywhere the variable is used, making it easy to maintain consistency and make global design updates.

Variable collections

Variable collections provide an organizational structure for managing related variables. Collections enable you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables.

Variables

Webflow supports five different types of variables, each with their own syntax for creating and updating them. Once you’ve created a variable, you can use it in your project by assigning it to a style property.