Color Styles – Opacity & Multiple Fills

Forum|Forum|5 years ago
April 16, 2021
20 replies
10713 views

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?

Share an idea

Gleb

Power Member

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

Eszter_Schuffert

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.

Michael_Laugesen

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

Deus_Ex_Pixel

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.

Chris_Kerr

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

Vladimir_Pavlovic

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

rahend

Active Member

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

Michael_Dillingham

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.