@figma/create-widget

Create new FigJam widgets with a single command.

npm init @figma/widget

Widget Organization

The created widgets use:

• esbuild for bundling
• vite and react if the iframe option is specified
• typescript for typechecking

file/folder	description
manifest.json	The widget's manifest.json
widget-src/	Contains the widget code
ui-src/	Contains the iframe code

Getting Started

After running npm init @figma/widget, follow the provided prompts.

npm run dev

This is the only command you need to run in development. It will start the following processes for you:

• bundling (both widget and iframe code)
• typechecking (both widget and iframe code)
• vite dev server (for iframe development)

npm run build

This runs bundling with minification turned on. You should run this command before releasing your widget.

npm run test

This runs typechecking and makes sure that your widget builds without errors.

Credit

Credit to https://github.com/yuanqing/create-figma-plugin for providing a way to npm init widgets and plugins before this repository ever existed.