# 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. Use when this capability is needed.

- Skill: `tomevault-io/figjam-plugin` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/figjam-plugin`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/figjam-plugin/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/figjam-plugin

---


# 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

```bash
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](https://tomevault.io/claim/7nohe) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->