This is another one where I wish that absolutely every text or number field would accept variables in them. I would love to be able to set the fill color opacity as a variable, and the H/S/L values as well, etc.

Tried creating a new color style and the gradient hack above (cool trick if you just need to hand-key opacity in), none of them allow setting the opacity as a variable.  So for now I’ll just create a layer above and set variables on Fill color and Appearance opacity until we get support for this in.  I am glad with the recent updates to Figma and glad they are hopping off the AI train some.

The absence of these core features is a significant oversight, especially considering the long-standing community demand. Their continued omission suggests a disconnect between product development and actual user requirements.

Our current workflow for building design systems and implementing variables is inefficient. We are forced to rely on complex, time-consuming workarounds to compensate for these functional gaps, which compromises our productivity.

Figma’s current market dominance appears to have led to a plateau in meaningful innovation. The platform requires more rigorous competition to incentivize the delivery of essential updates and quality-of-life improvements that professional users require.

I hit the exact same limitation and it drove me nuts.

Figma doesn’t let you override the alpha/opacity of an aliased color variable without detaching, so you lose the reference. I built Variables Plus to solve this class of problems by adding formulas on top of Figma Variables.

With Variables Plus you can keep Blue-950 as the single source of truth, then create derived variables like “Blue-950 @ 50%” (or drive the alpha from a separate opacity variable) while staying fully linked — when Blue-950 changes, all opacity variants update automatically.

Example: I reference Blue-950 and apply a 50% opacity formula. If Blue-950 changes later, the derived color updates too, while always keeping 50% opacity.
 

Plugin: https://www.figma.com/community/plugin/1607106236822235286/variables-plus

Demo file (duplicate-ready): https://www.figma.com/community/file/1607096708474658929/variables-plus-demo

​@Henrik_Andersen ​@Shane Yu ​@Pascale D'Offay ​@wiresnchains ​@Alok ​@Jared_r ​@Melanie_Sorensen1 ​@wgo ​@djv ​@Recep_Kutuk ​@Lukas24 ​@Michal_Swiaczkowski ​@Vishwajeet_Bhadouria ​@Matt Frederick CTS 

​@Variables Plus that’s very nifty - thanks. 

My only issue is that the developers would require the variable to remain intact in the code. 

It appears that your plugin displays it as a hex code (that’s linked to a variable) rather than reference the variable itself.  We would need the variable with opacity applied (my version using a gradient fill still achieves this, but it is duplicated into a gradient)

​@Pascale D'Offay  got it — thanks for clarifying.
 

Today, Variables Plus creates a derived Figma variable whose value is resolved (RGBA/hex with alpha). The key benefit is keeping it automatically in sync when the source variable changes.

For dev handoff, the robust workflow is to export the variables as tokens (JSON/CSS/TS) and treat that export as the source of truth in code. Devs then rely on the token name used in the design (Blue-950/50) and the exported file, not the resolved value shown in Inspect.

Would an export step solve this on your side? (i.e. you keep using the variable names in Figma, and your devs consume an exported tokens file as the source of truth, instead of relying on Inspect’s resolved hex/rgba.)

If yes, what format would your pipeline need? JSON (Style Dictionary / DTCG), CSS variables, Tailwind config, TS/JS module… and do you need it per mode (light/dark) as well?

This kind of seems like an unnecessary extra step (for my use case)
 

Figma should just have the functionality built-in

I would even like to be able make variable names variable, consider this: you’re using blue-200, blue-500 and blue-900 on a component and you decided to use green instead of blue. Just one variable change and there you are 🫠

Hello! We’re still here, waiting for developments on this issue, just in case anyone is reading 😞

+1 +100

Currently, I also need this feature to make my design system more flexible and convenient

​@djv any updated on where our much required functionality is in the prioritisation queue, it at all? :)

​@Recep_Kutuk it doesn’t look like anyone cares.. ​@djv - FYI we are still waiting

​@Pascale D'Offay Yep, It’s a giant pain having to make complex workarounds for this, adding a lot of friction between design ande code.

Frequent comments and a likes. Is helping to keep the issue in the top 10 of active requests. 
 

This should work exactly like they do it in the Token Studio plugin…. even in code it is the same.  So I am not sure why o why is Figma sticking with their implementation.  After all the goal is to get from design to dev easy and this not being possible just add to the frustration.  Also still no support for oklch…. Figma stays stuck… probably the high focus AI.  They should get the basics right first 😤

So how many years has it been now that we’ve been requesting this the most basic feature that should’ve been there in variables from the start? 🤨

​@djv Figma, come on, guys. You were the chosen ones! It was said you would destroy the Sith, not join them! Please stop wasting time and money on the AI rush and get back to your roots – creating a product that solves users’ problems.

So how many years has it been now that we’ve been requesting this the most basic feature that should’ve been there in variables from the start? 🤨

Figma, come on, guys. You were the chosen ones! It was said you would destroy the Sith, not join them! Please stop wasting time and money on the AI rush and get back to your roots – creating a product that solves users’ problems.