Figjam Plugin

aiskillstore/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.

5k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

404

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/aiskillstore/marketplace --skill figjam-plugin

What comes with it

17 484 bytes besides the instruction

skill-report.json

The instruction itself

7 sections, as written by the author

FigJam Plugin Development

Architecture

|--------|------|------|------|

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 |

How to use it

Copy the folder

Take aiskillstore/figjam-plugin from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.