Skip to main content
Question

Allow color variants to include adjustments like transparency and saturation, and support math-based variable values

  • July 1, 2026
  • 0 replies
  • 8 views

Richie Moon

Figma's color variable system supports solid color values, but there's no native way to define a variant of a color that applies a transparency, saturation shift, or other HSL-based modification. Designers currently work around this by manually creating separate variables for every tint/shade/opacity level, which leads to bloated variable sets.

It would be very powerful to allow color variables to reference a base color and apply modifiers (e.g., opacity: 50%, saturation: -20%) so that variant palettes can be derived programmatically from a single source.

Beyond colors, this concept should extend to numeric variables as well. Designers should be able to define a variable whose value is a mathematical expression referencing another variable — for example: spacing-xl = [spacing-base] * 3. This would allow design tokens to maintain proportional relationships automatically, making spacing scales, type scales, and sizing systems much easier to manage and update from a single source of truth.