Skip to main content
Question

Support gradient values in Variables

  • July 27, 2026
  • 1 reply
  • 14 views

Compass Design

Description:

Currently, Figma Variables only support solid colors. However, many design systems use gradients as core brand tokens (e.g., multicolor accent fills, branded gradient backgrounds).

Today, the only way to store a gradient as a reusable token is through Paint Styles, but they don't integrate with the Variables infrastructure — they can't participate in modes (light/dark themes), collections, or scoping.

Request: Allow Variables of type Color to hold gradient values (linear, radial, angular, diamond), not just solid colors. This would enable:

  • Gradient tokens that switch between themes/modes (e.g., a vibrant gradient in light mode vs. a muted one in dark mode)
  • Full design-token parity with tools like Style Dictionary and Tokens Studio, which already support gradient tokens
  • A single source of truth for all color tokens — solid and gradient — in one place

Thank you for considering this!

1 reply

James Vince
  • New Member
  • July 27, 2026

I'd love to see this too. It feels like a missing piece of the Variables system.

Right now I end up mixing Variables for solid colors and Paint Styles for gradients, which makes things harder to manage. Having gradients work as variables with modes and collections would make design systems much more consistent and easier to maintain.