Write to Clipboard from custom plugin

Considering that document.execCommand is deprecated, what would the best way to write to the system clipboard within a custom plugin?

Right now, it’s a bit hacky where one can create a temporary HTML UI, set elements like textarea with the intended value to copy, then use document.execCommand. That will likely not be supported in the future, so ideally there’d be a nice and secure way to work with the system clipboard through a Figma API.

1 Like

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!

1 Like

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 :smile:

2 Likes

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 :grinning:

1 Like

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 :expressionless:

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