# 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.

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