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.

Variables

Webflow currently supports 5 types of variables:

• Size
• Color
• Font
• Percentage
• Number

Creating a variable

Create variables using the appropriate creation function for each variable type. Each variable requires a unique name within its collection. The creation functions follow this pattern:

General Syntax

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

Selecting a variable

Select variables 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
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})

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()