Support for blend modes with variables

Thanks for the feedback!

We’ll pass this onto our Variables team for consideration

thank you!!

+1 to this! It’s essential to implement apple’s official documentation for Material blurs using variables

please please please get this out next update. our team really need this.

Our team needs this as well! We are using “multiply” for our hover states to gain accessibility no matter what color the button background is, but need to turn this off in dark mode.

When you set a color to use a variable the color picker UI hides the blend mode button, however the blend modes still work. You should be able to see what blend mode a color is set to even if it’s controlled by a variable.

Before variable:

After variable (button is missing):

I’d benefit from this as well — my systems swap between screen + color dodge vs multiply + color burn depending on the ui theme selection.

Just have run in to an issue where I am needing to use a simple raster image on different color modes like dark and light, and need the image to be able to switch blending modes to go from being a mostly dark image to inverted light one.

The way to get around this currently is by using bools to toggle between multiple copies of the raster image’s visibility when each is set to different color blend modes like “Normal” and “Difference” for example…

It would also be nice to just be able to not only control layer visibility but individual properties like FILL and STROKE visibility as well (stroke is less important since a value of zero can be used to effectively also “hide” a stroke’s visibility via mode controls)

Hi @JDPoZ, Thank you so much for sharing your thoughts on variable. Your detailed description of your use case and workaround is incredibly helpful.

It sounds like both of your ideas could be really beneficial for other members of our community. We’re excited to see how they’ll respond to your suggestions.

If anyone in our community supports this idea, please show your enthusiasm by casting your vote!

Thanks again for taking the time to share your ideas with us.

Hi everyone 👋,

I use blend mode for colors and I found out that there isn’t any option like blend mode in variables panel.

Blend mode in variable panel while choosing a color would be amazing.

Blend mode exits in color fill panel - water drop icon
Blend mode is missing in variables - water drop icon doesn’t exits

+1 to blend modes in variables, can’t do light / dark modes without being able to switch the blend mode.

This is incredibly important for theming dark/light modes, which feels like a basic use case for variables.

@dvaliao This topic “Support for blend modes with variables” was created a half a year ago, but nothing has been changed. It’s a bug, because when you create a color with a blend mode, then define it as a variable, this variable loses the blend mode. At that moment you have two different values of this variable. First one, a frame with color from which you put it in Variables. Second one, all new frames with the same name of the color, but with different value, because it had lost the blend mode

Please do something with this issue! 🙏

I actually noticed that the built-in iOS components seem to have different blend modes in their light mode vs dark mode. No idea how this is accomplished unless they just have access to features that normal folks do not.

For example if you place the Sheet - iPhone component and have it’s variable mode set to light and then break the instance, you’ll see the top fill color uses a Color Dodge blend mode, but if you set it to dark mode, the top fill color is set to Overlay. Although neither are actually using variables when broken. Very odd, but would love to be able to do this as well.

Figma could allow us(me) to input the CSS code into the color picker modal when creating the variable. Also, being able to use variable in that would be helpful. Right now the behavior is to overwrite the input with an rgba value.

eg. my input would be: color-mix(in srgb, var(–core-color1) 92.857%, var(–core-color2))

Also, also, it is important to use the colormix function for color instead of gradient. one cannot use gradients for text in the wild and Dev is left to interpret or I give them a hex which defeats the purpose.

Also needed for us, for Dark and Light mode version of hover and active states on Buttons. 
And also, I checked, the workaround of assigning a blend mode to a color before creating a variable doesn't work.