How to get the name of the folder of a component?

Thanks for the reply, I don’t know how to properly address my issue, but basically, I can access my components (Danger & Default in my screenshot) but I’d like to access their folder (Tag) since I have multiple components called Danger & Default.

Check the ComponentNode.name property. If the component name does not contain folder names (or does not match the */* pattern), check the ComponentNode.parent.name property.

ComponentNode.name returns the stringified props of the components ('Size=X-Small, Left icon=False') while ComponentNode.parent.name returns the name of the component (Danger).
I did check the doc for ComponentSetNode | Plugin API (which is ComponentNode.parent in my case) but it didn’t help either 😕

So check the parent of the ComponentSetNode.

It doesn’t have any, it’s a top node of a page, and what I’m looking for it actually the name of the page

I didn’t notice that this is a remote component from a library. Then unfortunately you can’t get the full hierarchy.

Oh that’s too bad, I will try to do a mapping with the id of the components or components set, thanks a lot for your time though !

Have you tried gpt?

It says the following:

In Figma, when creating a plugin, you have access to the Figma API that can be used to explore the properties and relationships between layers, frames, and components. If you are interested in navigating the relationship between a component instance and its master component (or its parent), you can use the mainComponent property.

Here’s a basic approach you could take to identify the parent of a given component:

1. Accessing the selected node: You’ll typically start by accessing the currently selected node. Figma allows you to do this through the figma.currentPage.selection array.

const selectedNodes = figma.currentPage.selection;

2. Check if the selected node is a component instance: Before trying to access mainComponent, make sure the selected node is actually a component instance.

if (selectedNodes[0].type === "INSTANCE") {
  const componentInstance = selectedNodes[0];
  ...
}

3. Access the main component: From the component instance, you can access its main component.

const mainComponent = componentInstance.mainComponent;

4. Get the parent’s name: If you have a naming convention like “Button > Primary”, the main component’s name would be “Button > Primary”, and the parent’s name (i.e., “Button”) would be the substring before the ‘>’. So, you could split the string to get the parent’s name.

const parentName = mainComponent.name.split(' > ')[0];

Combining all of the above, here’s a concise way to get the parent’s name:

const selectedNodes = figma.currentPage.selection;

if (selectedNodes.length > 0 && selectedNodes[0].type === "INSTANCE") {
  const componentInstance = selectedNodes[0];
  const mainComponent = componentInstance.mainComponent;
  const parentName = mainComponent.name.split(' > ')[0];

  console.log(parentName); // This should output the parent's name, e.g., "Button"
}

Make sure you handle edge cases, like if a component doesn’t follow the exact naming convention or if there are additional ‘>’ characters in the name.

That sound a lot like what tank666 suggested yesterday but unfortunately, the naming convention of our library is Primary in the Button page rather than Button > Primary