Color Styles – Opacity & Multiple Fills

For the reference, I think this might be a different way to solve the same issue: Use styles in other styles

Currently, when I have a color library and I need the exact color from it with X% transparency I have these choices:

• Unlinking the color and adding the transparency → however, if the underlying color is updated, the color with transparency isn’t updated since it isn’t linked to the source color anymore
• Changing the underlying color variable and adding transparency to it → I might use the color at different places and don’t want to add transparency everywhere
• Creating a source color with transparency and some without → is possible, but adds additonal complexity, especially when you have many colors and might be hard to maintain

Currently it looks like this (as seen in the screenshot). I would wish to have a transparency option next to the “-” icon.

The main issue is, that also developers use the Figma files as source of truth and they expect all colors be named. On the other hand, it isn’t practicable to have all transparency possibilities in the color library as it would get very complex very quickly.

Is there any news on this?
I find it odd that we are unable to add multiple fills when using styles

There’s also the fact that you can’t toggle hide / show the fill anymore when a style is applied.
I don’t see why there would be a compelling reason to lose functionality when using a style as a fill or stroke.

Really keen on this. I want to abstract state’s for fills & borders, which if we could apply multiple styles to fills, stroke and text colours, could be done without the need to declare each state for each type independently (e.g. I would have a Hover abstraction with is a tint of x% which I’d add above the style of each layer). Makes managing tokens much easier to have this abstraction

Yeah, this is a HUGE problem when designing and using a Design System in Figma… You’re left with no choice but to unlink color style of object, to be able to change the opacity on Auto Layout or Frame button. That means update-ing color styles in the design system wont apply those changes to those unlinked elements

Hi Figma, here I just wanna ask if there are any possibilities in the future development to have multiple color styles in the same object.

In my case, I wanna create an object with primary color and opacity blend mode to make a hover state object style such as button

Adding another vocal vote to add this functionality. The workaround right now is to have myriad color styles that look very similar which makes the color style palette kind of useless.

👆 👆 👆 👆 much need

We need the option to change the transparency to a fill style without breaking it first. Common!

This is extremely needed to reduce the number of color styles when working with large design systems. Every time I want to add opacity to a color style, I have to go and create a new color style for that opacity value. which totally overwhelms the color palette 😦

need this +1

Please, for the love of systems, can we adjust opacity on color styles. It’s probably a UI puzzle but this is a huge thorn in the side.

Would love to see this! It seems like fairly core functionality for anyone working with color styles.

It reckon it would fit into the UI pretty easily but I guess it could well be a tricky update behind the scenes.

+1 need this also

How is this still not implemented?

please this needs to be implemented, it’s driving mad!

The closest solution to this is that I used an inner drop shadow effect with the settings of

colour: white or black (your choice)
x: 0
y: 0
blur: crank it til it fills up the btn

Then you can save this as an effect style and reuse it throughout the document. So I essentially treat tints and shades as an effect.

I have a different workaround. Admittedly, I don’t know how smart this is in development, but I’ve heard no comments from any engineering team that I’ve worked with.
I add an overlay with

• Position set to Absolute
• Constraints set to Scale both ways
  then add my fill variable and adjust the layer opacity instead of worry about the fill opacity.