Skip to main content
Question

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

Daniel_Buitrago_Jara

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

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

4 replies

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • August 8, 2022

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.

Daniel_Buitrago_Jara

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

Gleb
  • Gleb
  • Power Member
  • 4706 replies
  • August 8, 2022

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.

Zhao_Kai
Semi_Design_UED-MED
Daniel_Buitrago_Jara
3 people like this
  • Zhao_Kai
    Zhao_Kai
  • Semi_Design_UED-MED
    Semi_Design_UED-MED
  • Daniel_Buitrago_Jara
    Daniel_Buitrago_Jara
Daniel_Buitrago_Jara

Thanks a lot @Gleb! It works

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings