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

+1 Yes, please!

+1 to this, would use it every day

+1, would be so helpful!

+1, please !

+1 Not sure why this wouldn’t be similar to how number variables are applied to font size/line height/corner radius/etc.

This is an issue I keep running into, especially for components I create that use auto-layout, which assimilates the container & border into the frame, thus removing the ability to apply specific opacity values to each of them individually.

4 Likes

bumping this

Just ran into this issue as well :worried:
What a terrible way to add color variables in shadows.

Hey All, thanks for the feedback!

We’ll pass this onto the team for future consideration.

2 Likes

+1 on that. We got an AI but separate alpha variables are still not in Figma for some reason.

2 Likes

yes please. much needed.

Badly needed. thanks

It’s fucking necessary!

Sooo needed. We’re now adding color themes to our library, and there’s no way to apply semi-transparent shades of the theme colors in our UI.

This has been a feature request for years now. I have spoken to people at Figma about it, they are well aware it is a highly desired feature. I think they don’t want to do it because they think it will confuse users.

Probably not gonna happen until a design tool comes along that doesn’t actively hold back its users.

1 Like

Can we get some confirmation whether this is actually happening? its been highly requested for so long, Figma are definitely aware of it yet releases seem to tackle everything BUT this.

Just tell me whether its going to be done or not so I can modify my whole design system or pay for a external license for something like Tokens Studio.

Stumbling again upon this … so frustrating.

image

Hey Figma,

I wanted to share an idea that could make managing colors in Figma a bit easier. Right now, each color variable handles both the hex value and opacity together. What if we could separate them into two variables—one for color and one for opacity?

Why?

  • Cleaner Palettes: You’d have a pure color palette without the opacity mixed in, and a separate set of opacity variables. This keeps your color palette simple and organized.
  • Easier Alpha Combinations: Want to create a color with different opacities? Just mix the color variable with an opacity variable, no need to manually create new color versions with alpha values.
  • Less Redundancy: By separating these, you avoid duplicating colors just to achieve different opacities, making it easier to maintain and update.

This separation could make our design workflows more flexible and efficient. What do you think? Would this be useful for you too?

Looking forward to hearing your thoughts!

4 Likes

Hello Figma! - Its slightly disheartening to see this suggestion languishing since June 23. :frowning:

The option to separate out alpha variables will open up a lot of potential. For example I want to create a Global Shadow style pack that I can utilize in builds that will allow you to adjust the color of the shadows using variables.

To make nice shadows it requires utilizing many layers, it would be great to change one variable to apply to this shadow style to change all 5 Drop Shadow layers will maintaining their set opacities


2 Likes

+1 Yes, please! Great idea, very powerful)!

+100 Please work to add this functionality as you currently have to either a) Create a NEW variable that is not an alias; or b) detach the variable completely, which totally defeats the purpose of using the variable. Both options work against the usability of variable-based design system.

2 Likes