Variables allow you to name, organize and reference size, color and font values across your Webflow projects. When someone updates a variable value, that change will update everywhere it’s used on the site.

Once you’ve created a variable, you can set it as the value of a style property to easily dictate design elements like colors, size and typography, and ensure that designs are adaptable, consistent, and easily modifiable.

Collections

Collections serve as an organizational layer for Variables. Currently, Webflow offers a single, default collection. You can access your variables after retrieving your collection using webflow.getDefaultVariableCollection().

Variables

Webflow currently supports 3 types of variables:

• Size
• Color
• Font

Creating a Variable

Each variable type can be created using a specific function. The variable names must be unique across the collection.

General Syntax

collection.createXXXVariable(variable-name, variable-value);

Selecting a Variable

Variables can be selected from their Collection by their name or ID.

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

Editing a Variable

Renaming and setting new values on a Variable.

Renaming a Variable
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 a Variable value
While the type of a variable in Webflow remains fixed and cannot be changed, 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?.getVariable(variableName)
7
8
// Check variable type and set property
9
if (variable?.type === 'Size') await style?.setProperties({ "font-size": variable})

Applying a Variable as an Alias
When you assign a variable to reference another, the second variable effectively becomes an alias of the first. This results in the second variable mirroring the value of the first one they are both linked to. Any changes made to the value of the first variable will be automatically reflected in the second, maintaining their synchronization. It’s essential that both variables are of the same type for alias references to function correctly.

In the below example, both the variables are of type ColorVariable.

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create first variable
5
const firstVariable = await collection?.createColorVariable('Default Color', 'red')
6
7
if (firstVariable) {
8
9
  // Create second variable as an alias of the first
10
  const secondVariable = await collection?.createColorVariable('Space Cadet', firstVariable)
11
  }

Removing a variable

Deleting a Variable
Variables in Webflow can also be deleted. When a variable is removed, it undergoes a “soft delete” process, similar to the approach taken in the Webflow user interface.

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Get variable by name
5
const variable = await collection?.getVariable('id-123')
6
7
// Delete variable
8
await variable?.remove()