@figma/create-widget
Create new FigJam widgets with a single command.
npm init @figma/widget
Widget Organization
The created widgets use:
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.