Write to Clipboard from custom plugin

Same question here…
I’m looking into developing a widget that would cut some serious overhead for our PO/PM teams, but I need to be able to put content into the User’s clipboard from the Plugin.
@anon21722796 although I’ve searched everywhere – and this would seem like a fairly common use-case – I haven’t been able to figure this one out.

Thanks in advance for your help!

There are two common ways to copy text to clipboard.

1. Use document.execCommand. However, this is deprecated as mentioned by @c5inco
2. Use Clipboard API. Note that the operation is asynchronous

Both of the methods rely on browser so they can only run in UI part of figma plugin. I have wrapped the logic inside a utility funciton that can be used out of box. copyToClipboard and copyToClipboardAsync. Hope this helps 😀

Thanks for the figx library! Have you had any issues on copyToClipboard / execCommand approach for plugins running in Figma browser? Right now, I have similar code that seems to work in desktop Figma only.

Thanks for pointing out. Yep I just checked and it doesn’t work in browser. I think the reason is execCommand('copy') not working properly in browser. Figma desktop is a bit different since the plugin UI is wrapped inside a iframe. Anyway, I updated my code (npm@0.0.16) a little bit with a backup window.copy in browser which ONLY works in chrome. Please let me know if you have any suggestions or observations that could make it work universally 😀

Unfortunately that addition didn’t work for me, even in Chrome. Here is the code I’m using (repurposed from your library - thanks!). Maybe it’s because I’m doing the calls within ui.html. What makes it even more frustrating is the only way I can test this is by publishing the plugin since the browser version doesn’t support plugin development 😑

Have you run into these issues as well?

I don’t have a published plugin to test this. I tested this in the console by switching the frame the plugin is run in.

Have you tried this?

Sorry on the delay. Yes I did just try this. It works fine in the desktop app, but I’m still running into the same issues in production on Chrome. Have others reported this same issue with your library?

I’m trying to use clipboard in a widget, it doesn’t seem possible without creating a plugin UI. Can we do that without showUI? When I hide the visible: false it’s not working.

<AutoLayout
        name="color"
        direction="horizontal"
        horizontalAlignItems="start"
        verticalAlignItems="center"
        spacing={"auto"}

        // Trying solve for copy on click
        onClick={(e) => {
          return new Promise((resolve) => {
            figma.showUI(__html__, {
              visible: true,
              height: 0,
              width: 0,
            });

            figma.ui.postMessage("copy text");
            setTimeout(() => {
              resolve(null);
            }, 100);
          });
        }}
      >

Currently, Plugin UI appear for a second that looks weird

Hey, Is there any update on this?
I’m writing a plugin and testing in the Desktop version and I can only seem to use the method that creates temporary HTML UI which seems quite hacky.
@111749 I tried both methods you posted from Figx but yeah neither worked. It seems that we don’t get access to navigator.clipboard or window.copy.
Has anyone tried to contact Figma regarding this?

I’m also looking for a solution. I’ve tried:

• listening to ‘copy’ events (user presses ‘cmd + C’) and overriding the copied data. This works but I can’t manually trigger it say, when the user clicks a button (which is what I’d like to have).
• manually dispatching a ClipboardEvent with the desired data. In this case the event gets dispatched, seemingly correctly, but the data is NOT actually saved in the clipboard.
  I’ll post the code in case somebody can continue from here:

// case 1 - intercept the copy event
// this works but the user needs to press cmd + C
window.addEventListener('copy', (event: any) => {
            event.preventDefault()
            event.clipboardData?.setData(
               'text/plain',
               'This has been programmatically copied!'
            )
}

// case 2 - manually triggering the event
// this can get triggered clicking a button, but the data is not really saved to the clipboard
const dataTransfer = new DataTransfer()
dataTransfer.setData('text/plain', 'hello world')

const event = new ClipboardEvent('copy', {
      clipboardData: dataTransfer,
})
// manually dispatch it
window.dispatchEvent(event)

Finally, I’ve also tried mixing the two techniques but without success.