Figma Plugin Utility: html <-> script I/O for TypeScript

about.md

Figma Plugin Utility: html<->script I/O

Inspired by Electron, a simple event emitter you can use to communicate between your main script and your html UI. Original by @mattdesl, adapted to TypeScript by me.

Webpack guide for Figma plugins: https://www.figma.com/plugin-docs/bundling-webpack/

Install types for events:

npm install @types/events

In your script, i.e. main.ts:

import { script as io } from './io';

// Show the iframe
figma.showUI(__html__);

io.send('start', { hello: 'world' });
io.once('beep', data => {
  console.log('Received', data); // 'boop'
});

And in your ui.ts

import { html as io } from './io';

(async () => {
  // Await the first 'start' message
  const msg = await io.async('start');
  console.log(msg.hello); // 'world'

  // Listen for other events
  io.on('image-bytes', bytes => decodeBytes(bytes));

  // Send data back
  io.send('beep', 'boop');
})();

The interface is a Node EventEmitter, so you can use once(), removeListener, etc.

io.ts

import { EventEmitter } from 'events'

interface CustomEE extends EventEmitter {
  send: { (event: string, data: any): void }
  async: (ev: string) => Promise<any>
}

function createInterface(renderer: boolean) {
  const emitter = new EventEmitter() as CustomEE

  const receive = (result: { event: string | number, data: any }) => {
    if (result && result.event) {
      emitter.emit(result.event, result.data)
    }
  }

  if (renderer) {
    window.onmessage = ev => receive(ev.data.pluginMessage)
  } else {
    figma.ui.onmessage = data => receive(data)
  }

  emitter.send = function (event, data) {
    if (typeof event !== 'string') {
      throw new Error('Expected first argument to be an event name string')
    }
    const postData = {
      event,
      data
    }
    if (renderer) {
      window.parent.postMessage({ pluginMessage: postData }, '*')
    } else {
      figma.ui.postMessage(postData)
    }
  }

  emitter.async = function (ev) {
    return new Promise((resolve) => {
      this.once(ev, resolve)
    })
  }

  return emitter
}

const isRenderer = typeof figma === 'undefined'
export const html = isRenderer ? createInterface(true) : undefined
export const script = isRenderer ? undefined : createInterface(false)