setBoundVariableForEffect Bug

Hey Pavel! Thank you for flagging this.

After investigating with the eng team, we saw a correct behaviour in our end.

Here’re a clarification and a workaround:
The helper does NOT denormalize the variable value on the effect field (in this case spread) on the Effect object that is returned by the helper. The recommended approach is to use the helper to modify a copy of the effects, and then to replace a node’s effects array with the modified copy. The raw fields are not denormalized (i.e. effect.spread returns the variable’s value) until you read it from the updated effects (return node.effects) on the node itself. Please also check the article here: Working with Variables | Plugin API Hope this helps.

Hi Celine.

I am sorry, I was not super clear on what I am doing here. I am using helper function to bind color variable to the effect. And I pass plain object effect as defined below. I am not trying to bind variable to effect.spread though

// basic setup
// I create effect object, create local style and assign effects to created style
// console logs spread value which is exactly like defined in effect object
const variable = figma.variables.getLocalVariables().find(v => v.name == "generic/shade/light")
const style = figma.createEffectStyle();
const effect = {
    type: "DROP_SHADOW",
    visible: true,
    color: { r: 0, g: 0, b: 0, a: 0.5 },
    blendMode: "MULTIPLY",
    offset: { x: 0, y: 10 },
    radius: 8,
    spread: -10
}

style.effects = [effect]
console.log(style.effects[0].spread); // returns -10

const effectCopy = JSON.parse(JSON.stringify(style.effects[0]));
console.log(effectCopy.spread); // returns -10

// clone() was taken from https://www.figma.com/plugin-docs/editing-properties/
const effectCopy2 = clone(style.effects[0]);
console.log(effectCopy2.spread); // returns -10

// now when I bound colour variable to effect.color the spread value goes to 0 ;(
console.log(figma.variables.setBoundVariableForEffect(effect, 'color', variable).spread); // returns 0
console.log(figma.variables.setBoundVariableForEffect(effectCopy, 'color', variable).spread); // returns 0
console.log(figma.variables.setBoundVariableForEffect(effectCopy2, 'color', variable).spread); // returns 0

And it does not work for me, even if I use the copy of style.effects the helper function resets effect.spread to 0.

I am doing it wrong?

style.effects = [figma.variables.setBoundVariableForEffect(effect, 'spread', variable)]

thats the thing mate, I am not binding spread value, I am binding color instead.

I define my effect like this

const effect = {
    type: "DROP_SHADOW",
    visible: true,
    color: { r: 0, g: 0, b: 0, a: 0.5 },
    blendMode: "MULTIPLY",
    offset: { x: 0, y: 10 },
    radius: 8,
    spread: -10
}

Then I call

const boundEffect = figma.variables.setBoundVariableForEffect(effect, 'color', variable)

and it sets spread value to 0

console.log(boundEffect.spread); // 0

Thanks, I didn’t notice. Perhaps this is still a bug.

As a workaround, you can get the desired properties from the object that the helper function returns and modify your effect object (or copies thereof).

let boundEffect = figma.variables.setBoundVariableForEffect(effect, 'color', variable);
effect['boundVariables'] = boundEffect['boundVariables'];
style.effects = [effect];

Yeah, I worked around the problem, I bound variable first and then re-set spread value on returned object.

let boundEffect = figma.variables.setBoundVariableForEffect(effect, 'color', variable);
boundEffect.spread = effect.spread;
style.effects = [boundEffect];