Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@figma/create-widget

Package Overview
Dependencies
Maintainers
26
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@figma/create-widget

Create a widget from figma widget templates

  • 1.0.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
26
Created
Source

@figma/create-widget

npm

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/folderdescription
manifest.jsonThe 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.

FAQs

Package last updated on 28 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc