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

# Variables & Collections

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

Variables are reusable design tokens that let you [define and manage values across your Webflow projects](https://help.webflow.com/hc/en-us/articles/33961268146323). 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.

# Variable collections

Variable collections provide an organizational structure for managing related variables. Collections enable you to group variables logically - for example, you might create separate collections for brand colors, typography, or spacing variables.

[Learn more about variable collections](/designer/reference/variable-collections-overview)

# Variables

Webflow supports five different types of variables, each with their own syntax for creating and updating them. Once you've created a variable, you can use it in your project by assigning it to a style property.

#### [Color](/designer/reference/create-color-variable)

Define colors.

#### [Size](/designer/reference/create-size-variable)

Define sizes and spacing.

#### [Font](/designer/reference/create-font-family-variable)

Define fonts.

#### [Number](/designer/reference/create-number-variable)

Define number.

#### [Percentage](/designer/reference/create-percentage-variable)

Define percentages.

\


[Learn more about variables](/designer/reference/variables-detail-overview)

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

## Docs

- [Variable collections](https://developers.webflow.com/designer/reference/variable-collections-overview.md): Learn how to create and manage variable collections with the Designer API.
- [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.
- [Variables](https://developers.webflow.com/designer/reference/variables-detail-overview.md): Learn how to create and manage variables with the Designer API.
- [Create number variable](https://developers.webflow.com/designer/reference/create-number-variable.md): Create a number variable with a name and value for the variable.
- [Create color variable](https://developers.webflow.com/designer/reference/create-color-variable.md): Create a color variable with a name and value for the variable.
- [Create font family variable](https://developers.webflow.com/designer/reference/create-font-family-variable.md): Create a Font Family variable with a name for the variable, and name for the Font Family.
- [Create size variable](https://developers.webflow.com/designer/reference/create-size-variable.md): Create a Size variable with a name for the variable, and size value.
- [Create percentage variable](https://developers.webflow.com/designer/reference/create-percentage-variable.md): Create a percentage variable with a name and value for the variable.
- [Get all variables](https://developers.webflow.com/designer/reference/get-all-variables.md): Get all variables in a collection using the Webflow Designer API.
- [Get variable by name](https://developers.webflow.com/designer/reference/get-variable-by-name.md): Retrieve a variable by its name with the Webflow Designer API.
- [Get variable by ID](https://developers.webflow.com/designer/reference/get-variable.md): Retrieve a variable by its ID with the Webflow Designer API.
- [Set variable value](https://developers.webflow.com/designer/reference/set-variable-value.md): 
- [Get variable value](https://developers.webflow.com/designer/reference/get-variable-value.md): 
- [Get variable name](https://developers.webflow.com/designer/reference/get-variable-name.md): 
- [Set variable name](https://developers.webflow.com/designer/reference/set-variable-name.md): 
- [Get variable binding](https://developers.webflow.com/designer/reference/get-variable-binding.md): Get the binding of a variable
- [Get CSS name](https://developers.webflow.com/designer/reference/get-variable-css-name.md): Learn how to get the CSS name of a variable in the Designer.
- [Remove variable](https://developers.webflow.com/designer/reference/remove-variable.md): 
- [Variable Modes](https://developers.webflow.com/designer/reference/variable-modes.md): Learn how to create and manage variable modes with the Designer API.
- [Get all variable modes](https://developers.webflow.com/designer/reference/get-all-variable-modes.md): Learn how to get all variable modes.
- [Get variable mode by name](https://developers.webflow.com/designer/reference/get-variable-mode-by-name.md): Learn how to get a variable mode by its name.
- [Get variable mode by ID](https://developers.webflow.com/designer/reference/get-variable-mode-by-id.md): Learn how to get a variable mode by its ID.
- [Create variable mode](https://developers.webflow.com/designer/reference/create-variable-mode.md): Learn how to create a variable mode.
- [Remove variable mode](https://developers.webflow.com/designer/reference/remove-variable-mode.md): Learn how to remove a variable mode.
- [Get variable mode name](https://developers.webflow.com/designer/reference/get-variable-mode-name.md): Learn how to get the name of a variable mode.
- [Set variable mode name](https://developers.webflow.com/designer/reference/set-variable-mode-name.md): Learn how to set the name of a variable mode.
- [Get variable mode breakpoint](https://developers.webflow.com/designer/reference/get-variable-mode-breakpoint.md): Learn how to get the breakpoint that drives a variable mode.
- [Set variable mode breakpoint](https://developers.webflow.com/designer/reference/set-variable-mode-breakpoint.md): Learn how to set the breakpoint that drives a variable mode.