Skip to content

A demo about how to add Gif type element into FigJam canvas

Notifications You must be signed in to change notification settings

lichin-lin/figjam-gif-example

Repository files navigation

create-widget-app

Template app that creates a widget & react iframe.

Code organization:

dir / path description
ui-src/ This is where the iframe code lives
ui-src/index.html Main entry point for the iframe code
ui-src/tsconfig.json tsconfig for the iframe code
widget-src/ This is where the widget code lives
widget-src/code.tsx Main entry point for the widget code
widget-src/tsconfig.json tsconfig for the widget code
dist/ Built output goes here
  • The widget code just uses esbuild to bundle widget-src/code.tsx into one file.
  • The iframe code uses a tool called vite to bundle everything into a single html file

Getting started

One-time setup

  1. Make a copy of this folder
  2. Update manifest.json, package.json and package-lock.json where it says WidgetTemplate
  3. Install the required dependencies npm ci

Importing your widget

  1. "Import widget from manifest"
  2. Build code npm run build
  3. Choose your manifest

Development

The quickest way to build your widget during development is by running:

npm run dev

This command starts the follow in watch mode:

  1. typechecking for widget-src & ui-src
  2. bundling for widget-src & ui-src
  3. starts a vite dev server that servesr ui-src/index.html at localhost:3000

Other scripts

script description
npm run build one-off full build of both the iframe and widget
npm run build:production one-off full production (minified) build of both the iframe and widget
npm run build:main one-off build of the widget code
npm run build:ui one-off build of the iframe code
npm run tsc typecheck both the iframe and widget

Issues / Bugs

For more information about widgets, please visit the widget documentation at https://www.figma.com/widget-docs.

If you find anything bugs or have any questions, please reach out via https://www.figma.com/widget-docs/get-help/.

About

A demo about how to add Gif type element into FigJam canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published