I’m working on a Figma plugin and need help accessing components from my library. I want to grab components that are available in my assets panel but haven’t been used in the current document yet.
Let’s say I have a notification banner component in my library. My plugin should be able to create this banner component in the document even though it’s not currently placed anywhere. How can I access these library components through the plugin API?
I know how to work with components that are already in the document, but I can’t figure out how to reach the ones that are just sitting in the assets tab waiting to be used.
honestly the easiest way i found was just grabbing the component key from the url when you right-click and copy link. then use figma.importComponentByKeyAsync(key) and boom, you got your component ready to use. saves all the hassle with library apis and stuff
you can use figma.importComponentByKeyAsync(). first, get your library components with figma.getLocalPaintStyles() or similar, then import them to your doc. might be a bit tricky at first, but it works like a charm once you get it sorted!
The key is using figma.importComponentSetByKeyAsync() or figma.importComponentByKeyAsync() methods. You’ll need the component key from your library first though. I usually handle this by maintaining a reference file with all my library component keys, or you can programmatically get them through the team library API if you’re building something more dynamic. Once you have the key, the import method will pull the component into your current document and return a reference you can work with. Just remember that importing creates an instance in your document, so you might want to clean up afterwards depending on your plugin’s purpose. The import process is async so make sure you’re handling the promises correctly.
Had this exact issue when building my first plugin last year. The missing piece for me was understanding that you need to fetch the component keys from the team library first before you can import anything. What worked was using figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync() to get library info, then extracting component keys from there. Another approach that saved me time was setting up a simple mapping object in my plugin code that stores frequently used component keys as constants. This way I didn’t have to query the library every time. One gotcha I ran into - make sure your plugin has the right permissions set in the manifest to access team libraries, otherwise the API calls will fail silently and you’ll spend hours debugging like I did.