🎨 Expand functionality of color modifiers

A large portion of our pro licence holders use the color modifier feature of color tokens in a way that isn't possible in Figma otherwise.

The community would like to expand the existing functionality to include things like:

• Add properties of the color to be modified when color spaces that allow them to be defined

  • hue

  • saturation

  • For example:

    • when you lighten a colour, you might want to add or remove saturation

    • adjust the Hue for a color by a certain value, like when a warning colour needs to move the hue from yellow at the mid-tone to a more orange color at the darker shades.

• Color modifiers in boxShadow tokens

• Improved resolved colors in Figma (as Hex) due to a rounding error

  • Accept 5.45 and not round to 5

• Support of opacity tokens instead of other tokens

  • opacity tokens accept a percentage unit (%)

• Consider color modifer tokens as a "composite" so when they are being documented and annotated, all values are surfaced

• When viewing the value of token that was created with modifiers, I want to see the formula used to create it.

😬 The reality

Today it's difficult to get accurate colors that are created with modifiers and the way they resolve in Figma (especially variables) is problematic.

It's difficult to document these design decisions with the tools available in the plugin and even 3rd party documentation tools.

Figma and the Design Tokens Community Group W3C specifications prefer hex code color values.

💭 How might we...

Allow designers to combine tokens and functions to create flexible color systems using color modifiers (or other) in a way that has more precise output while still meeting the specifications.

Improve the way these design decisions are documented when they are captured with tokens.

💬 Feedback that is valuable

• How does this issue impact your day-to-day workflow?

• What workarounds do you have?

• How are you currently documenting your color modifier tokens?