Skip to main content
Question

How to initialize plugin UI with data from document on initial render?

  • November 4, 2023
  • 1 reply
  • 427 views

Simon_Steer

For a plugin’s UI to receive data from the plugin side, it must already be rendered so it can listen to messages from its parent. If I have a plugin with UI that depends on document data for its initial render, this results in a weird situation where I can’t have access to the data to render the UI correctly until the UI is already visible. I end up having to show some kind of empty state for a split-second while this message relaying is happening between the plugin and the UI.

A naive solution to this would be to simply render the html in a template string with the initial data like so:

const data = figma.root.getPluginData('data')
figma.showUI(`<p>${data}</p>`)

However, I’m having a hard time envisioning this method scaling well for plugins that have styling, interactivity that depends on stateful data flow, etc. If I wish to render a React application, for example, this seems not very viable. It becomes even weirder to think about when navigating the plugin iframe to some kind of UI hosted on the web.

Ultimately I’m okay with just showing an empty state (or no UI at all) for a fraction of a second until I have the requisite data to render my application, but I would prefer not to.

Curious to hear how other developers are tackling this issue.

This topic has been closed for replies.

1 reply

Gleb
  • Power Member
  • 4708 replies
  • November 5, 2023

I do it using postMessage and there is no delay at all. I first collect the data, then showUI, and immediately on the next line I send the message with data. There is no split-second empty UI.


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