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!
Question
Applying variables to a new component created with API
This topic has been closed for replies.
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)
]
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.