How to Use Variables in Figma
Learn Figma variables for design tokens. Define colors, spacing, and typography values once and apply them consistently across your entire design system.
Step-by-step
How to Use Variables in Figma
Open the Variables panel
Click the Variables icon in the toolbar (or go to Local variables in the right panel). Create a new collection — for example, 'Primitives' for raw values (blue-500: #3B82F6) and 'Semantic' for meaning-based tokens (color-primary: blue-500).
Create color variables
Click '+' to create a new variable. Choose the 'Color' type. Name it with a clear convention (e.g., 'blue/500' or 'primary/default'). Set the value to a hex, RGB, or reference another variable. Create semantic aliases: 'button/primary/bg' references 'blue/500'.
Create number variables for spacing and sizing
Create 'Number' type variables for your spacing scale (space-1: 4, space-2: 8, space-3: 12, space-4: 16, etc.) and sizing tokens (border-radius-sm: 4, border-radius-md: 8). Apply these to padding, gap, corner radius, and sizing properties.
Set up modes for theming
Add modes to your variable collection (e.g., 'Light' and 'Dark'). Each semantic variable gets a different value per mode: 'surface/default' is #FFFFFF in light mode and #1A1A1A in dark mode. Apply a mode to any frame to switch its entire theme instantly.
Tips
Pro tips
- *
Separate primitive variables (raw values like blue-500) from semantic variables (contextual aliases like color-primary) in different collections
- *
Use scoping to limit where variables appear — a spacing variable should only show up in padding and gap inputs, not color pickers
- *
Variables can reference other variables — build a chain from primitives to semantic to component-specific tokens
- *
Export variables to JSON using plugins like 'Figma Tokens' to sync your design tokens directly to your codebase
Related guides