Agent-Skills.md

Agent Skills: FigJam Plugin Development

FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.

UncategorizedID: aiskillstore/marketplace/figjam-plugin

Repository

aiskillstore/marketplace
aiskillstore
23014

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aiskillstore/marketplace/tree/HEAD/skills/7nohe/figjam-plugin

Skill Files

Browse the full folder contents for figjam-plugin.

Download Skill

Loading file tree…

skills/7nohe/figjam-plugin/SKILL.md

Skill Metadata

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.

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 |