> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Variable collections

> Learn how to create and manage variable collections with the Designer API.

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](/designer/reference/create-variable-collection) endpoint.

```typescript
// Create a collection
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.

```typescript
// Get all collections
const collections = await webflow.getAllVariableCollections()

// Get a collection by ID
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](/designer/reference/variables-overview).

```typescript
// Get collection
const collection = await webflow.getDefaultVariableCollection()

// Create a variable
const variable = await collection?.createColorVariable('primary', 'red')

// Get all variables
const variables = await collection?.getAllVariables()
```