I am trying to make a plugin that documents color styles but I am having trouble with settign up the color token card component. I figured out how to add a component property but I don't know how I can apply that to the textNode.
Does someone know how to do this?
Component creation
// Create tile component
const cardTokenComponent = figma.createComponent();
cardTokenComponent.name = "Card Token";
cardTokenComponent.resize(206,176);
cardTokenComponent.addComponentProperty("TokenName", "TEXT", "");
cardTokenComponent.addComponentProperty("TokenColor", "TEXT", "");
const tokenNameNode = figma.createText();
tokenNameNode.characters = "";
cardTokenComponent.appendChild(tokenNameNode);
const tokenHexNode = figma.createText();
tokenHexNode.characters = "";
cardTokenComponent.appendChild(tokenHexNode);
For loop for creating an instance for each global color style:
for (const category in groupedStyles) {
const categoryFrame = figma.createFrame();
categoryFrame.layoutMode = "HORIZONTAL";
categoryFrame.itemSpacing = 48;
for (let i = 0; i < groupedStyles[category].length; i++) {
const style = groupedStyles[category][i];
// Create instance for each item
const componentInstance = cardTokenComponent.createInstance();
// Fill component properties
componentInstance.setProperties({TokenName: style.name, TokenColor: style.color})
}
parentFrame.appendChild(categoryFrame);
}
1 Answer 1
To apply component properties to a node, use the componentPropertyReferences property. Also note that the addComponentProperty() method returns a unique property ID, which you need to use in componentPropertyReferences and setProperties().
// Add component's text properties
const prop1 = componentNode.addComponentProperty('PropertyName 1', 'TEXT', '');
const prop2 = componentNode.addComponentProperty('PropertyName 2', 'TEXT', '');
// Apply these properties to text nodes inside component
textNode1.componentPropertyReferences = {characters: prop1};
textNode2.componentPropertyReferences = {characters: prop2};
// Set new values for component properties
instanceNode.setProperties({[prop1]: value1, [prop2]: value2})
Please read the documentation:
Sign up to request clarification or add additional context in comments.
Comments
lang-js