Solved

Transparency in variables workaround? (Material 2 troubles)

Forum|Forum|3 years ago
June 26, 2023
8 replies
5988 views

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 ?

Ask the community

This topic has been closed for replies.

Best answer by Philip_Lundgren

Second this. Figma, PLEASE let us use variables but set a different opacity somehow. I don’t want 12 opacities of one color in my variable set…

Anthony_Swierkosz

This has been an issue even before variables, but now that variables are being added I really hope it will be solved. I think it’s because color and opacity seemed to be linked in most instances (like fill styles / color variable includes opacity).

Having the option to separate color and opacity into two separate variables would solve this. (Color variable with just hex/rgb/…, opacity/number variable able to be used as opacity )
Alternatively, similar to the current alias implementation, having the ability to use an existing color variable (just linking hex/rbg/etc. without opacity) in another color variable would solve this. Such as a BLACK variable (#000000 - 100%), being used in another color variable (BLACK - 40%), “BLACK” being an alias.