Add way to change opacity for color variables alias, fills, strokes, etc

…something almost useless compared to what we asked. We didn’t ask for variables for opacities… we asked for aliased variables with opacity. Who the hell is going to create a variable for each opacity?! Opacity is something that doesn’t make sense to standardize because it strongly depends on the context, so where the color is used… this is useful only someone want to create an opacity variable each 10 steps. Like opacity-0, opacity-10, opacity-20 and so one… useless in 99% of the real use cases.

2 Likes

You can simplify the code by using transparent as starting color so you don’t have to do the calculation:

/* Return a 70% transparent red */
color: color-mix(in oklab, transparent, red 70%)
1 Like

Also this is basically useless since we can’t set opacity for the shadow color once you set the variable…:person_facepalming:
CleanShot 2023-12-07 at 11.00.17

Agreeing with @Equinusocio, this does not work for me.

Curious how in the video these variables are accessed. I‘m clicking where the person in the video clicks, but I don‘t get the option to bind it to a variable.

+1 to this! I’ve been struggling with this a lot. The layer workaround in the Tweet is enough for me for now, but directly applying the opacity to a variable referenced by a token would be much better. Hope to see it soon :slightly_smiling_face:

Right click on the field. Really subtle. Sometime there is the icon, sometime you have to right click (on textfields). Really bad UI decisions lately.

2 Likes

Oh, I see. I hope this is a temporary solution because variables are in beta, and they‘ll make it more intuitive after the official launch.

You can also shift + left click the field to go straight to the variables, this works on other variable fields too such as border radius, height etc. Not intuitive but a handy shortcut

Replying because I CANNOT believe this is still not possible… How hard is it to implement this much needed feature?

Oversights like this make using variables awkward and lead to bad practice when time is tight.

It’s a similar issue to not being able to just apply “bold” or another formatting override to a text style (especially inside a text block!)

It’s adding blockers to a system that’s meant to make everyone’s job easier.

Having to add a seperate variable for every 10 opacity is working harder, not smarter.

1 Like

I know I’ve commented on this thread before, but in my opinion the fact that there is no ETA or even confirmation that this feature will ever be implemented shows a lack of understanding of what a design system is and what it can accomplish. It’s symptomatic of an issue many tools have – implementing the exciting before the necessary. Who cares if the house has basement waterproofing, that’s boring! It has a jacuzzi and a pool with three waterslides, wahoo!

We don’t need fancy AI features or several new kinds of Dev Mode annotations. Sure, they’re nice to have, but what would be even nicer is for variables to be able to do what the Tokens Studio plugin has been able to do for years, because the person behind that plugin understands the absolute basics of design systems.

1 Like

This is one of the reasons that I’ve avoided using Figma for years, until my company acquired another with a design team that used it, and it didn’t make sense to make them change. But Figma is seriously lacking some basic features and functionality that other design tools have had for decades in some cases. Not only these basic things like easily changing opacity, but object styles that allow you to apply a collection of property values like stroke color and width, fill, effects, etc.

And while the variables are semi-useful at this point, I’d much rather have basic interaction capabilities like being able to change the variant of one component instance from a different component instance, being able to move an object to/by specific coordinates, and to show/hide any component. These are all things I’ve been able to do in other prototyping tools easily for a really long time.

+1 really need this!

I have variables such as ‘primary’, ‘primary-tonal’ (30% alpha) ‘primary-tonal-light’ (12% alpha) and so on (which are lighter tones of primary color). It would be beneficial if the alpha channel could be controlled independently, so I only have to update one variable instead of 3…