Applying variables to a new component created with API

Plugin and Widget API Questions
,
1

Hi - I’m struggling to create a new component with existing variables already applied. Say I want to create a frame and apply variables for border color, radius, etc. I can create a new component, but I’m struggling to apply the variables at the same time. Is this possible? I’ve had a look at the API docs, but struggling to implement the examples. Does anyone have any good example code? Thanks in advance!

2

Ok, thanks to a discord chat, I’ve managed to get it working! Not sure why I have to set a color in the setBoundVariableForPaint - it seems very unnecessary!

Here’s a code snippet if you need something similar:

    const radiusVariable = await figma.variables.importVariableByKeyAsync(msg.borderRadius);
    const borderColorVariable = await figma.variables.importVariableByKeyAsync(msg.borderColor);
    const backgroundColorVariable = await figma.variables.importVariableByKeyAsync(msg.backgroundColor);

    component.setBoundVariable('topLeftRadius', radiusVariable);
    component.setBoundVariable('topRightRadius', radiusVariable);
    component.setBoundVariable('bottomLeftRadius', radiusVariable);
    component.setBoundVariable('bottomRightRadius', radiusVariable);

    component.strokes = [
      figma.variables.setBoundVariableForPaint({ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, 'color', borderColorVariable)
    ]

    component.fills = [
      figma.variables.setBoundVariableForPaint({ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, 'color', backgroundColorVariable)
    ]