Plugin mode

In plugin mode, the HTML input is transformed into a pseudo Figma structure that a Figma plugin can use to "paint" into the canvas.

This mode requires to have a Figma plugin. If you don't need a Figma plugin, please check the Clipboard mode instead.

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 from your Figma plugin.

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: false }),
    }
  );

// Get model and images in response
const { model, images } = await response.json();

// Send model and images to your Figma plugin

Apply the result in your Figma plugin

In your Figma plugin you can apply the result of the query.

In the plugin UI, convert images into binary using the toBinary function:

Code
 
import { toBinary } from '@divriots/c2d-sdk';

...

const payload = {
  output_model : model,
  output_images : toBinary(images)
}

Then send this payload to the main VM of the plugin that have access to the canvas and call c2dToFigmaCanvas function:

Code
 
/// <reference types="@figma/plugin-typings" />
import { c2dToFigmaCanvas } from '@divriots/c2d-sdk';

...

const node = await c2dToFigmaCanvas(payload.output_model, payload.output_images, {
                      onWarning(warning) {
                        console.warn(warning)
                      },
                    });

// Optionally, work with the newly created node in Figma
if (node) {
  figma.currentPage.selection = [node];
  figma.viewport.scrollAndZoomIntoView([node]);
}