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

I am continually running into this problem!! What you can easily do in code (CSS) is not able to be done in Figma, and it really is an oversight—a huge disconnect for what is needed in a design-to-code tool. Figma forces me to either detach the variable alias so that I can supply an opacity value to the variable color (which then makes a hard-coded hex color that no longer connected to the variable alias); or I have to create more tokens that are completely unnecessary in code. Please address this. :pleading_face::pray: I run up against this so many times that it really does feel like a bug in the Figma Variables feature.

2 Likes

This needs to happen ASAP! :pray:

Genuinely why is this not a thing. It would be so easy to do

Really need this as well! I’m new to building design systems so I thought I was making a mistake setting up the tokens. Glad to know I’m not the only one with this trouble.

Thanks for laying out the case so clearly. I totally need this too!

+1 to this feature, very much needed

+1 this is a really glaring limitation to variables. I don’t want to make new variables just for an alpha adjustment.

1 Like

At Microsoft, we REALLY need Figma to separate opacity and color so that we can use separate variables for each! In CSS we can do var(–color-200) / var(–opacity-20) but not in Figma. :frowning: