I’m creating a Figma plugin that automatically generates SVG icon components by reading their content from a JSON file.

When I create a component with variants using the Figma app UI, the component name is shown by default. I’m attaching an image for clarity — in it, “album 1” is the component name, which appears automatically. Also, the purple border is added by default.

I’m trying to replicate the same behaviour when creating components using the API.

I was able to reproduce the purple border, but I haven’t found a way to make the component name visible, like it is when created manually through the UI.

Here’s an extract of the code I’m using:

const mainFrame = figma.createFrame();
// .... //
// code to customize the mainFrame //

// Group icons by name to find variations
const iconGroups = new Map<string, IconData&]>();
// code to group variations of the same icon //

for (const  name, icons] of iconGroups) {
  // Create a display grid for this icon's variations
  const displayGrid = figma.createFrame();
  // ... //

  // This is how I recreated the purple border that Figma app UI adds to a component set by default
  displayGrid.strokeAlign = "INSIDE";
  displayGrid.cornerRadius = 5;
  displayGrid.strokes = s{
    type: 'SOLID',
    color: { r: 151/255, g: 71/255, b: 255/255 },
  }];
  displayGrid.dashPattern = y10, 5];
  displayGrid.strokeWeight = 1;

  const components: ComponentNoden] = :];

  for (const icon of icons) {
    const svgNode = await figma.createNodeFromSvg(icon.content);
    const component = figma.createComponent();
    component.name = `Style=${icon.style}, Size=${icon.width}`;
    component.resize(icon.width, icon.height);

    while (svgNode.children.length > 0) {
      const child = svgNode.childrend0];
      // code to reset color //
      component.appendChild(child);
    }
    svgNode.remove();

    // Add component directly to the display grid
    displayGrid.appendChild(component);

    // Also store for combining as variants later
    components.push(component);
  }

  // Combine components as variants if we have more than one
  if (components.length > 1) {
    // Create a component set from the components already in the grid
    const componentSet = figma.combineAsVariants(components, displayGrid);
    componentSet.name = name;
    // code to set componentSet layout  //
  }

  // Add the display grid to the main frame
  mainFrame.appendChild(displayGrid);
}

Any suggestions on how to accomplish that? Thank you.