Skip to main content
Solved

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

  • January 16, 2024
  • 2 replies
  • 507 views

Ludovic_Riffault

Hello,

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!

Best answer by tank666

figma.com
This topic has been closed for replies.

2 replies

tank666
  • Answer
  • January 16, 2024

Ludovic_Riffault

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