Create a simple Figma plugin UI with zero UI code.
Many useful Figma plugins run only in the main thread, where they can access the API and modify the document. But sometimes you want to extend them with simple user interface elements, like a textbox to enter a name, or a color picker to customize the output. Unfortunately, Figma doesn't offer any built-in UI components, so you have to roll your own, using a framework or vanilla JS/HTML/CSS. And then you have to post messages back to the main thread in response to UI events, just so your plugin can actually make changes to the Figma document.
fwidgets
is intended to dramatically simplify this process by letting you add basic UI functionality without writing any UI code. Think of it like adding a series of interactive prompts to a command line tool, similar to the wizard structure of something like create-react-app
. fwidgets
lets you show one UI element at a time to the user, awaiting their input and then responding to it, while keeping all of your code in the main thread.
This repo includes all the scaffolding needed to use fwidgets
in a Figma plugin. It's easiest to start with a copy of it by running these commands:
$ npx --yes degit fwextensions/fwidgets-template my-plugin-name
$ cd my-plugin-name
$ npm install
Replace my-plugin-name
with whatever you want to call the directory for your plugin.
See the fwidgets
readme for details on how to build the plugin and how to use the fwidgets
API to easily show UI controls.