Apply an Existing Color Variable to a Line Stroke Using Figma's Variables API


I’ve developed a plugin that creates lines between two rectangles in Figma, and I’d like to apply or assign an existing color variable to this new line. I’ve tried using this code,

    // Create the line as a vector
     const line = figma.createVector();

    // Set line properties
    line.resizeWithoutConstraints(1, 1);
    line.strokes = [{ type: 'SOLID', color: { r: 0.616, g: 0.651, b: 0.725 } }];
    line.opacity = 0.6;
    line.strokeWeight = Math.floor(Math.random() * (8 - 1) + 1);

    // Try to assign an existing variable to the newly created line
    const fillsCopy = line.clone(line.strokes);
    const variable = figma.variables.getVariableById("VariableID:1303:9577");
    const newStrokes = figma.variables.setBoundVariableForPaint(fillsCopy, 'color', variable)
    line.strokes = newStrokes

but I’m struggling to pinpoint the issue. Here’s the error that’s being displayed:

Error: in setBoundVariableForPaint: Expected "paintCopy.type" to be one of the allowed values for this property

Any ideas on how to fix this? Thanks!

The clone() method does not accept any arguments.

In your case, the fillsCopy constant stores VectorNode, but should a SolidPaint.

Thank you for your response; it’s much clearer now. I’ve updated my code, and it’s working perfectly! :ok_hand: