Skip to main content
Solved

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


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
View original
This topic has been closed for comments

2 replies

tank666
  • 4863 replies
  • 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! 👌


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings