> 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.

# 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)