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
2const 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
2const collections = await webflow.getAllVariableCollections()
3
4// Get a collection by name
5const collection = await webflow.getVariableCollectionByName('Brand Styles')
6
7// Get a collection by ID
8const 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
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create a variable
5const variable = await collection?.createColorVariable('primary', 'red')
6
7// Get all variables
8const variables = await collection?.getAllVariables()
Built with