Variables

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.

Assign variables to any compatible style property. For example, you can use color variables for background colors, size variables for padding and margins, or font variables for typography. When the variable’s value changes, all style properties using that variable will automatically update, providing a powerful way to maintain design consistency and make global updates efficiently.

Variable types

Webflow currently supports five types of variables:

Color

Define colors.

Size

Define sizes and spacing.

Font

Define fonts.

Number

Define number.

Percentage

Define percentages.

Creating a variable

Variables belong to a collection. To create a variable, you need to get the collection first.

1
const collection = await webflow.getVariableCollectionById("Your Collection ID")

Each variable type has its own creation function. Below are the available variable types and how to create them:

1
collection.createColorVariable(name: string, value: string | ColorVariable | CustomValue): Promise<ColorVariable>

Variable aliases

Variable aliases allow you to create references between variables, making it easier to maintain consistent design systems and create dynamic relationships between your variables. When you update the original variable, all aliases automatically reflect the change.

1
// Get the default variable collection
2
const collection = await webflow.getDefaultVariableCollection();
3
4
// Create primary brand color variable
5
const primaryColor = await collection.createColorVariable("primary-brand", "#0066FF");
6
7
// Create aliases that reference the primary color
8
const buttonColor = await collection.createColorVariable("button-primary", primaryColor);
9
const linkColor = await collection.createColorVariable("link-color", primaryColor);
10
11
// When primaryColor changes, buttonColor and linkColor will automatically update
12
await primaryColor.set("#FF0066");

Custom values

Webflow supports using functions in variables to create dynamic, responsive design systems. Custom values work with any variable type. See more on using functions with custom values.

Selecting variables

Select variables from their Collection by their name or ID.

1
// Get Default Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Get variable by ID
5
const variableById = await collection?.getVariable('id-123')
6
7
// Get Variable by Name
8
const variableByName = await collection?.getVariableByName('Space Cadet')

Updating variables

Renaming and setting new values on a variable.

Renaming variables

Variables in Webflow can be renamed for better clarity or organization. After you’ve successfully renamed a variable, all instances where this variable is used will automatically reference the new name.

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
if (collection) {
5
6
  // Get variable and reset name
7
  const variable = await collection.getVariableByName("Space Cadet")
8
  await variable?.setName('Our awesome bg color')
9
}

Setting variable values

A variable type (size, percentage, number, color, font family) in Webflow cannot be changed. However, its value can be updated. The format for updating the value is consistent with its initial declaration.

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Get Variable
5
const variable = await collection?.getVariable('id-123')
6
7
// Check Variable type and set color
8
if (variable?.type === "Color") await variable.set("#fffcc11");

Applying variables to styles

After defining your variables, you can incorporate them into your styles. To do this, simply use the variable as the property value in the style you’re customizing.

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Get Style and desired variable
5
const style = await webflow.getStyleByName(styleName)
6
const variable = await collection?.getVariablebyName(variableName)
7
8
// Check variable type and set property
9
if (variable?.type === 'Size') await style?.setProperties({ "font-size": variable})

Using functions in variables

Webflow’s variable system supports a limited set of CSS functions, enabling you to create dynamic, responsive, and mathematically-derived values.

Available functions

Webflow supports these CSS functions in variables:

Using functions with custom values

To use functions in variables, you need to create or set them as custom values. Custom values work with any variable type.

1
variable.set({
2
  type: "custom",
3
  value: "calc(var(--spacing-base) * 2)"
4
});

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a Color Variable
5
const colorVariable = await collection.createColorVariable("blue-500", "#146EF5")
6
7
// Get the binding for the variable
8
const binding = await colorVariable.getBinding()
9
10
// Create a Color Variable with a custom value
11
await colorVariable.set({
12
    type: "custom",
13
    value: `color-mix(in srgb, ${binding}, white 75%)`
14
});