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.
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.