| name | figjam-plugin |
| description | FigJam plugin development workflow. Use when modifying code.ts (canvas rendering), ui.ts (WebSocket/UI), fixing plugin build errors, or adding new rendering features. Use when this capability is needed. |
| metadata | {"author":"7nohe"} |
FigJam Plugin Development
Architecture
| Thread | File | APIs | Role |
|---|
| Main | code.ts | figma.* only | Canvas rendering |
| UI | ui.ts | Browser APIs | WebSocket client, connection UI |
Critical: code.ts has NO browser APIs (window, document, fetch, WebSocket).
Communication
CLI ←─ WebSocket ─→ ui.ts ←─ postMessage ─→ code.ts ←─ figma.* ─→ Canvas
Build & Import
cd packages/plugin && bun run build
Import: Figma Desktop → Plugins → Development → Import from manifest → packages/plugin/manifest.json
Debugging
- UI errors: Right-click plugin UI → Inspect
- Main errors: Plugins → Development → Open console
JSON Import
- Accepts DSL (nodes array) or IR (nodes object)
- Validates with
@figram/core, normalizes to IR
- Errors shown in alert with path + message
Key Files
| File | Purpose |
|---|
manifest.json | Plugin config |
src/code.ts | Canvas rendering |
src/ui.ts | WebSocket + UI |
src/icons/ | Service icons |
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
