FigJam plugin development workflow. Use when modifying code.ts (canvas rendering), ui.ts (WebSocket/UI), fixing plugin build errors, or adding new rendering features.
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 |
You Might Also Like
Related Skills
coding-agent
Run Codex CLI, Claude Code, OpenCode, or Pi Coding Agent via background process for programmatic control.
openclaw
add-uint-support
Add unsigned integer (uint) type support to PyTorch operators by updating AT_DISPATCH macros. Use when adding support for uint16, uint32, uint64 types to operators, kernels, or when user mentions enabling unsigned types, barebones unsigned types, or uint support.
pytorchat-dispatch-v2
Convert PyTorch AT_DISPATCH macros to AT_DISPATCH_V2 format in ATen C++ code. Use when porting AT_DISPATCH_ALL_TYPES_AND*, AT_DISPATCH_FLOATING_TYPES*, or other dispatch macros to the new v2 API. For ATen kernel files, CUDA kernels, and native operator implementations.
pytorchskill-writer
Guide users through creating Agent Skills for Claude Code. Use when the user wants to create, write, author, or design a new Skill, or needs help with SKILL.md files, frontmatter, or skill structure.
pytorch
implementing-jsc-classes-cpp
Implements JavaScript classes in C++ using JavaScriptCore. Use when creating new JS classes with C++ bindings, prototypes, or constructors.
oven-shimplementing-jsc-classes-zig
Creates JavaScript classes using Bun's Zig bindings generator (.classes.ts). Use when implementing new JS APIs in Zig with JSC integration.
oven-sh