Variable collections

Variable collections provide an organizational structure for managing related variables. Collections allow you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables. Collections help maintain a clean and organized variable system, making it easier to manage design tokens at scale across your projects.

Creating a collection

Create a collection using the create variable collection endpoint.

1
// Create a collection
2
const collection = await webflow.createVariableCollection('Brand Styles')

Selecting a collection

Select a collection in multiple ways. Either, get all collections or get a specific collection by name or ID.

1
// Get all collections
2
const collections = await webflow.getAllVariableCollections()
3
4
// Get a collection by ID
5
const collection = await webflow.getVariableCollectionById('collection-4a393cee-14d6-d927-f2af-44169031a25')

Working with variables

Once a collection is selected, you can use the collection methods to create, retrieve, and manage variables.

1
// Get collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a variable
5
const variable = await collection?.createColorVariable('primary', 'red')
6
7
// Get all variables
8
const variables = await collection?.getAllVariables()