Clipboard mode

In clipboard mode, the HTML input is transformed into Figma internal clipboard data. The Figma structure can be pasted into the canvas directly.

The clipboard mode doesn't require to have a Figma plugin.

Requirements

• Only use Google Fonts
• Avoid System fonts

How to use it?

Query the API for Figma data

This request contains your API KEY so you have to do it on your backend. This must not be done directly from a client application or web site.

Code
 
const response = await fetch(
    "https://api.to.design/html",
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer <YOUR_KEY_HERE>"
      },
      body: JSON.stringify({ html: `<style>${CSS}</style>${HTML}`, clip: true }),
    }
  );

// Get clipboard data
const clipboardDataFromAPI = await response.text();

Load into the clipboard

Listen to clipboard copy event and load the data provided by the API.

Code
 
// Web browser example

document.addEventListener('copy', (e) => {
    if (clipboardDataFromAPI) {
      e.clipboardData!.setData('text/html', clipboardDataFromAPI)
      e.preventDefault();
      clipboardDataFromAPI = undefined;
      console.log('Copied to clipboard');
    }
  });

Trigger the copy event when appropriate.

Code
 
document.execCommand('copy')

Important note:

The clipboard API document.execCommand('copy') can only be used within ~5sec of the users interaction/click. So make sure that you have requested and received the data from the API before providing the [Copy to clipboard] button to the user.