combineAsVariant

Plugin and Widget API Questions
1

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.

2

You don’t know how to add an array of ComponentNodes?

figma.combineAsVariants([ComponentNode, ComponentNode, …], parent)
3

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);

image
image306×563 7.53 KB

4

What will be a parent component?

5

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.

6

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?