Turn Figma Variables into a self-updating system.
Define relationships with formulas - math, colors, logic, and text. Your design system recalculates automatically across modes.
Manual token maintenance
Recalculating dozens of derived values
Static variables don't scale.
Teams duplicate tokens across modes, recalculate dozens of values by hand, and keep spreadsheets or external tools next to Figma. Static variables don't scale for real design systems.
Systems that update themselves.
Move from static values to relationships that keep your system aligned as it scales.
Relationships, not one-off values.
Define derived tokens with formulas that reference other variables so updates cascade automatically.
- Replace manual recalculation of spacing and sizing tokens
- Keep scale logic inside variables instead of spreadsheets
- Change a base token and every dependent value updates
Variables
Palettes from a single source.
Build derived palettes from a base color so ramps stay consistent across modes.
- Eliminate per-swatch edits across modes
- Update a base hue and all shades follow
- Keep color intent as relationships, not overrides
Variables
Consistent logic for real UI states.
Use conditions and string formulas to keep values aligned without duplicating variables.
- Avoid manual text swaps between variants
- Centralize rules for labels, status, and flags
- Keep calculated strings synced to source tokens
Variables
Type scales that stay aligned.
Scale typography from a base size so headings and body tokens move together.
- Change the base size and every type token updates
- Keep spacing and type ratios consistent
- Reduce manual resizing as the system evolves
Heading XL
Heading L
Heading M
Variables
Calculated content that stays current.
Generate text, dates, and counts from variables so content updates with the system.
- Remove manual edits for labels and dates
- Keep variable-driven copy consistent across components
- Preserve intent without duplicate text tokens
Variables
Common system use cases
Where variable logic saves the most time
Token scaling
Scale spacing, typography, and radius from one base value.
Themes & modes
Switch modes without duplicating values across the system.
Color ramps
Derive full ramps and tints from a single base color.
Responsive grids
Calculate columns and gutters from a layout base.
Pricing & calculations
Keep ratios and totals consistent across comps.
Dynamic text & dates
Generate labels and dates that stay current.
Built to fit into real-world design systems
Works with native Figma variables
Uses existing collections and modes
Local variables only (libraries untouched)
Calculated values remain in Figma
Portable with JSON import/export
Design systems that don't fight back.
Stop maintaining values. Start defining relationships.