Skip to main content
Question

Where do i find component key


Hi, I’m new to Figma and I have a design in my library. I need to get the component key so I can use it in my plugins, but I can’t find it anywhere. Thanks in advance.

9 replies

tank666
  • 4859 replies
  • January 6, 2024

Thanks, got it now. Got this error when running my pluggin.
code:

Do you know what could be the cause?


tank666
  • 4859 replies
  • January 6, 2024

This means the component is not published in the library.


Thanks it works now!


uipastel
  • 30 replies
  • January 6, 2024

If you are developing a Figma plugin and need to access the component key programmatically, you can use the Figma Plugin API, specifically the key property of a ComponentNode object.

Here’s an example of how you might use it in a Figma plugin:

// Get the selected component
const selectedComponent = figma.currentPage.selection[0];

// Check if the selected node is a component
if (selectedComponent && selectedComponent.type === 'COMPONENT') {
  // Access the component key
  const componentKey = selectedComponent.key;
  console.log('Component Key:', componentKey);
} else {
  console.error('Please select a component on the canvas.');
}

edDes
  • 3 replies
  • July 16, 2024

Select the Variant in the Component Set, open the console in Figma, enter
Figma.currentPage.selection[0].key.

this does not seem to work to find the key, the console responds with:

figma.currentPage.selection[0].key
Uncaught ReferenceError: figma is not defined
    at <anonymous>:1:1

Also, requesting the key by code:

for (const node of page.children) {
    if (node.type === "COMPONENT") {
        console.log(`DEBUG NODE ${node.name}`);
        console.log(`DEBUG KEY ${node.key}`);
    }

in this case node.key prints undefined being the component published in internal library. Which in theory makes sense since there is no such key field in the JSON. Not sure if figma.currentPage.selection[0] works differently.


tank666
  • 4859 replies
  • July 16, 2024

Could you share a video or link to the example design file?


edDes
  • 3 replies
  • July 17, 2024

Hi @tank666, no I can’t share material since it is all internal private. I have noticed though that, at the bottom of the json response, there is a components field where they indeed include the key field. Seems like I was just looking for it on the wrong place, since it is not present on the COMPONENT node when I try to follow the document tree of the file.

And regarding the console bug…well, since it has been there since Jan 2023 as you mentioned, and we are currently in July 2024…I do not really see the point of reporting a bug to be honest.

Thanks for the support anyway!.


tank666
  • 4859 replies
  • July 17, 2024

It looks like you used a response from a REST API, so you need to follow the documentation for that API: https://www.figma.com/developers/api.

Maybe they don’t know about this bug yet? In any case, reporting a bug and communicating with support is a common sense idea.


Reply


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