Use variables in your design

Connect a style to a variable to make it follow that shared value. For example, connect two buttons' backgrounds to the same brand-color variable so both update when you change the color.

Before you start, create a variable or choose one already in your project.

Connect a style to a variableCopy Anchor Link

1. Open a page or story in Design mode and select the element you want to change.
2. Find the style you want to connect, such as its background color.
3. Select Bind to variable for that style.
4. In the Variables picker, search for and select the variable.

The style now uses the variable. The picker offers compatible values: a color setting offers color variables, for example. If the variable you expect is missing, check its type and the style you are editing.

To check the connection, open Design → Variables and change the shared value. Return to the element and check the result. Other styles connected to the same variable update too.

You can ask the agent to connect several uses at once:

Use our brand-color variable for the primary buttons on the shop and checkout pages.

Make one style independentCopy Anchor Link

If one element needs its own value, open the variable picker for its connected style and select Detach variable. You can then edit that style independently of the shared variable.

Detaching one style leaves the variable and its other connections in place.

Link one variable to anotherCopy Anchor Link

A variable can take its value from another compatible variable. This link is called an alias.

For example, you can have a brand-color variable and a button-background variable that refers to it. If you change the brand color, the button-background variable follows it. This lets you give values names that describe their role while keeping a shared color choice.

1. In Design → Variables, find the variable whose value you want to link.
2. Open Bind to variable for its value.
3. Choose a compatible variable to use as the value.

The value shows the referenced variable's name. If you detach an existing alias, it keeps its current value and stops following the other variable.

You can also describe the relationship to the agent:

Make the button-background variable follow our brand-color variable.

Share a variable with the agentCopy Anchor Link

Select Add to chat in a variable's actions menu, then ask the agent to apply it to a component or check where it is used. You can also select Copy reference and paste the reference into a request to identify the variable you mean.