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

Plugin and Widget API
1

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

Screenshot 2022-08-08 at 14.21.42
Screenshot 2022-08-08 at 14.21.42668×509 18.1 KB

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

2

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.

3

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

4

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.

3 Likes
5

Thanks a lot @Gleb! It works