Change opacity on a referenced color variable

I get why that would be frustrating. Changing the opacity of a color variable directly without detaching it would be a useful feature. Currently, Figma doesn’t allow for overriding opacity directly on referenced color variables, which indeed forces you to either detach or create new variables for each opacity level.

Hey @Henrik_Andersen, thanks for the feedback!

@Alok is correct that this is currently expected behavior. I updated your topic for clarity, and we’ll pass this onto our team for future improvement.

Be sure to also vote up top! ☝️ Our teams use votes to gauge overall interest and prioritize.

Exactly, Needed this.
Thanks for raising it @Henrik_Andersen 🙌

Earlier opacity wasn’t handled very well over web. Now we can manage it in strokes and fill easily, without worrying about interactions/animations.
So I believe this can help in managing design systems by allowing opacity overriding for color tokens.

+1 on this topic. It’s hard for me to understand why this hasn’t been implemented yet. Makes theming so much harder.

Thanks for considering this, Figma developer team… 8-)

+1 Design System Management is still painful without a feature like this

+1 This would be a very valuable feature for design system  management!

This is needed for Angular 19 Material components.

Any news about this? Still desperately need this!

​@djv Hey, any chance this will be added? CSS allows it, but Figma doesn't. 😭

+1 here. We just started using variables for color while merging/simplifying color themes. Looking and not finding that feature was kind of a let down. :)

​@djv 
Same issue.

The only workaround I could find was to create a gradient of the same variable and then it lets you add opacity to it.  But that’s still not a viable solution.  It’s been over a year since the first request was posted.  Please can we add opacity to a variable!

Screenshot 1: Gradient fill with opacity applied

Screenshot 2: Gradient setup using the same variable added twice