Transparency in variables workaround? (Material 2 troubles)

Ask the community
1

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 ?

19 Likes
2

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.
3 Likes
3

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…

16 Likes
4

Any word on when this is going to be available?

5

Hey all,

Thanks for the feedback. Just to confirm, is your request same as this: (Variables: Color alias with alpha / opacity (rgba ideally)?

If that’s the case, you can upvote! Our product team will take it into consideration for future enhancements!

If I’m misunderstanding, please let me know.

Thanks,
Toku

3 Likes
6

If that’s the case, you can upvote! And our product team will ignore the needs of actual users as always!

2 Likes
7

What’s the current state? I am exactly facing this issue too.

8

Thanks for sharing. It help me a lot.