---
name: aiskillstore/figjam-plugin
source: https://app.decimal.ai/s/aiskillstore-figjam-plugin@1/SKILL.md
source_sha256: 35b7da799bf9
---

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