How to get the main-component name from an INSTANCE node?

Hi, all. I’m working on a plugin to automate design specs. One of the ideas is to visually highlight the components of a shared library and show it’s name and properties.

So far, through the INSTANCE nodes I’m able to get the properties, but no the main-component name.

For example, I’m able to get this from a component called Button:

{
Disabled: {value: 'No', type: 'VARIANT'}
Icon: {value: 'None', type: 'VARIANT'}
Size: {value: 'Default', type: 'VARIANT'}
State: {value: 'Default', type: 'VARIANT'}
Type: {value: 'Secondary', type: 'VARIANT'}
}

But I cannot find a way to get the name of the main component, which in this case should be Button

Can anyone point me how to get this info? Thanks in advance,

instance.mainComponent.name

But if it’s a library component and not a local one, you need to load it first using figma.importComponentAsync and instance.mainComponent.key — although looks like you are already getting properties successfully so that’s probably not the case.

Thanks @Gleb for the quick reply…

I’m doing what you suggested:

  await figma.importComponentByKeyAsync(key)
    .then((component) => {
      console.log(component.name);
    })
    .catch((error) => {
      console.log(error);
    });

The issue is that when doing console.log(component.name) it logs Type=Secondary, Size=Default, Icon=None, State=Default, Disabled=No which are the properties, instead of the actual component name, which I expect to be Button

That’s the actual name of a variant component inside of a variant set. If you want to get the name of the variant set the main component belongs to, you need to get its parent, e.g. instance.mainComponent.parent.name.

1 Like

Thanks a lot @Gleb! It works