Copy Figma objects via JS

Copy the object in Figma
Open Clipboard Inspector or a tool like it that can read the raw data off your clipboard.
When you paste the Figma object into this tool, you should see something that's type text/html, and possibly something of type text/plain. The text/plain one will be the text content of your object, which you can ignore.

In the text/html, you're looking for:

An HTML comment starting with figmeta:

<!--(figmeta) ... (/figmeta)-->

An HTML comment starting with figma:

<!--(figma) ... (/figma)-->

If your object has text content, you should see an HTML span tag at the end. Grab that too.

<span style="white-space:pre-wrap;"> ... </span>

There might be some extraneous HTML surrounding all this, but you really just want these three things.

Now in your JavaScript file, you want to copy those three things to the device's clipboard, sandwiched by some other HTML (line breaks and indentation not recommended; shown here only for readability):

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <html>
      <body>
        <!--StartFragment-->
        <meta charset="utf-8">
        <!--(figmeta) ... (/figmeta)-->
        <!--(figma) ... (/figma)-->
        <span style="white-space:pre-wrap;"> ... </span>
        <!--EndFragment-->
      </body>
    </html>
  </body>
</html>

I know, you're screaming at your screen right now, "That's the least valid HTML I've ever seen!" You're not wrong, but it works.

Say you take all that and assign it to a variable called data. Here's how you might then attach an event handler to a button, so that when it's clicked, it copies data to the user's clipboard. But the exact details of this part depend on your use case...

let data = "that whole mess in the previous section";
let button = document.querySelector("button");

const copyFigma = () => {
  const myHTMLString = data;
  const myBlob = new Blob([ myHTMLString ], {type: 'text/html'});
  let item = new ClipboardItem({'text/html': myBlob });
  
  navigator.clipboard.write([item]);
};

button.addEventListener("click", (e) => {
  e.preventDefault();
  copyFigma();
});

And there you go! Even if it's a component from a specific library, all that should be captured as usual. Pretty neat!

* This worked as of the time of publication, but might break if Figma makes any changes. Not much I can do about that.

** Is there a way to simplify this, up to using the Figma API to get the clipboard-friendly version of something? Maybe. But this is good enough for me.

*** This JavaScript code may not work in every single browser or browser version you need to support. But then again, getting data to the clipboard via JavaScript is probably the part you've got figured out already.

robkovacs/figma-copy.md

yogesh-sirsat commented Jan 10, 2025