mcpField
C
create-figjam-content

create-figjam-content

github.com/southleft生産性2069 回インストール21 週間前に更新
リポジトリ

create-figjam-content について

Figma Plugin API を使って FigJam ボードを作成、読み取るスキルです。1 回の図生成では足りない場合に、ボード要素を細かく制御できます。

主な機能

  1. 01付箋の単体・一括作成
  2. 02図形、セクション、表、コードブロックの追加
  3. 03ノード ID による要素の接続
  4. 04ボード要素の自動配置
  5. 05ボード内容と接続の読み取り

活用シーン

  1. 01色や位置を指定したボードの作成
  2. 02既存の FigJam ボードへの要素追加
  3. 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 ツールを使用してください。

ワークフロー

  1. FigJam ファイルであることを確認します。 FigJam 以外では、すべての操作がエラーになります。まず次を確認してください: return { editorType: figma.editorType }; — 値が 'figjam' である必要があります。
  2. 操作を選びます。 references/figjam-snippets.md から、付箋/付箋の一括作成/コネクター/テキスト付き図形/セクション/テーブル/コードブロックの作成、自動整列、またはボードの内容/接続の読み取りを選んでください。
  3. use_figma でスニペットを実行します(skillNames: "create-figjam-content")。インライン定数(テキスト、位置、色、ノード ID)を編集してください。
  4. コネクターには実際のノード ID が必要です。 先にノードを作成し、返された ID を取得してから、その ID(始点/終点とマグネット)を参照するコネクターを作成してください。
  5. 作成した 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 はブラウザーでは利用できません)。

コメント