Skip to main content
bart13
New Participant
Jun 22, 2023 11:55 AM UTC

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

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:
image

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

113 replies

Hampus_Svallfors
Jun 23, 2023 3:10 AM UTC

Yes, please 🥳

Jun 23, 2023 7:33 AM UTC

This is so much needed!

Ilona_Czerwinska
New Participant
Jun 23, 2023 8:36 AM UTC

I’m a little disappointed that there are no such options. The first thing I hoped for when I heard “variables” was just such parameterization. It would have made the management of variable styles much easier.

Fred_Tinsel
Active Member
Jun 23, 2023 2:32 PM UTC

Yeap… tokens is a part of variables that is not complete yet.
We are waiting a speed deployment of all call to variables because we need them for opacities, gradients, shadows… I can’t really start working for my clients
[BETA] are cool but [USERS] always want more

vsathishkumar
New Member
Jul 4, 2023 6:35 AM UTC

+1 ✋
This is what exactly I am trying to find in the variables. @bart13 Thanks for sharing your idea. This is really super important for the design systems.

There should be an additional option to set the opacity to that alias variables.

Andy_Rubaye
Jul 21, 2023 7:11 PM UTC

Dear Figma, I absolutely love what you’re doing with Dev Mode, Local Variables and I honestly cannot stop being amazed by the things coming out as of late. Please please please, if there’s one thing that would magically transform our dev workflow is to support either HEXA or RGBA or some way to incorporate the alpha channel as part of the the color definition when we define a color variable.

We do a lot of mobile development and it would make life so much easier if the transparency/alpha values came with the colors in the palette vs. having to define them and keep track of them elsewhere.

Purty please with sugar on top! Thanks heaps!

Julia_Mnizhek
Active Member
Aug 3, 2023 6:01 PM UTC

Want to support this request. We at Semrush need the support of alpha / opacity in the variables, too.

bart13
bart13Author
New Participant
Aug 3, 2023 8:37 PM UTC

I have kind of a workarround - its not the its not the best - but it works (with paid token studio version)

you manage your tokens via token studio

Then you export the tokens via token studio to variables (do not start to edit tokens in variables! - management is done in token studio)

Now everything which is linked - remains linked in variables but as soon as its a RGBA value - its not a linked value in variables anymore but its a hex with opacity. This is completly fine since you manage your tokens in token studio and the logic of assining tokens happens there. You only assign the variables on Figma layers to get the best designer experience when changing themes

It might help you moving forward for now - but this is still a desired feature.

Sourav_Mostafa
Oct 25, 2023 11:28 AM UTC

A much needed feature

Julia_Mnizhek
Active Member
Oct 25, 2023 1:31 PM UTC

Yeah, thanks for the detailed workaround. In Semrush we use exactly the same workaround 🤓 Hoping some time in the future Figma will upgrade its native tokens so we would not need such workarounds at all.