AI Agent Skill HUB
multiAI Summary Pending

figjam-plugin

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

231 stars
byaiskillstore
View on GitHubInstallation ↓

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/figjam-plugin/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/7nohe/figjam-plugin/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/figjam-plugin/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How figjam-plugin Compares

Feature / Agentfigjam-pluginStandard Approach
Platform SupportmultiLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

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

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# FigJam Plugin Development

## Architecture

Two-thread model:

- `packages/plugin/src/code.ts` - Main thread (Figma API, renderer)
  - NO browser APIs (window, document, fetch)
  - Access to figma.* API
  - Renders nodes/edges to FigJam canvas

- `packages/plugin/src/ui.ts` - UI iframe (WebSocket client)
  - Browser APIs available
  - Manages WebSocket connection to CLI
  - Handles connection UI

## Communication Flow

```
CLI (serve) ←→ WebSocket ←→ Plugin UI (ui.ts) ←→ postMessage ←→ Plugin Main (code.ts)
```

## JSON Import (UI)

- Accepts DSL JSON (nodes as array) or IR JSON (nodes as object)
- Validates with `@figram/core` and normalizes to IR before posting to main thread
- Validation errors are surfaced in the UI alert with path/message details

## Build

```bash
cd packages/plugin && bun run build
```

Output: `packages/plugin/dist/` (code.js, ui.html)

## Import Plugin

1. Open Figma Desktop
2. Menu → Plugins → Development → Import plugin from manifest
3. Select `packages/plugin/manifest.json`

## Debugging

- **UI errors**: Browser DevTools console (right-click plugin UI → Inspect)
- **Main thread errors**: Figma DevTools (Menu → Plugins → Development → Open console)
- **WebSocket issues**: Check UI console for connection status

## Key Files

- `manifest.json` - Plugin configuration
- `src/code.ts` - Canvas rendering logic
- `src/ui.ts` - WebSocket client and connection UI
- `src/ui.html` - UI template (bundled by build)
- `src/icons/` - AWS service icons