Please take a look above screenshot, there is a button, and a count appears when selecting the component.
Do you know if this default is from Figma?
Your screenshot shows a ComponentSetNode. When it is selected, Figma displays in the UI the total number of variants (ComponentNodes) and a + (add variant) button. So, you need to create a component set using the combineAsVariants method, as I wrote to you in another topic.
1 Like
Can you give me a small piece of code for a demo? I am new here. It would big help for me. I have used loop to create button and appending in parentComponentNode.
const buttonInstance = figma.createComponent();
buttonInstance.resizeWithoutConstraints(parentWidth, parentHeight);
let child = [];
let i = 0;
for (const variant of buttonVariants) {
const child = figma.createComponent();
console.log(i);
buttonInstance.name='Button Variants'
console.log(current_x, (buttonWidth * Math.floor(i / rowCount)), (columnSpacing * Math.floor(i / rowCount)),'for x pos')
const button_x = current_x + (buttonWidth * Math.floor(i / rowCount)) + (columnSpacing * Math.floor(i / rowCount));
const button_y = current_y + (buttonHeight * (i % rowCount)) + (rowSpacing * (i % rowCount));
console.log(current_y, (buttonHeight * (i % rowCount)), (rowSpacing * (i % rowCount)), 'Y pos', button_y);
// Calculate the button position
const variantComponent = figma.createFrame();
variantComponent.resizeWithoutConstraints(75, 40); // Set the size of the button
variantComponent.name = variant.name;
if(variant.name.indexOf('Ghost') === -1 ){
if(variant.name.indexOf('Border') > -1){
variantComponent.fills = [];
variantComponent.strokes = [{ type: 'SOLID', color: variant.style.borderColor, opacity: 1 }];
}else{
variantComponent.fills = [{type: 'SOLID', color: variant.style.backgroundColor}]
}
}else{
variantComponent.fills = [];
variantComponent.strokes = [];
}
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
// if(variant.name.indexOf('Ghost') === -1 ){
buttonText.fills = [{ type: 'SOLID', color: variant.style.textColor }];
// }
buttonText.textAlignHorizontal = 'CENTER'; // Align the text horizontally
buttonText.textAlignVertical = 'CENTER'; // Align the text
if(variant.name.indexOf('Disabled') > -1){
buttonText.opacity = 0.5;
}
buttonText.resize(variantComponent.width, variantComponent.height);
// figma.currentPage.appendChild(variantComponent);
variantComponent.appendChild(buttonText);
variantComponent.x = button_x;
variantComponent.y = button_y;
buttonInstance.appendChild(variantComponent);
i++;
}
figma.combineAsVariants([buttonInstance], figma.currentPage);
This is my code I have created button with frame component
I’m sorry but your code is not complete enough to test the functionality.
Here is a code snippet for creating components and combining them as variants.
let arr = [],
x = 0;
for (let i = 0; i < 8; i++) {
const component = figma.createComponent();
component.name = 'Value ' + (i + 1);
component.fills = [{
type: 'SOLID',
color: {
r: Math.random(),
g: Math.random(),
b: Math.random()
}
}];
if (i > 0) {
x += component.width + 20;
component.x = x
}
arr.push(component)
}
figma.combineAsVariants(arr, figma.currentPage)
Thanks for info, But how can we arrange like screenshot and give name to the main combine component?
const componentSet = figma.combineAsVariants(arr, figma.currentPage);
componentSet.name = 'Component Set Name'
Write the necessary conditions where you will change the X, Y coordinates.
Thank you! very helpful
Thanks
const buttonWidth = 75;
const buttonHeight = 40;
const columnSpacing = 25;
const rowSpacing = 60;
const spacingTop = 20; // Adjust the top spacing as desired
const spacingLeft = 20; // Adjust the left spacing as desired
const spacingRight = 20; // Adjust the right spacing as desired
const spacingBottom = 20; // Adjust the bottom spacing as desired
const buttonCount = buttonVariants.length;
const columnCount = Math.ceil(buttonCount / 4); // Assuming each column contains four buttons
const rowCount = Math.min(buttonCount, 4); // Assuming a maximum of four rows
const parentWidth = (buttonWidth * columnCount) + (columnSpacing * (columnCount - 1)) + spacingLeft + spacingRight
const parentHeight = (buttonHeight * rowCount) + (rowSpacing * (rowCount - 1)) + spacingTop + spacingBottom;
let arr = [],
x = 0;
let current_x = spacingLeft;
let current_y = spacingTop;
for (let i = 0; i < buttonVariants.length; i++) {
const component = figma.createComponent();
component.name = buttonVariants[i].name;
component.fills = [{
type: 'SOLID',
color: buttonVariants[i].style.backgroundColor
}];
component.layoutMode = 'VERTICAL'
component.cornerRadius = 5; // Set the border radius
component.primaryAxisAlignItems = 'CENTER';
component.counterAxisAlignItems = 'CENTER';
component.counterAxisSizingMode = 'AUTO';
component.primaryAxisSizingMode = 'AUTO';
component.resizeWithoutConstraints(75, 40); // Set the size of the button
const buttonText = figma.createText();
buttonText.characters = 'Label'; // Set the text content
buttonText.fontSize = 16;
buttonText.fills = [{ type: 'SOLID', color: buttonVariants[0].style.textColor }];
buttonText.textAlignHorizontal = 'CENTER'; // Align the text horizontally
buttonText.textAlignVertical = 'CENTER';
buttonText.resize(component.width, component.height);
const button_x = current_x + (buttonWidth * Math.floor(i / rowCount)) + (columnSpacing * Math.floor(i / rowCount));
const button_y = current_y + (buttonHeight * (i % rowCount)) + (rowSpacing * (i % rowCount));
if(i>0){
component.x = button_x;
component.y = button_y;
}
component.appendChild(buttonText);
arr.push(component)
}
const mainCom = figma.combineAsVariants(arr, figma.currentPage)
mainCom.name = "Buttons";
mainCom.resizeWithoutConstraints(parentWidth, parentHeight)
Thanks for your help, But 1 issue is not taking x position for first component componentNode.
See the screenshot button touches from left and top.
Change the X, Y coordinates for each child in the component set.
How can we do it? If i removing the condition I>0 then the all button’s x and y not work.
Done. I got it Thanks for all your Help. You are amazing guy!
1 Like