jpskill.com
🛠️ 開発・MCP コミュニティ

figjam-plugin

FigJamプラグインの開発作業を効率化し、コードの作成やWebSocket通信のデバッグ、プラグインの構築などをスムーズに進める支援をするSkill。

📜 元の英語説明(参考)

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

🇯🇵 日本人クリエイター向け解説

一言でいうと

FigJamプラグインの開発作業を効率化し、コードの作成やWebSocket通信のデバッグ、プラグインの構築などをスムーズに進める支援をするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o figjam-plugin.zip https://jpskill.com/download/16765.zip && unzip -o figjam-plugin.zip && rm figjam-plugin.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/16765.zip -OutFile "$d\figjam-plugin.zip"; Expand-Archive "$d\figjam-plugin.zip" -DestinationPath $d -Force; ri "$d\figjam-plugin.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して figjam-plugin.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → figjam-plugin フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

FigJamプラグイン開発

アーキテクチャ

2スレッドモデル:

  • packages/plugin/src/code.ts - メインスレッド (Figma API, レンダラー)

    • ブラウザAPIは利用不可 (window, document, fetch)
    • figma.* APIへのアクセス
    • ノード/エッジをFigJamキャンバスにレンダリング

  • packages/plugin/src/ui.ts - UI iframe (WebSocketクライアント)

    • ブラウザAPIが利用可能
    • CLIへのWebSocket接続を管理
    • 接続UIを処理

通信フロー

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

JSONインポート (UI)

  • DSL JSON (ノードを配列として) または IR JSON (ノードをオブジェクトとして) を受け入れます
  • @figram/core で検証し、メインスレッドに送信する前にIRに正規化します
  • 検証エラーは、パス/メッセージの詳細とともにUIアラートに表示されます

ビルド

cd packages/plugin && bun run build

出力: packages/plugin/dist/ (code.js, ui.html)

プラグインのインポート

  1. Figma Desktopを開きます
  2. メニュー → Plugins → Development → Import plugin from manifest
  3. packages/plugin/manifest.json を選択します

デバッグ

  • UIエラー: ブラウザDevToolsコンソール (プラグインUIを右クリック → Inspect)
  • メインスレッドエラー: Figma DevTools (メニュー → Plugins → Development → Open console)
  • WebSocketの問題: UIコンソールで接続状態を確認

主要ファイル

  • manifest.json - プラグイン設定
  • src/code.ts - キャンバスレンダリングロジック
  • src/ui.ts - WebSocketクライアントと接続UI
  • src/ui.html - UIテンプレート (ビルドによってバンドル)
  • src/icons/ - AWSサービスアイコン
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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

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