Variables
Create dynamic design tokens for theming, prototyping, and responsive design with reusable values.
Design Systems
No shortcutAdvanced11 min readQuick Reference
Variables
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Advanced⏱ 1–2 hours to master
Key Settings
Create:Apply:Modes:Prototype:
Variables are reusable values that can be applied to design properties. Unlike styles which have fixed values, variables can change based on modes (light/dark theme) and can be used in prototyping conditions.
Where to Find It
Open the Assets panel and click the Local Variables tab, or open from the Design panel actions menu.
How to Use
- Create: Open Local Variables, click Create Variable, and choose a type (Color, Number, String, Boolean).
- Apply: Select a layer property and click the variable icon (diamond) to bind a variable.
- Modes: Add modes (Light/Dark) to variables for theme switching.
- Prototype: Use Boolean and string variables in prototype conditions for interactive logic.
Pro Tips
- Use variables for your design tokens — colors, spacing, and sizing — for consistent theming.
- Variables with modes are perfect for light/dark mode support without duplicating components.