Skip to main content
Question

Promise-based messaging between plugin and ui

  • January 12, 2023
  • 4 replies
  • 1111 views

rob-redbar

Does anyone know of a way to do promise-based messaging between the plugin and the UI? (@Gleb 🙂)

Using the globals:

parent.postMessage(...)figma.ui.onmessagefigma.ui.postMessage(...)window.onmessage can lead to spaghetti code… promises would be so much cleaner.

Really only the UI → Plugin direction would be fine, e.g.:

someCoolMessaging.post(type: 'get-some-data', payload: { id: 5 }).then(data => {
    console.log('got some data', data)
})
.catch((error) => {
  console.log('error getting data from plugin')
})

4 replies

Gleb
  • Power Member
  • 4706 replies
  • January 13, 2023

rob-redbar
  • Author
  • 6 replies
  • January 13, 2023

figma-messenger seems to be just a type-safe version of 1-way comms, but html<->script I/O seems to have a way to do async/promises. Will try it, thanks!


Michael_Yagudaev

I’ve created a library for it, and maybe I should publish it. It is built on top of Utilities — Create Figma Plugin with 3 basic primitives: req, res and subscribe.

I should probably publish it too.

This emit utility will help a lot. Any mechanism that abstracts iframe <=> iframe communication will help too.

In any case, what you are asking is

// ui.js
await Main.drawRect()

// main.js
function drawRect() { 
  const rect = figma.createRect()
  ....
}

From what I’ve seen no other library currently supports this.


Jakub Hajduk

Hello,

in case someone is still looking for an solution to communicate UI and plugin code, I wrote figwire - lightweight, TypeScript-friendly library for seamless communication between Figma plugin and its UI.

 https://www.npmjs.com/package/figwire


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings