Skip to main content

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.onmessage → figma.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')

})

Found this: GitHub - okotoki/figma-messenger: Type-safe communication for good 🧐. and I have this: Figma Plugin Utility: html <-> script I/O for TypeScript · GitHub but there are more.

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!

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.

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

​@Jakub Hajduk Thank you for your hard work! I loved the API and your code structure. I’ll be using it in my next plugin.

Just wanted to report back saying that using Figwire + Zustand gives an incredibly powerful and flexible DX. It’s all promise-based and you can even send messages from the plugin to the UI with ease to be consumed by React. Figma should seriously consider integrating a similar mechanism into the regular workflow. Highly recommended. 🤟

Reply


Terms & ConditionsCookie settings