Variables Panel

The Variables panel lets you create and manage design variables (tokens) that can be reused across your designs. Variables support multiple modes for theming and responsive design.

Opening the Panel

• Click Variables in the left sidebar
• Or access from sidebar panels menu

Variable Types

• Color - Hex, RGB, or HSL color values
• Number - Spacing, sizing, radius values
• String - Text content, labels
• Boolean - True/false for visibility states

Collections

Variables are organized into collections:

Creating a Collection

1. Click the + button in the panel header
2. Enter a name (e.g., "Colors", "Spacing")
3. Collection appears in the list

Collection Features

• Collapsible sections for organization
• Drag to reorder collections
• Right-click for rename/delete options

Creating Variables

1. Select a collection
2. Click "Add Variable" or right-click
3. Choose variable type
4. Name the variable (e.g., "primary-color")
5. Set the value

Variable Modes

Each collection can have multiple modes with different values:

Common Mode Patterns

• Light/Dark - Theme switching
• Desktop/Tablet/Mobile - Responsive values
• Brand A/Brand B - White-labeling
• Default/Hover/Active - State variations

Adding Modes

1. Select a collection
2. Click the mode dropdown
3. Choose "Add Mode"
4. Name the mode
5. Set values for each variable in that mode

Switching Modes

• Use the mode dropdown per collection
• Bound elements update automatically
• Preview different modes in real-time

Variable Groups

Organize variables within collections using groups:

• Use "/" in names to create hierarchy (e.g., "button/primary", "button/secondary")
• Groups collapse/expand for organization
• Drag variables between groups

Binding Variables

Connect element properties to variables:

1. Select an element
2. In Properties panel, click the property value
3. Click the variable icon (hexagon)
4. Choose a variable
5. Property now tracks the variable

Searching Variables

• Use the search bar at the top
• Filters across all collections
• Matches variable names and values

Exporting Variables

Click the export button to export as:

• CSS Custom Properties - --primary-color
• Sass/SCSS - $primary-color
• JSON - Design token format
• JavaScript/TypeScript - Object exports

Best Practices

• Use semantic names (button-bg, not blue-500)
• Create collections by purpose (Colors, Spacing, Typography)
• Set up modes early in the project
• Use aliases for semantic layers
• Document variable purposes in descriptions