> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/designer/reference/variable-collections-overview/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()
```

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

## Docs

- [Create a variable collection](https://developers.webflow.com/designer/reference/create-variable-collection.md): Learn how to create a variable collection with the Designer API.
- [Get all variable collections](https://developers.webflow.com/designer/reference/get-all-variable-collections.md): Learn how to get all variable collections with the Designer API.
- [Get default variable collection](https://developers.webflow.com/designer/reference/get-default-variable-collection.md): Retrieves the default variable collection. The default collection is the first variable collection created with your site.
- [Get a variable collection by ID](https://developers.webflow.com/designer/reference/get-variable-collection-by-id.md): Learn how to get a variable collection by ID with the Designer API.
- [Remove a variable collection](https://developers.webflow.com/designer/reference/remove-variable-collection.md): Learn how to remove a variable collection with the Designer API.
- [Get collection name](https://developers.webflow.com/designer/reference/get-collection-name.md): Get the name of a variable collection using the Webflow Designer API.
- [Set a variable collection name](https://developers.webflow.com/designer/reference/set-variable-collection-name.md): Learn how to set a variable collection name with the Designer API.
- [Move collection after target (Beta)](https://developers.webflow.com/designer/reference/move-collection-after.md): Move a variable collection to appear after another collection in the Variables panel.
- [Move collection before target (Beta)](https://developers.webflow.com/designer/reference/move-collection-before.md): Move a variable collection to appear before another collection in the Variables panel.