+1 i need this

We need this as well! Hopefully, we can have this opacity-changing feature on top of aliasing variables when the variable feature is officially released (non-beta) version! thanks

I thought we were doing something wrong, now I see it’s not possible which is a bummer 😦

This is indeed needed 🤞

+1, we need this

+1 for this. With the power of variables now, this would be amazing

Yes we need this! I basically want the token equivalent to:

opacity: .65

That you can apply to a component or colour.

+1,000! I have never voted for a feature or commented for a feature but here I am today. Would use this all day everyday.

Yes, +1 for this. I tried to figure it out for almost an hour until I saw this post and realized that it’s not possible at the moment… 😃

We definitely need this asap 🙂

Need this!

+1 we need this

+1 Badly need this!

+1 Need this badly

It’s virtually impossible to have a solid emphasis-level management for colors right now since it doesn’t make sense to add opacity to your “first tier tokens” and palettes in order to have variations on your aliased ones. Hopefully it gets added.

+1 Miss this feature too

Hey all! PM for the variables stream here. Would love to understand more as we’ve seen this request a lot. In the example above where @Equinusocio has brand/40 as a variable, if it were set to 50% opacity, how would you represent that in code? What would the equivalent of this be in css or on whatever platform you’re outputting to?

I want to make sure we’re approaching this in the right way, so any info here would help.

We’re hitting this same issue. We’re setting semantic usage of Primary, secondary and tertiary labels which are percentages of solid at the primitive level.

We can set a layer percentage fill transparency but that is a very messy workaround.

Let’s say we have color-red and background variables where background is an alias of color-red but 20% transparent. If we output to CSS we have a couple of ways.

1. Using color-mix (well supported)

 --color-red: #ff0000;

 --background: color-mix(in oklch, transparent, var(--color-red) 80%);

The colorspace can be any of the supported ones by Figma (HSL, RGB, etc…). Unfortunately, the color space is mandatory in color-mix() function. Returns a --color-red fill with 80% opacity (or 20% transparency).

2. Using relative colors (less supported)

 --color-red: #ff0000;

 --background: rgb(from var(--color-red) r g b / 20%);

This is more intuitive and produces a red 20% without doing mental calc. If using different color spaces, the returned channels are different. Eg.

 --color-red: #ff0000;

 --background: oklch(from var(--color-red) l c h / 20%);

With this new function, we can also perform calculations on the channels.

 --color-red: #ff0000;

 --background: rgb(from var(--color-red) r calc(g - 50) b / 20%);

The above solutions keep the variables dynamic preventing their values from becoming fixed. If we change color-red, also background will change

There is also a third option, using HEX colors with alpha channels, which is supported everywhere but requires values to be in any RGB color space and static values, losin aliases.

I was just switching over a Material Design library and hit this roadblock. Material Design 3 has 5 elevation levels of surfaces, which are defined by a fill of 2 colours: the surface colour, and then a semi-transparent tint of the primary colour in a given percentage for each level of elevation. Right now it’s defined as hex values. If I try to say it’s the variables surface at 100% opacity plus primary at, say, 5% opacity, it just changes it to 100% primary with no way to adjust it.

Figma provides the CSS for the current definition using hex for the colour definitions as:

background: var(--m-3-surfaces-light-surface-1, linear-gradient(0deg, rgba(51, 92, 168, 0.05) 0%, rgba(51, 92, 168, 0.05) 100%), #FFFBFE);

The lack of an ability to set a transparency level for a color variable means I can’t use the feature fully. Instead I’ll have solid colours using variables, and any tints/mixes using hex literals.

Definitely need this – please Figma devs 🙏

In addition to what Equinusocio shared, our team uses design tokens to express opacity as well. So to expand on the shared example, we might have something like this:

You can add Variable with ALPHA Color. Check this solution

That’s true, but unfortunately it doesn’t solve the problem. When you define a core palette of colours, each core token/variable will be a solid colour, such as –color-brand-10, –color-brand-20 (…) –color-brand-100. Design tokens reference these core variables in semantic tokens – let’s say your standard background colour for buttons and other interactive elements is –color-background-default, which references –color-brand-40.

If you have components like tooltips that overlay other UI elements, and you want to give them transparency, you’d ideally want to use another semantic token like –color-background-overlay, which references the same –color-brand-40 as your other token, but also adds opacity. This currently isn’t possible. Our team is using a temporary workaround by creating semantic tokens with transparency as hard values rather than as references to core variables. In the Tokens Studio plugin, you were able not only to add hard opacity values to semantic tokens, but also create opacity tokens.