Hello everyone,
I am developing a Figma plugin where I have created a ComponentSet with two variants. Each variant has a state and a heading property. I want to dynamically assign the heading property to a text node within each variant.
Here is the simplified code for creating the ComponentSet:
figma.showUI(__html__, {
height: 200,
width: 400,
});
figma.ui.onmessage = async (msg) => {
if (msg.type === 'create-input-field') {
await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
// Create variants for the component
const defaultComponent = createComponentWithFrame('State=Default');
const filledComponent = createComponentWithFrame('State=Filled');
// Create a component set and add the components as variants
const componentSet = figma.combineAsVariants([defaultComponent, filledComponent], figma.currentPage);
componentSet.name = 'My Component Set';
componentSet.resizeWithoutConstraints(1200, componentSet.height);
componentSet.layoutMode = 'HORIZONTAL';
componentSet.counterAxisSizingMode = 'AUTO';
componentSet.primaryAxisSizingMode = 'AUTO';
componentSet.paddingTop = 20;
componentSet.paddingBottom = 20;
componentSet.paddingLeft = 20;
componentSet.paddingRight = 20;
componentSet.itemSpacing = 18;
componentSet.fills = [];
componentSet.cornerRadius = 5;
componentSet.strokes = [{ type: 'SOLID', color: { r: 0.592, g: 0.278, b: 1.0 } }]; // #9747ff
componentSet.strokeWeight = 1;
componentSet.dashPattern = [10, 5];
componentSet.strokeAlign = 'INSIDE';
componentSet.strokeJoin = 'MITER';
componentSet.strokeMiterLimit = 16;
componentSet.clipsContent = true;
// Position the component set on the canvas
componentSet.x = figma.viewport.center.x - componentSet.width / 2;
componentSet.y = figma.viewport.center.y - componentSet.height / 2;
}
};
const createComponentWithFrame = (variant: string): ComponentNode => {
let color: Paint[] = [{ type: 'SOLID', color: { r: 0.592, g: 0.278, b: 1.0 } }];
switch (variant) {
case 'State=Filled':
color = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];
break;
default:
color = [{ type: 'SOLID', color: { r: 0.592, g: 0.278, b: 1.0 } }];
break;
}
const component = figma.createComponent();
component.name = variant;
component.layoutMode = 'VERTICAL';
component.fills = color;
component.resizeWithoutConstraints(252, component.height);
component.addComponentProperty('Heading', 'TEXT', '');
setupAutoLayoutAndText(component);
return component;
};
const setupAutoLayoutAndText = (node: BaseFrameMixin): void => {
node.layoutMode = 'VERTICAL';
node.primaryAxisSizingMode = 'AUTO';
node.counterAxisSizingMode = 'AUTO';
node.paddingTop = 0;
node.paddingBottom = 0;
node.paddingLeft = 0;
node.paddingRight = 0;
node.itemSpacing = 4;
const label = figma.createText();
label.characters = 'Label';
label.fontName = { family: 'Inter', style: 'Regular' };
label.lineHeight = {
value: 23,
unit: 'PIXELS',
};
label.letterSpacing = { value: 0, unit: 'PERCENT' };
label.textAlignHorizontal = 'LEFT';
label.textAlignVertical = 'BOTTOM';
label.fontSize = 14;
label.name = 'Label';
const labelContainer = figma.createFrame();
const childContainer = figma.createFrame();
labelContainer.counterAxisAlignItems = 'CENTER';
labelContainer.counterAxisSizingMode = 'AUTO';
labelContainer.primaryAxisAlignItems = 'MIN';
labelContainer.primaryAxisSizingMode = 'FIXED';
labelContainer.fills = [];
labelContainer.strokes = [];
labelContainer.paddingTop = 0;
labelContainer.paddingBottom = 0;
labelContainer.paddingLeft = 0;
labelContainer.paddingRight = 0;
labelContainer.itemSpacing = 4;
labelContainer.clipsContent = false;
labelContainer.layoutAlign = 'STRETCH';
labelContainer.layoutGrow = 0;
labelContainer.layoutMode = 'HORIZONTAL';
labelContainer.layoutGrids = [];
labelContainer.layoutPositioning = 'AUTO';
labelContainer.appendChild(label);
node.appendChild(labelContainer);
node.appendChild(childContainer);
};
I am looking to understand how I can link the heading property to the text node so that changes to the property reflect in the text content.
Any guidance or examples on how to achieve this would be greatly appreciated.
Thank you!