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

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.

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.

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!

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

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

+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.

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. 🥺🙏 I run up against this so many times that it really does feel like a bug in the Figma Variables feature.

This needs to happen ASAP! 🙏

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.

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. 😦

for everyone to who this is very important: our workarround is using token studio at the moment and sync it with variables - this works perfectly because in token studio - tokens are managed but what tokens studio does is mapping the variable to a rgba value in Figma - its offcourse not what you want but its a workarround which works for now - best to still have this in Figma indeed

+1. We can’t use Tokens Studio at our company any more, so I’d need it in Figma. I just need to be able to reference a separate variable for color and for opacity in shadow effects. 

For real. What time am I saving by using variables then?

+1 I’m having a hard time believing this has not been implemented yet. It’s pretty tedious to work on building smart design systems without such features

Yes this would be sooooooo helpfull reducing management in Color Tokens

+1 I’m baffled why this hasn’t been implemented yet.

Once you start using Figma professionally you start to notice how much of a Beta Product they offer and what a money grab they are, starting with a limitation of 4 modes and going on to missing basic features. Get it together Figma, you are asking for a lot of money lately, we deserve a good product!

+1 Desperately need this. I need to create a lot of opacity variants for my design systems, and this would definitely speed things up, esecially in the early phases where I’m trying to rapidy iterate on colors and tweak / adjust them. Eech time I make an iteration, I need to break the alias, copy the color code, and paste it into several other variables. Multiple iterations x multiple variables to copy x multiple modes = a huge pain. On a single project, it wouldn’t be an exageration to say I needed to break and re-assign variables thousands of times. It feels like feature request is a meme at this point. Other than a few minor updates, variables have remained largely untouched since launch, which is sad.