When aliasing a color variable to another (img 1), or using it directly on an element (img 2), we should be able to override the opacity without the need to create a variable for each transparency variation:
Does anyone have any sort of workaround? Most of my components use a background color on the base frame. I would have to rebuild my entire design system, or 10x the number of variables I have while losing the ability to reference the root color. How is this not addressed or supported?
+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. :)
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
Gradient fill allows you to add opacity
Screenshot 2: Gradient setup using the same variable added twice
