figma-comlink

Comlink endpoint utilities for Figma plugins

Install

npm i figma-comlink

or

yarn add figma-comlink

Usage

Exposing plugin methods to the UI

Declare your object you want to expose and call Comlink's expose method with an endpoint from figma-comlink:

// plugin.js
import * as Comlink from "comlink";
import { uiEndpoint } from "figma-comlink";

const api = {
  foo() {
    return 'bar';
  }
  // If you want to expose figma's built in methods, make sure to wrap it with a `proxy`
  clientStorage: Comlink.proxy({
    getAsync: figma.clientStorage.getAsync,
    setAsync: figma.clientStorage.setAsync,
  }),
}

Comlink.expose(api, uiEndpoint());

and then use it from the UI thread like so:

// ui.js
import * as Comlink from "comlink";
import { pluginEndpoint } from "figma-comlink";

const plugin = Comlink.wrap(pluginEndpoint());

plugin.foo()
  .then(console.log) //-> "bar"

Exposing UI methods to the plugin

Define your UI methods:

// ui.js
import * as Comlink from "comlink";
import { pluginEndpoint } from "figma-comlink";

const api = {
  notify(msg) {
    // ... your notification implementation
    window.alert(msg)
  }
};

Comlink.expose(api, pluginEndpoint);

add UI endpoint and use your exposed method

// plugin.js
import * as Comlink from "comlink";
import { uiEndpoint } from "figma-comlink";

const ui = Comlink.wrap(uiEndpoint());

ui.notify("Hey ma! I'm sending a notification from plugin thread!")

API

uiEndpoint

() => Comlink.Endpoint

Creates a UI endpoint. This should be used in your plugin thread.

pluginEndpoint

({ targetOrigin, pluginId }?: Options) => Comlink.Endpoint

Options:

• targetOrigin?: string Origin on which we should listen and send messages to. Defaults to '*'

• pluginId?: string Your plugin ID

Creates a plugin endpoint. This should be used in your UI thread

If your UI lives on a different origin or you have potentially sensitive data, you should pass pluginId and targetOrigin:

const plugin = Comlink.wrap(
  pluginEndpoint({
    pluginId: "<<your plugin id>>",
    targetOrigin: "https://www.figma.com",
  })
);

See more at Figma's docs here