Designer Tools

Variables

Variables enable you to create a cohesive design system by defining reusable values for colors, sizes, and other properties that can be referenced throughout your styles.

Designer tools require the MCP Bridge App to be open in the Webflow Designer. Ensure it’s connected before using these tools.

When to use

Use Variables tools to:

  • Build design systems: Define brand colors, spacing scales, and typography
  • Maintain consistency: Use variables instead of hard-coded values
  • Theme support: Create modes for light/dark themes or brand variations
  • Update site-wide: Change one variable to update all references

Tool details

Tool name: variable_tool

Available actions

Create variable collection

Establish a new collection to group related variables.

Action: create_variable_collection

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
namestringYesCollection name

Example usage:

Create a variable collection called "Brand Colors"

Get variable collections

Retrieve all collections or filter by specific IDs.

Action: get_variable_collections

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
filter_idsarrayNoSpecific collection IDs

Example usage:

List all variable collections

Create variable mode

Add a mode to a collection for variations (light/dark theme, brand variations).

Action: create_variable_mode

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
collectionIdstringYesCollection to add mode to
namestringYesMode name

Example usage:

Create a "Dark Mode" for the Brand Colors collection

Get variables

Fetch variables from a collection.

Action: get_variables

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
collectionIdstringYesCollection to query
include_modesbooleanNoInclude mode-specific values

Example usage:

Get all variables in the Brand Colors collection

Create color variable

Define a color variable.

Action: create_color_variable

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
collectionIdstringYesCollection to add to
namestringYesVariable name
valueobjectYesColor value (static or reference)

Example usage:

Create a "Primary Blue" color variable with value #0066FF

Create size variable

Define a size variable with units.

Action: create_size_variable

Parameters:

ParameterTypeRequiredDescription
siteIdstringYesSite identifier
collectionIdstringYesCollection to add to
namestringYesVariable name
valuenumberYesNumeric value
unitstringYesUnit (px, rem, em, %, vw, vh)

Example usage:

Create a "Spacing Base" size variable with value 16px

Create number variable

Define a pure numeric variable (no units).

Action: create_number_variable

Example usage:

Create an "Animation Duration" number variable with value 300

Create percentage variable

Define a percentage variable (0-100).

Action: create_percentage_variable

Example usage:

Create an "Opacity Subtle" percentage variable with value 80

Create font family variable

Define a font family variable.

Action: create_font_family_variable

Example usage:

Create a "Heading Font" variable with value "Inter, sans-serif"

Update variables

All variable types support update actions with the same parameters as creation, plus optional mode_id for mode-specific values.

Variable modes

Modes enable variations within a collection:

Common use cases:

  • Light/Dark themes
  • Brand variations (primary/secondary brand)
  • Seasonal themes
  • Localized designs

Example:

Brand Colors collection:
  Default Mode:
    - Primary: #0066FF
  Dark Mode:
    - Primary: #3388FF

Best practices

Create collections by purpose:

  • Colors
  • Spacing/Sizing
  • Typography
  • Animation

Clear organization makes variables easy to find.

Name variables by purpose, not appearance:

  • ✅ color-primary, color-text, color-background
  • ❌ color-blue, color-dark-gray, color-light

Purpose-based names survive design changes.

Link variables to style properties instead of hard-coding values. This creates a true design system.

Keep a reference of your variables:

  • What each variable is for
  • When to use each one
  • Relationships between variables

This helps maintain consistency.

Limitations

  • Type matching: Can only link compatible variable types to properties
  • Designer required: Must have Bridge App connection
Styles

Link variables to style properties

Elements

Apply variable-linked styles