@figma/create-widget

Create a widget from figma widget templates

Usage no npm install needed!

<script type="module">
  import figmaCreateWidget from 'https://cdn.skypack.dev/@figma/create-widget';
</script>

README

@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.