create-figjam-content について
Figma Plugin API を使って FigJam ボードを作成、読み取るスキルです。1 回の図生成では足りない場合に、ボード要素を細かく制御できます。
主な機能
- 01付箋の単体・一括作成
- 02図形、セクション、表、コードブロックの追加
- 03ノード ID による要素の接続
- 04ボード要素の自動配置
- 05ボード内容と接続の読み取り
活用シーン
- 01色や位置を指定したボードの作成
- 02既存の FigJam ボードへの要素追加
- 03作成した要素と接続の確認
MCP 対応
`use_figma` ツールで Figma Plugin API のコードを実行します。Figma Desktop アプリが必要で、FigJam ファイルのみが対象です。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ southleft/ skills-for-figma --skill create-figjam-contentインストール後、Claude Code で/create-figjam-contentを入力して読み込まれたか確認します。
同梱ファイルreferences/figjam-snippets.md
詳細
create-figjam-content — FigJam ボードの作成と読み取り
FigJam ボードを要素ごとに作成し、読み取ります。付箋(単体・一括)、コネクター、テキスト付き図形、セクション、テーブル、コードブロック、自動整列に加え、get board contents と get connections に対応しています。ネイティブのワンショット機能である generate_diagram では粒度が粗すぎる場合(たとえば、色、位置、マグネットを指定したい場合や、既存のボードを拡張したい場合)に、細かく制御できます。
スキルの範囲
use_figmaのルール — まず公式のfigma-useスキルを読み込んでください。Figma Plugin API の完全なリファレンスです。これらのスクリプトが前提とする基本事項:トップレベルのawaitとreturnを使ったプレーンな JS(IIFE、figma.closePlugin()は使わず、console.logの内容は返されません)、各スクリプトの先頭で入力をconstとしてインライン定義すること、色は 0~1 の範囲で指定すること、テキスト操作の前にフォントを読み込むこと、await figma.getNodeByIdAsync(...)を使うこと、アトミックエラー(スクリプトが失敗すると変更は一切適用されません。エラーを読み、修正して再試行してください)。- 操作ごとに完全なスニペットを使用 → references/figjam-snippets.md。
- 図全体を一度の呼び出しで生成 → 代わりにネイティブの
generate_diagramツールを使用してください。
ワークフロー
- FigJam ファイルであることを確認します。 FigJam 以外では、すべての操作がエラーになります。まず次を確認してください:
return { editorType: figma.editorType };— 値が'figjam'である必要があります。 - 操作を選びます。 references/figjam-snippets.md から、付箋/付箋の一括作成/コネクター/テキスト付き図形/セクション/テーブル/コードブロックの作成、自動整列、またはボードの内容/接続の読み取りを選んでください。
use_figmaでスニペットを実行します(skillNames: "create-figjam-content")。インライン定数(テキスト、位置、色、ノード ID)を編集してください。- コネクターには実際のノード ID が必要です。 先にノードを作成し、返された ID を取得してから、その ID(始点/終点とマグネット)を参照するコネクターを作成してください。
- 作成した ID を返し、一括作成の後はボードを読み取って(
get board contents)、結果を確認してください。
注意事項
- テキストを設定する前にフォントを読み込む必要があります。 付箋、テキスト付き図形、テーブルのセル、コネクターのラベルではすべてテキストを書き込みます。各スニペットは
.charactersを設定する前にawait figma.loadFontAsync(...)を呼び出します。デフォルトフォントを使用できない場合に備え、Inter にフォールバックします。 - 付箋の色には名前付きパレット(
YELLOW、BLUE、GREEN、PINK、ORANGE、PURPLE、RED、LIGHT_GRAY、GRAY)を使用します。それ以外の色を指定した場合は、デフォルトの付箋の塗りつぶし色になります。 - 図形の
shapeTypeの値:SQUARE、ROUNDED_RECTANGLE、ELLIPSE、DIAMOND、TRIANGLE_UP、TRIANGLE_DOWN、PARALLELOGRAM_RIGHT、PARALLELOGRAM_LEFTなど。 - コネクターのマグネット:
AUTO、TOP、BOTTOM、LEFT、RIGHT。 - これらのツールには Figma Desktop アプリが必要です(Plugin API はブラウザーでは利用できません)。
コメント
Markdown 対応