Skip to main content

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.

figma.com

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

code:



Do you know what could be the cause?


This means the component is not published in the library.



Thanks it works now!


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.selectiono0];

// 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.');
}


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.







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


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!.



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