What are variables?
Keep colors, spacing, and other design choices consistent with shared values.
A variable is a named design value you can reuse across your project. For example, you can give your brand color a name and connect buttons, links, and other elements to it. When you change the variable, those connected styles update together.
Shared values and individual values
An element follows a variable only after you connect its style to that variable. Two buttons can look the same while using different settings: one might use your brand-color variable, while the other has its own color.
Changing the variable updates the connected button and leaves the independent color alone, even if both buttons were blue before the change. See Use variables in your design to connect a style or make it independent again.
Open Variables
In the editor, open Design → Variables.
- Groups organize related values, such as colors or spacing. A group's type determines the kind of values it contains.
- Rows show individual variables and their values.
- Mode columns show alternative values for the same variables, such as colors for light and dark themes.
Select a group to focus on its variables, or use All variables to browse the whole collection. Search by a variable's name or group name to find it.
What can you use variables for?
Colors and spacing are useful starting points. You can also share dimensions, font choices, animation durations, and other design values. Choose names that describe how you use the value, such as a brand color or a standard control height.
Create and manage variables explains the available types and how to add values. If you need different values for different themes, work with modes.
After changing a shared value, inspect a page that uses it and the relevant stories to check how your components look in different states.