New Participant

Variables: Color alias with alpha / opacity (rgba ideally)

Forum|Forum|3 years ago
June 22, 2023
113 replies
13889 views

hey there!

variables seems to be super nice but what i am missing is that if i make a colour alias to a specific collection - i can’t set the opacity separately (e.g. colour 50 with 20% opacity)

So basically i want the colouyr to be from another collection and i want to set the alpha seperatly (controlled as rgba - since i dont need it as opacity)

Example how we can fix this in token studio:

So what i want is that i can set blue/5 and then the opacity (which i dont want to capture in another colour variable)

Now its only possible if i break the link with gray/75 - and then i loose the reference to that colour

Share an idea

Show previous replies

N

Neto_Ana

Yes, please add this one!

Josh_Kriese

New Member

Please add this! Really critical to variable inheritance, and would provide much better parity with how variables work in a dev environment.

RickvandeSande

New Member

This would be a great idea! Just give the option to decouple opacity from a colour variable in the fill!

AntonioB

New Participant

I found myself with this problem specially when defining colored shadows based on existing color variables in my palette. It makes perfect sense that in case you change the primitive color variable, the shadow color get updated but keeping a separate value for the opacity. This…

We could even discuss about to also allow opacity variables, like this…

But for shadows I think it a must to, at least, separate the color from the opacity value, because we can consider that the opacity, in that case, is a property of the shadow itself and not of the color.

So, more thoughts, maybe, instead of complicate things in the color variables part, like proposed in this post, it would be enough to allow every where Figma allow to choose a color from a library just keep the opacity as a separate value, and then, even allow opacity variables.

For those colors defined with an opacity value in the “primitive palette” it could do the work to translate the value to the opacity to the opacity field, then, you can override the opacity value with an opacity variable if you want, or just over-apply the opacity.