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 |