Variables Overview
Variables let you reuse design values across your site. Change a variable to update the controls using it; collections keep your variables organized.
Creating & Managing Variables
- Click the three-dot menu in the editor's top bar, then click Variables.
- Choose a collection or click Add Collection to create one.
- Click Add Variable, choose its type, and enter its name and value.
- Click Save in the panel.
Variables can hold a Color, unitless Number, Unit, Font Family, or Image URL. Edit a variable to change its name, value, or collection. Compatible variables can reference other variables, but cannot form circular references.
Edit collection titles, collapse collections, or drag them to reorder. A collection's Download action exports that collection; Delete removes it and its variables after confirmation.
Importing & Exporting Variables
Use the Variables panel menu to export or import variables as JSON. When importing:
- Merge with the existing Variables — Keep unrelated variables; matching CSS names replace definitions while preserving existing IDs.
- Replace — Replace the current set; removing variables that controls use can break their assignments.
Save when prompted. Closing a panel with unsaved changes offers Save or Discard.
Restoring Revisions
Open History in the Variables panel, select a revision, and restore it. Save when prompted.
Setting a Control to a Variable
Element properties, selector properties, and global settings properties can use compatible variables.
- Mouse over a control to reveal its variable icon .
- Click the icon, then search for and choose a variable.
- Save your changes.
You can also create a variable from the chooser by entering its name, value, and collection. Creating the global variable may save it immediately; save the element's document to keep its assignment.
Tips
Use Variables in Custom CSS
Use var(--brand-accent) to reference a variable named “Brand Accent.” Type -- in the CSS editor to choose a variable from autocomplete. If you rename the variable, update its name in your custom CSS.