Skip to main content
Question

Importing a team library component using plugin


Kenny_Lopez

Hello!

I’m trying to create a plugin for me and my team that allows 1) Creates a bunch of pages that we use all the time 2) import our cover component on the first page so people can change it to whatever suits the project.

Creating the pages was pretty easy ☑️

When trying to import the component I referred to the documentation and found importComponentByKeyAsync but I’m not quite sure how to use it properly. I was able to locate the component key so that part I have. I did try and look at a couple of other topics to see if I could see how others were doing it but all the others are trying to manipulate the component after they get it in while I’m just trying to do a straight import.

Sorry for being a complete n00b but any help would be appreciated

This topic has been closed for replies.

8 replies

tank666
  • 4873 replies
  • August 4, 2022

Kenny_Lopez

Ah thanks for the quick reply!

So this is exactly what I had but for some reason its not importing the component. I’ve check that its a published library so I should be all good there. and I know it works because I was able to use the automator plugin to test the key was working.

When I try figma.importComponentSetByKeyAsync(key) I get a 404 but figma.importComponentByKeyAsync(key) shows no errors at all. not quite sure were I’m going wrong


tank666
  • 4873 replies
  • August 4, 2022

I’m not sure what could be wrong on your end, but try creating a new file and importing the component into it.


Kenny_Lopez

If I just delete everything else and leave just what you posted, when running nothing happens on the page or in the logs. It all seems like it should create the instance and drop it on the default Page 1 but nothing 😢


tank666
  • 4873 replies
  • August 4, 2022

If the node didn’t appear on the canvas and the layers panel, then the plugin is probably closing before the promise resolves.

Try creating a new promise, wait for it to resolve, create an instance, and call the plugin close.


Kenny_Lopez

Ahh nice! that worked. thank you very much @tank666

For anyone else that might need it in the future:

async function importNode() {
let importComponent = await figma.importComponentByKeyAsync(key);
importComponent.createInstance()
figma.closePlugin();
}

importNode()


Hi @tank666 @Kenny_Lopez i need one help how we are getting this key ? Can i access any components whom i don’t have access but by this key i can import the components . Really sorry i am very noob at Figma.

Steps would really help.

Thanks 😊


Kenny_Lopez

This article helped me

Medium – 21 Jan 22

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