Overview
The Swap feature allows you to replace variable bindings throughout your design. Common use cases include:
- Switching between Light and Dark modes
- Swapping between brand variants (e.g., Brand A → Brand B)
- Changing between desktop and mobile spacing systems
- Testing different design token sets
💡 Key Benefit
Instead of manually updating hundreds of layer bindings, Swap changes all of them at once with preview and undo support.
How to Swap
Swap Process
- 1
Select Source
Choose the source collection and mode that you want to swap FROM.
Example: Colors / Light Mode
- 2
Select Target
Choose the target collection and mode that you want to swap TO.
Example: Colors / Dark Mode
- 3
Choose Scope
Select where to apply the swap:
- Current Page
- Current Selection
- Entire File
- 4
Preview
Click "Preview Swap" to see which layers and variables will be affected. Review the list before executing.
- 5
Execute Swap
Click "Execute Swap" to apply the changes. Use Cmd/Ctrl + Z to undo if needed.
Swap Modes
Variables Studio supports swapping in different ways:
Same Collection, Different Mode
Most common use case: switching between Light and Dark mode.
Example:
Different Collection, Same Mode
Switching between brand variants or design system versions.
Example:
Different Collection, Different Mode
Advanced: switching to a completely different design system.
Example:
How Variables are Matched
Variables Studio matches variables between source and target based on their names:
✓ Exact Name Match
Variables with the same name will be swapped, even if they're in different collections.
Primary/500 (Source) → Primary/500 (Target) ✓
⊘ No Match Found
If a variable doesn't exist in the target, the binding won't be changed.
Primary/Accent (Source) → No match in target, binding unchanged
⚠ Type Mismatch
Variables must have compatible types. Color can't swap with number, etc.
Spacing (Number) → Spacing (String) ✗
Preview Before Swapping
The preview shows all affected layers and variables:
What You'll See
The preview lists every layer and variable binding that will be changed, grouped by variable.
- • Layer names that use each variable
- • Total count of affected layers
- • Which variables will be swapped
- • Any variables that couldn't be matched
💡 Pro Tip
Always preview before executing, especially when swapping across the entire file. This helps catch unexpected matches or mismatches.
Best Practices
✓ Use Consistent Naming
Keep variable names consistent across collections and modes for reliable swapping.
✓ Start with Small Scopes
Test swapping on current selection or page before applying to the entire file.
✓ Always Preview
Check the preview to ensure the swap will affect the correct layers and variables.
✓ Undo Support
Remember that Cmd/Ctrl + Z works! You can always undo a swap if it's not what you expected.
Common Use Cases
🌙 Theme Switching
Quickly switch all designs between light and dark themes
Colors/Light → Colors/Dark🎨 Brand Variants
Swap between different brand color palettes for multi-brand systems
BrandA/Colors → BrandB/Colors📱 Responsive Design
Change spacing and sizing tokens between desktop and mobile
Spacing/Desktop → Spacing/Mobile