In Material Design 2 (M2), there are a lot of elements made out of a color from the palette (hex code, no opacity) and an transparency depending of the expected result.
For example, a primary text can be a solid #000000 and a secondary text the same #000000 with a transparency set to 64%, resulting in a grey text blended with the background color.
My design system uses the same approach today.
Therefore design tokens works like this:
- Color Palette tokens are based on a hex code
- Color Usage tokens are based on Color Palette tokens + opacity %
While playing with the new Variables feature in Figma, I noticed that it seems not possible to set an opacity to an existing variable. We can set an RGBA value, but no Variable + Opacity as far as I know.
Plus, looking at Unlock design system scalability with variables presentation during Config 2023, it seems that variables for Opacity will come in V2, but looks like there’s no plan to apply opacity on a color variable in a “parent” variable…
M3 is using plain tones now, but since lots of Designers & Developers are still using M2 guidelines I wonder if you guys have already found a way to deal with it without creating hundreds of variants for each colors with different opacities — which is completely opposed from variables logic in my opinion ?