Create new Figma & FigJam widgets with a single command.
npm init @figma/widgetThe 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 |
After running npm init @figma/widget, follow the provided prompts.
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)
This runs bundling with minification turned on. You should run this command before releasing your widget.
This runs typechecking and makes sure that your widget builds without errors.
Credit to https://github.com/yuanqing/create-figma-plugin for providing a way to npm init widgets and plugins before this repository ever existed.