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:
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?
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)
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.
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 🫠
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 😤
