Claude-skill-registry 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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/figjam-plugin" ~/.claude/skills/majiayu000-claude-skill-registry-figjam-plugin && rm -rf "$T"

manifest: skills/data/figjam-plugin/SKILL.md

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