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.

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!