I want to Create buttons with the variants, and try to use combineAsVariant to show all the variants in it like handyComponents plugin.
How can I use the combineAsVariant and pass the argument as the node are the readOnly field so how can i pass the argument in it?
Any help would be appreciated.
You don’t know how to add an array of ComponentNodes?
figma.combineAsVariants([ComponentNode, ComponentNode, …], parent)
yes don’t know, I have created a buttons with frame nodes and also how can I do something like
Following is my code
function createCombinedButtonComponent() {
let variantComponents = [];
// Create instances of the button variants within the frame
const buttonInstance = figma.createComponent();
for (const variant of buttonVariants) {
buttonInstance.name='component'
const variantComponent = figma.createFrame();
variantComponent.resizeWithoutConstraints(75, 40); // Set the size of the button
variantComponent.name = variant.name;
variantComponent.fills = [{type: 'SOLID', color: variant.style.backgroundColor}]
variantComponent.cornerRadius = 5; // Set the border radius
variantComponent.primaryAxisAlignItems = 'CENTER';
variantComponent.counterAxisAlignItems = 'CENTER';
// Create the text node
const buttonText = figma.createText();
buttonText.characters = 'Label'; // Set the text content
buttonText.fontSize = 16; // Set the font size
buttonText.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
buttonText.textAlignHorizontal = 'CENTER'; // Align the text horizontally
buttonText.textAlignVertical = 'CENTER'; // Align the text
buttonText.resize(variantComponent.width, variantComponent.height);
figma.currentPage.appendChild(variantComponent);
variantComponent.appendChild(buttonText);
buttonInstance.appendChild(variantComponent);
}
return buttonInstance;
}
// Get the current page in Figma
const currentPage = figma.currentPage;
// Create the combined button component with variant options on the current page
const combinedButtonComponent = createCombinedButtonComponent();
// console.log(combinedButtonComponent)
currentPage.appendChild(combinedButtonComponent);
What will be a parent component?
From the code you provided, it only creates one component, while you should have created components for each object and then use the combineAsVariants method to combine them into a component set.
I also want to note that before changing the font properties, you will need to load it first.
The parent can be any node where you want to insert the component set. For example, to the current page.
Can you provide some any example code ? Also, I want to arrange the buttons and like image I given in screenshot. also how can I add the + icon to add the duplicate the button and show variant count?
The varintcombine do such thing or there is different way for it?
