Skip to main content
Lucia_Boehling
New Member
December 6, 2023

Support for blend modes with variables

  • December 6, 2023
  • 21 replies
  • 1605 views

Our design system leverages mix blend modes for hover states so our icon buttons appear on any background color and remain accessible, without needing separate hover–on-primary, hover–on-secondary, etc tokens. We use multiply for light theme, and screen for dark theme. It would be really awesome if we could apply blend modes directly to the color variables, OR support blend modes as variables in general.

Our current work around is to apply the blend mode directly on each component variant, but this requires us to define separate light and dark theme variants. would be great if we could use variables here to have it automatically switch between light/dark.

21 replies

djv
Figmate
Community Support
December 7, 2023

Thanks for the feedback!

We’ll pass this onto our Variables team for consideration

Lucia_Boehling
New Member
December 8, 2023

thank you!!

Nicholas_Inzucchi
New Member
December 8, 2023

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

CHHUN_Viphou
January 24, 2024

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

Sam_Jenkins
February 5, 2024

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.

Cody_Sorgenfrey
New Member
March 22, 2024

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):
image

Wil_Nichols
April 27, 2024

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

JDPoZ
New Participant
May 3, 2024

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)

Figmate
May 6, 2024

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.

Turgi
New Participant
May 10, 2024

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