Skip to main content
DesignChase
May 7, 2023
Question

Blend Modes Not Sticking

I have a file where I’ve placed blend modes on a color fill overtop of an image fill. These were working fine until I added some new color styles.

Now when I go to change the color with the blend mode, I can change the color but the blend mode is stuck on whatever it is currently set to. I go to the blend mode, select a new one, and when I release it just goes back to the formerly set mode.

Has anyone else experienced this?

This topic has been closed for replies.

7 replies

RyanS
May 7, 2023

Same here. Blend mode on my figma files cannot be changed at the moment.
Thought it’s just me.

It worked fine changing blend modes at least 2 days ago. Now every blend modes that I applied seem to stuck at their current state and cannot be changed.

DesignChase
May 7, 2023

This is the same experience I’m having. Occurred after adding new color styles,

Alexandre_Borba
New Participant
May 9, 2023

Same here 🙋‍♂️t2:

Bart6
May 23, 2023

Yup, I have the same problem

Celine_
Figmate
Community Support
May 31, 2023

Hi all,
Sorry to hear this is happening!
It looks like a bug, please reach to our support team so they can investigate further here: https://help.figma.com/hc/en-us/requests/new

Be sure to use your Figma account email, include a link to the file, and share it with support-share@figma.com so they can take a closer look. Thank you!

DesignChase
May 31, 2023

After leaving this project alone for almost 2 weeks, I returned to it and no longer experience this issue. There was either an update during this time, restarting the app (though I believe I tried that initially), or just plain time that seemed to fix this one.

Is anyone still having this problem?

uipastel
New Member
September 10, 2023

I tried using typescript and see the console.log, but array just detect “Normal” BlendMode. I work hard to find the bug and found Golang language (https://github.com/torie/figma/blob/8ac4168aa567/types.go#L149) and I tried again, it’s not fixed the bug.

Some example my code:

interface BlendModeObject {
PassThrough: string;
Normal: string;
Darken: string;
Multiply: string;
LinearBurn: string;
ColorBurn: string;
Lighten: string;
Screen: string;
LinearDodge: string;
ColorDodge: string;
Overlay: string;
SoftLight: string;
HardLight: string;
Difference: string;
Exclusion: string;
Hue: string;
Saturation: string;
Color: string;
Luminosity: string;
}

// Buat objek BlendMode yang sesuai dengan objek BlendModeObject
const BlendMode: BlendModeObject = {
PassThrough: “PASS_THROUGH”,
Normal: “NORMAL”,
Darken: “DARKEN”,
Multiply: “MULTIPLY”,
LinearBurn: “LINEAR_BURN”,
ColorBurn: “COLOR_BURN”,
Lighten: “LIGHTEN”,
Screen: “SCREEN”,
LinearDodge: “LINEAR_DODGE”,
ColorDodge: “COLOR_DODGE”,
Overlay: “OVERLAY”,
SoftLight: “SOFT_LIGHT”,
HardLight: “HARD_LIGHT”,
Difference: “DIFFERENCE”,
Exclusion: “EXCLUSION”,
Hue: “HUE”,
Saturation: “SATURATION”,
Color: “COLOR”,
Luminosity: “LUMINOSITY”,
};

// Kode yang mengakses frameNode.fills
if (Array.isArray(frameNode.fills)) {
const fillsArray = ;
for (let i = 0; i < frameNode.fills.length; i++) {
const fill = frameNode.fills[i]; // Variabel ‘fill’ dideklarasikan di dalam loop

// Periksa jika fill.blendMode sudah ada dan sesuai
const blendMode = fill.blendMode && BlendMode[fill.blendMode as keyof BlendModeObject] ? BlendMode[fill.blendMode as keyof BlendModeObject] : "NORMAL";

const fillObject = {
  type: fill.type,
  visible: fill.visible,
  opacity: fill.opacity,
  blendMode: blendMode,
  color: { r: fill.color.r, g: fill.color.g, b: fill.color.b },
};
fillsArray.push(fillObject);

}
frameCode += frame.fills = ${JSON.stringify(fillsArray)};\n;
}