How can I show the variant count with add + icon with the component as screenshot?

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

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!