Prototype Note Toggle
Add floating notes and instantly generate documentation directly inside your Figma prototypes.
Plugin Preview
About this plugin
Prototype Note TogglePlugin · by kippeum.namAboutDrop interactive toggle notes anywhere on your Figma canvas. Each note is a collapsible component — click the badge circle to reveal the full description, click again to collapse. All prototype interactions are wired automatically.No more sticky notes cluttering your designs or manually connecting variant interactions.────────────────────────HOW TO USE────────────────────────1. Open Prototype Note from the plugin menu.2. Enter the badge number on the first line and your description on the next line.3. Choose bubble direction: Left or Right.4. Click "Drop Note" to place a toggleable note instance on the canvas.5. Drag it into your target frame.6. Click "Generate Note Summary" to auto-extract all notes into a structured specification panel.────────────────────────HOW THE PROTOTYPE WORKS────────────────────────- Badge circle → Click to expand bubble (Dissolve, 0.15s)- Expanded bubble → Click to collapse back to badge- Left / Right direction supported — bubble opens in the chosen direction- Single Master Component architecture — all notes are instances of one shared master- Master is placed off-canvas (-5000, -5000) and never interferes with your design────────────────────────REAL-TIME SYNC────────────────────────- Edit a note's content → Summary panel updates automatically- Add or remove a note from a frame → Summary panel reflects the change instantly- Edit a badge number or description in the Summary panel → The linked note instance updates back (bidirectional sync)- No need to regenerate — everything stays in sync as you work────────────────────────IMPORTANT NOTES────────────────────────▸ Do NOT delete the Summary panel frame if you want live sync to keep working. Removing the panel breaks the connection — you would need to regenerate it.▸ Frame names must be unique. The plugin matches notes to panels by frame name, so duplicate frame names will cause sync conflicts.▸ If you upgrade from an older version, the master component will be recreated automatically. Existing note instances will need to be re-dropped.────────────────────────WHY PROTOTYPE NOTE?────────────────────────▸ Annotate prototypes with numbered, interactive notes that collapse out of the way.▸ Skip manual variant setup — prototype interactions are connected automatically on creation.▸ One master, unlimited instances — consistent styling across your entire file.▸ Auto-generated summary panels turn scattered notes into clean, organized specification docs.▸ Bidirectional live sync means your documentation is always up to date.────────────────────────FEATURES────────────────────────▸ Collapsible toggle notes with badge number + description▸ Left / Right bubble direction selector▸ Auto-wired prototype interactions (no manual setup)▸ Master Component architecture (single source of truth)▸ Generate Note Summary — per-frame specification panels▸ Real-time bidirectional sync (Note ↔ Summary Panel)▸ Badge number, content, add/remove — all sync live▸ Component Properties (ID, Content) for easy editing in the properties panel────────────────────────© kippeum.nam — Unauthorized redistribution is prohibited.
Plugin Details
| Version | 2 |
|---|---|
| Created | March 14, 2026 |
| Last Updated | April 8, 2026 |
| Category | Prototyping & animation plugins |
| Creator | kippeum |
| Stats | 3 installs, 2 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Prototyping & animation plugins category.