I’ve built a little library for creating simple wizard-style plugin UIs without leaving the main thread. There’s no need to mess about with a framework like React, or calling postMessage() to signal back and forth between the main and UI threads. You just make a call like:
const title = await input.text("Enter a title:");
and the fwidgets library will show a plugin window with a labeled text field:
Once the user enters the text and clicks Next, control will return to the main thread and your plugin code will continue.
Obviously, this is a pretty rudimentary user interface, similar to a CLI tool asking you one question at a time. But the advantage is that the code to get the user’s input is just a simple one-liner. You can focus on the actual work of calling the Figma APIs to provide useful functionality, while sprinkling in requests for user input as needed.
Other input widgets are available, like a drop-down menu or color picker:
const align = await input.dropdown("Text alignment:", ["left", "center", "right"]);
const rgba = await input.color("Rectangle fill color:");
You can display text in the plugin window as well. Even copying something to the clipboard as JSON is super easy:
await output.clipboard({ foo: 42 });
Documentation on how to install and use the library is here:
Let me know if you find fwidgets useful and would like to see additional UI elements! There’s definitely a lot more that can be done with it, if there’s interest.