FigJam Plugin Development

Architecture

Two-thread model:

• packages/plugin/src/code.ts - Main thread (Figma API, renderer)

  • NO browser APIs (window, document, fetch)
  • Access to figma.* API
  • Renders nodes/edges to FigJam canvas

• packages/plugin/src/ui.ts - UI iframe (WebSocket client)

  • Browser APIs available
  • Manages WebSocket connection to CLI
  • Handles connection UI

Communication Flow

CLI (serve) ←→ WebSocket ←→ Plugin UI (ui.ts) ←→ postMessage ←→ Plugin Main (code.ts)

JSON Import (UI)

• Accepts DSL JSON (nodes as array) or IR JSON (nodes as object)
• Validates with @figram/core and normalizes to IR before posting to main thread
• Validation errors are surfaced in the UI alert with path/message details

Build

cd packages/plugin && bun run build

Output: packages/plugin/dist/ (code.js, ui.html)

Import Plugin

1. Open Figma Desktop
2. Menu → Plugins → Development → Import plugin from manifest
3. Select packages/plugin/manifest.json

Debugging

• UI errors: Browser DevTools console (right-click plugin UI → Inspect)
• Main thread errors: Figma DevTools (Menu → Plugins → Development → Open console)
• WebSocket issues: Check UI console for connection status

Key Files

• manifest.json - Plugin configuration
• src/code.ts - Canvas rendering logic
• src/ui.ts - WebSocket client and connection UI
• src/ui.html - UI template (bundled by build)
• src/icons/ - AWS service icons