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.