Figma Support Forum

Color Styles – Opacity & Multiple Fills

If I apply a color style to an object as a fill (or stroke), I can’t apply any additional fills to that object. I also can’t change the opacity of that fill when it’s tied to a style.

Example: I have a button that is a frame with a blue background which is tied to a color style. I want to create a hover effect for that button by adding an additional 10% black fill on top of my blue color. Currently to accomplish this, I have to detach the blue from it’s color style, then add an additional fill black on top of it and reduce the 2nd fill’s opacity to 10%. See example screenshots below.

This not only breaks my blue color style, but if I have black as a style in my design system, I can’t use that color style either.

Has anyone found a workaround for this that I’m missing?

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

Bildschirmfoto 2021-05-10 um 11.26.19
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