Clone node from a separate file to current page

Plugin and Widget API Questions
1

Hi,

I’m trying to create a plugin with a UI elements library. I have a document with all the components I want to list and the plugin will have an image preview of each. When clicking the image, the component will be cloned on the current page.

My current code looks like this

 <div class="image-gallery">
    <div>
      <a href="#" class="gallery-image" data-file-id="9JkYmYgxjpGzBUNiJESfdi" data-node-id="3698-1207">
        <img class="thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Placeholder_view_vector.svg/310px-Placeholder_view_vector.svg.png" alt="Gallery Image">
      </a>
    </div>
  </div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
      // Find the image element
      const imageElement = document.querySelector(".gallery-image");

      // Add a click event listener to the image
      imageElement.addEventListener("click", function(event) {
        event.preventDefault();
        
        // Get the data attributes with file ID and node ID
        const fileId = imageElement.getAttribute("data-file-id");
        const nodeId = imageElement.getAttribute("data-node-id");
        
          // Use the Figma API to clone the component
          const node = figma.getNodeById(nodeId);
          const clone = node.clone();

          // Parent the clone under the current page
          const currentPage = figma.currentPage;
          currentPage.appendChild(clone);
      });
    });
  </script>

What am I missing because it’s not working?

Thanks in advance!

1 Like
2

Access to the figma global object is only possible from code.js.

3

Thanks @tank666
I even found some plugins that have this functionality.

So in order to achieve this I need to publish the file as a team library and use the methods you mentioned, right?

4

Some developers use their own solutions that are not described in the Figma documentation.

Exactly.