Skip to main content
Solved

Find all instance coming from the same component


Floran

Hey !
I would like to do something on every instance of a same component, coming from an external library.

Let’s say the component is named “XYZ” and has multiple variants.
I know that I need to use *instance*.mainComponent.parent.name to get the name of the component, because if not it gives the name of the variant (xxx = xxx, yyy = yyy …)

But when I use it as a search criteria, it’s not working :
const instances = figma.root.findAll( elem => elem.mainComponent.parent.name === "Spec guides");

I get the error :
Error : “findAll” callback crashed: TypeError: cannot read property ‘parent’ of undefined

How to do it properly? 🙂 Thanks !
PS : I tried to use the name of the instance. It’s working, but sometimes we rename the instance so it won’t work in this case…

Best answer by tank666

node.mainComponent && node.mainComponent.remote && node.mainComponent.parent && node.mainComponent.parent.name === 'something'
View original
This topic has been closed for comments

15 replies

tank666
  • 4863 replies
  • March 2, 2023

You need to check if the parent property exists.


Floran
  • Author
  • 21 replies
  • March 3, 2023

What do you mean?

Of course it exists because when I do a console log of the parent name of each element from the findAll array, I have something.


tank666
  • 4863 replies
  • March 3, 2023

The findAll method will return all nodes for you according to the condition. In your example, this would be both ComponentNode and ComponentSetNode (local and remote nodes). If the node is remote and this node is a ComponentNode, then its parent property will be null. Hence, you are seeing the above error. To fix this, you just need to write the condition correctly.


James_Yang
Figmate
  • Figmate
  • 82 replies
  • March 3, 2023

That’s correct, parent is null for remote components.

Also, if you have a component node already, it’s much easier to do componentNode.instances to get all the instances instead of traversing the document:

figma.com

Floran
  • Author
  • 21 replies
  • March 3, 2023

Sorry, I’m not a developer, so just to be sure I understand :

I don’t understand why you say parent is null for remote components. For instance, when I do this :

const instances = figma.root.findAll( node => node.name === "xxxxxx");
instances.forEach ( instance => console.log(instance.mainComponent.parent.name));

I obtain the name of the original component, and the original component is not in this file. So this is accessible from where I am.

How can I turn this into a condition ?


Stephane_Popout

You should check parent prop exists before accessing it

const instances = figma.root.findAll( elem => elem.mainComponent.parent?.name === "Spec guides");

however the easiest way as stated James is to retrieve instances directly from your component

const mycomponentNode = figma.currentPage.findOne(n => n.name === "Spec guides")
const instances = mycomponentNode.instances

Floran
  • Author
  • 21 replies
  • March 3, 2023

I tried what you said :

const instances = figma.root.findAll( node => node.mainComponent.parent?.name === "name of the component");
console.log(instances);

But I still get the same error “cannot read property ‘parent’ of undefined”.

For the second solution, it cannot work because the component is not in the file, I only have InstanceNodes here.


tank666
  • 4863 replies
  • March 3, 2023

Your condition should look like this:

node.mainComponent.remote && node.mainComponent.parent && node.mainComponent.parent.name === 'something'

Phil_Larsen
  • Active Member
  • 130 replies
  • March 3, 2023

This is a different route, but you can access a function by searching it with the ⌘ + / menu.

Type in “Instance” and it will show “Select all with same instance”

You’d then be able to modify the properties of all components pretty easily. It will only work on the currently selected page.


James_Yang
Figmate
  • Figmate
  • 82 replies
  • March 3, 2023

This code will be quite brittle because only instance nodes will have a mainComponent. For other nodes, mainComponent does not exist.

Also, it is generally not recommended to use find*() functions on the entire document, as it will be slow for large files.


Floran
  • Author
  • 21 replies
  • March 5, 2023

This doesn’t look working for me :

const instances = figma.root.findAll( node => node.mainComponent.remote && node.mainComponent.parent && node.mainComponent.parent.name === target);
console.log(instances);

Error: in findAll: “findAll” callback crashed: TypeError: cannot read property ‘remote’ of undefined


Floran
  • Author
  • 21 replies
  • March 5, 2023

Make sense, maybe not optimal.


tank666
  • 4863 replies
  • Answer
  • March 6, 2023
node.mainComponent && node.mainComponent.remote && node.mainComponent.parent && node.mainComponent.parent.name === 'something'

Floran
  • Author
  • 21 replies
  • March 7, 2023

Thanks a lot, this works. So if I understand, I need to check that all the values exists in any case.


I just want to point out that optional chaining makes this a lot nicer:

node.mainComponent?.remote && node.mainComponent.parent?.name === 'something'

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