Support for Icon Plugin Development

I’m developing an icon plugin for my team. The plugin successfully pulls icons from a published DS foundations file into the plugin. These icons can then be inserted into the Figma canvas while maintaining the link to the design system. This part works great.

The problem I’m facing is displaying the icons in the UI. I’ve tried various approaches but haven’t found a solution yet. I’ve added the file key and Figma ID tokens as I understand them. If anyone has experience with Figma plugin development or UI implementation, your insights would be invaluable.

I created an icons.ts file that pulls 5 icons using their specific keys, allowing these icons to be inserted into the canvas.

Errors that I’m seeing

Firstly (regarding the error): node id ≠ component key. The IDs should look like this: 1:2, 1:3, …
Please refer to the developer documentation.

Secondly (regarding images): what REST API endpoint are you going to use for images? If, as in the screenshot—Get file nodes endpoint, then did you add the geometry query parameter? Or maybe the Get image endpoint? Have you sent the necessary data (paths or URLs) to the UI?

1 Like

Thank you, I created a Figma plugin to pull the node id and key component. It not clear to me on why to use one vs the other

ID is for local access/reference, every node has it. Key is for importing from the library, only components have it. Key is a unique reference across the entire Figma application, not just within the file like ID.

2 Likes