Figjam plugin
FigJam plugin development workflow. Use when modifying code.ts (canvas rendering), ui.ts (WebSocket/UI), fixing plugin build errors, or adding new rendering features.From its SKILL.md
npx -y skills add 7nohe/figram --skill figjam-pluginAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 286 tokens by cl100k_base, as published. Nobody here has run it
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 |