This FigJam widget allow you to create an agenda or multiple agendas for your workshop in FigJam. The widget uses FigJam's built in timer to provide a more robust experience.
| 🧪 I am a Beta tester | 💻 I am a developer |
|---|
🗃 Download the ZIP file containing the codebase by clicking here
🔍 Unzip the file wherever is convenient, but you'll need to know where it is to load it into FigJam
✨ Create a new FigJam file and right click anywhere on the canvas. Select Widgets > Development > Import widget from manifest...
🔍 Head to the folder you unzipped and select the manifest.json file
🚀 You're ready to try FigJenda! Just right click on the canvas to add it from your Widgets > Development > FigJenda!
⚡️ From here on out you can just copy paste it around to create as many agendas as you want!
🐛 The numer inputs in the Add/Edit plugins are a UX nightmare and can feel pretty buggy. You can highlight and delete the number if things get ugly 😩
🪲 The widget can't listen to FigJam's built-in timer so it will get stuck when it ends. Just press next ⏭ to load the next agenda item, or stop ⏹ on the widget to reset it!!!
CleanShot 2021-11-29 at 19 02 50
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 |
| widget-src/code.jsx | This is the widget code |
| dist/ | Built output goes here |
- The iframe code uses a tool called vite to bundle everything into a single html file
- "Import widget from manifest"
- Build code
npm run build - Choose your manifest
Often the code in the iframe can get pretty complex, if helpful, you can also do
npm run dev:ui
- This command starts a development server that will serve the iframe code at http://localhost:3000
- The development server will also hot reload any changes to your iframe code
| script | description |
|---|---|
| npm run build:watch | watch-move build for both the widget and iframe code. Use this while in dev |
| npm run build | one-off full 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 build:main:watch | watch-mode build of the widget code. rebuilds if when you save changes. |
| npm run build:ui:watch | watch-mode build of the iframe code. rebuilds if when you save changes. |