figjam-plugin

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.