Variable Bindings

Variable bindings connect element properties directly to design variables. When a variable changes, all bound properties update automatically. This creates a single source of truth for your design system.

What Are Variables?

Variables are named values that can be reused:

• Colors - Primary, secondary, background, etc.
• Numbers - Spacing, sizing, radius values
• Strings - Text content, labels
• Booleans - Show/hide states

Creating Variables

1. Open the Variables panel (View > Variables)
2. Click "Create Variable"
3. Choose type (Color, Number, String, Boolean)
4. Name the variable
5. Set the value

Binding to Properties

Quick Bind

1. Select an element
2. In Properties, click the property value
3. Click the variable icon
4. Choose a variable
5. Property now bound to variable

Properties That Can Be Bound

• Fill - Bind to color variables
• Stroke - Bind to color variables
• Corner Radius - Bind to number variables
• Padding - Bind to spacing variables
• Gap - Bind to spacing variables
• Width/Height - Bind to sizing variables
• Text Content - Bind to string variables
• Visibility - Bind to boolean variables

Variable Modes

Variables can have different values per mode:

• Light/Dark - Theme switching
• Desktop/Mobile - Responsive values
• Brand A/B - White-labeling

Setting Up Modes

1. In Variables panel, create a collection
2. Add modes to the collection
3. Set different values per mode

Switching Modes

• Select a frame
• In Properties, find Variable Mode
• Choose the mode
• All bound elements update

Variable Collections

Organize variables into collections:

• Colors - Brand colors, semantic colors
• Spacing - Margin, padding values
• Typography - Font sizes, line heights
• Effects - Shadow values, blur amounts

Aliasing Variables

Variables can reference other variables:

• primary → #007AFF
• button-background → primary
• Change primary, both update

Creates semantic token layers.

Scoping

Control where variables can be applied:

• All Properties - No restrictions
• Fill Only - Only as fill color
• Stroke Only - Only as stroke color
• Spacing - Padding, gap, margin

Prevents misuse of design tokens.

Export Options

Variables export to code as:

• CSS Custom Properties - --primary-color
• Sass Variables - $primary-color
• JSON Tokens - Design token format
• Swift/Kotlin - Native platform constants

Tips

• Name variables semantically (button-bg, not blue-500)
• Use aliases for semantic mapping
• Set up modes early in the project
• Bind components to variables for consistent theming
• Review bindings before handoff