Add transparency to existing color variables without changing the variable or unlinking

Currently, when I have a color library and I need the exact color from it with X% transparency I have these choices:

  • Unlinking the color and adding the transparency → however, if the underlying color is updated, the color with transparency isn’t updated since it isn’t linked to the source color anymore
  • Changing the underlying color variable and adding transparency to it → I might use the color at different places and don’t want to add transparency everywhere
  • Creating a source color with transparency and some without → is possible, but adds additonal complexity, especially when you have many colors and might be hard to maintain

Bildschirmfoto 2021-05-10 um 11.26.19
Currently it looks like this (as seen in the screenshot). I would wish to have a transparency option next to the “-” icon.

The main issue is, that also developers use the Figma files as source of truth and they expect all colors be named. On the other hand, it isn’t practicable to have all transparency possibilities in the color library as it would get very complex very quickly.

A post was merged into an existing topic: Color Styles – Opacity & Multiple Fills