figma-use-figjam について
MCP 経由で Figma Plugin API を使うエージェント向けの、FigJam 専用スキルです。ボードの検査、テキスト編集、画像追加、各種ノードの操作資料をまとめています。
主な機能
- 01FigJam ファイルの検査とノード ID の取得
- 02フォント読み込みを含むテキスト編集手順
- 03upload_assets による画像追加
- 04セクション、付箋、コネクターなどの資料
活用シーン
- 01既存ボードを調べてノード ID を特定
- 02FigJam ボードのコンテンツ作成と整理
- 03ノードのテキスト編集や画像追加
MCP 対応
Figma MCP の use_figma ツールに FigJam 専用のコンテキストを提供し、呼び出し時にスキル名を含める方法を説明します。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ figma/ mcp-server-guide --skill figma-use-figjamインストール後、Claude Code で/figma-use-figjamを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/batch-modify.mdcreate-code-block.mdcreate-connector.mdcreate-label.mdcreate-section.mdcreate-shape-with-text.mdcreate-sticky.mdcreate-table.mdcreate-text.mdedit-text.mdfigjam-colors.mdplan-board-content.mdposition-figjam-nodes.md詳細
use_figma — FigJam 向け Figma Plugin API スキル
このスキルには、use_figma MCP ツール向けの FigJam 固有のコンテキストが含まれています。figma-use スキルでは、MCP 経由でプラグイン API を実行するための基礎的なコンテキストに加え、ここでは説明していない、より高度なユースケース向けの Figma プラグイン API 全般を提供しています。
FigJam の操作で use_figma を呼び出す際は、必ずカンマ区切りの skillNames パラメーターに figma-use-figjam を含めてください。このスキルが MCP リソース経由で読み込まれた場合は、名前に resource: を付ける必要があります(例:resource:figma-use-figjam)。 これはスキルの使用状況を追跡するためのログ用パラメーターであり、実行には影響しません。
FigJam の URL は
figma.com/board/...です。 FigJam でfigma.createPage()を呼び出してはいけません。TypeError: figma.createPage no such property 'createPage' on the figma global objectが発生します。createPage()は Design ファイル専用の API です(figma.com/design/...)。FigJam ファイルには暗黙のページが 1 つだけあります。代わりにセクションでコンテンツを整理してください(create-section を参照)。
FigJam ファイルの確認
get_figjam は FigJam ファイルの確認に使用するツールです。 ページ、セクション、付箋、コネクター、その他のノードの ID を含む、ノードツリー全体を XML として返します。これらの ID は、後続の use_figma 呼び出しで参照する必要があります。
- 既存のノード(ページ ID、セクション ID など)を参照する
use_figmaコードを書く前に、必ず 事前にget_figjamを使用してください。確認用スクリプトを実行して ID を探そうとしてはいけません。use_figmaのconsole.logの出力は エージェントに返されません(figma-use の重要ルール #4 を参照)。返されるのはreturn値だけです。 get_metadataは FigJam ファイルでは動作しません。デザインモード専用のため、「unsupported for FigJam files」というエラーがすぐに発生します。get_screenshotには有効なnodeIdが必要です。空のnodeIdを渡すと、「invalid nodeId」エラーが返されます。まずget_figjamで ID を取得してください。- 以前の
use_figma呼び出しで ID をreturnし忘れ、今になって必要になった場合は、確認用スクリプトを再実行するのではなく、get_figjamを呼び出してください。
参照ドキュメントを効率的に読み込む
タスクに必要な参照のみを読み込んでください。複数の参照を読み込む必要がある場合は、ターンをまたいで順番に読むのではなく、すべての読み込みを 1 回の並列ツール呼び出しバッチで実行してください。一般的なボード作成タスクの場合、plan-board-content と、使用する 3~4 種類のノードに関する参照を 1 つのメッセージにまとめて読み込みます。
遅延ツール — スキーマをまとめて読み込む
Figma MCP ツール(use_figma、get_figjam、get_screenshot、get_metadata、create_new_file、whoami)は、呼び出し前に ToolSearch でスキーマを読み込む必要がある遅延ツールとして表示されることがよくあります。ツールごとに 1 回ずつ呼び出すのではなく、select: 構文を使い、1 回の ToolSearch 呼び出しですべてのスキーマを読み込んでください。
ToolSearch query="select:use_figma,get_figjam,get_screenshot,get_metadata,create_new_file"
ToolSearch を 6 回続けて呼び出すと、作業を始める前に 6 往復が必要になります。まとめて呼び出せば 1 往復で済みます。
テキストの変更 — 標準手順
FigJam でテキストを変更する場合(付箋/図形/ラベル/テーブルセル/コネクターのテキスト、独立したテキストノード)は、Design ファイルと同じ手順に従います。フォントを読み込む → await → 変更する → 影響を受けた ID を返す、という手順です。読み込みを省くと、Cannot write to node with unloaded font "<family> <style>" が発生します。figma-use → gotchas.md → 標準的なテキスト編集手順 を参照してください。FigJam 固有の注意点:サブレイヤーのデフォルトは種類によって異なります(付箋 → Inter Medium、図形 → Inter Medium、コネクター → 設定するまで無効)。そのため、{ family: 'Inter', style: 'Regular' } をハードコーディングせず、必ず node.text.fontName から読み込んでください。
FigJam ボードへの画像の追加
FigJam ファイルに画像を追加する方法としてサポートされているのは、upload_assets のみです。 FigJam の fileKey を指定して upload_assets を呼び出すと、ツールから使い捨てのアップロード URL が返されます。その URL に画像のバイトデータをそのまま POST すると、画像が自動的に確定され、配置されます。既存の FigJam ノードにアップロードした画像を塗りつぶしとして添付するには、アップロードごとに 1 つのエントリーを指定した nodeIds を渡します。nodeIds を省略すると、画像は新しいレイヤーとしてボード上に配置されます。
リクエストとレスポンスの完全な形式については、figma-use → api-reference.md → Images を参照してください。
リファレンスドキュメント
- plan-board-content — ボードのコンテンツに関するリクエストでは、ボードテンプレート、レトロ、ブレインストーミング、アイスブレイク、ミーティングボード、足場のいずれについても、まずこちらを参照してください
- 順序付きアウトライン、セクション、意図、階層化されたテキストなど、生成するボードコンテンツの計画方法を説明しています
- API の詳細については、他のリファレンスに委ねています
- create-section — FigJam セクションの作成と設定(サイズ、名前、色、コンテンツの表示設定、ノードの整理、列レイアウト)
- create-sticky — FigJam 付箋の作成と設定(色、サイズ、テキスト、作成者の表示設定、一括作成)
- create-connector — FigJam コネクターの作成と設定(端点、矢印、線の種類、ラベル、色、図の接続)
- create-text — FigJam テキストノードの作成と設定(フォントの読み込み、プリセットフォントと色、サイズ、リスト、マインドマップ操作)
- position-figjam-nodes — キャンバス上のノードの位置、サイズ、親の変更(セクション内を含む)
- create-shape-with-text — テキストを埋め込んだ FigJam 図形の作成と設定(図形の種類、色のプリセット、テキストに合わせたサイズ調整、図のレイアウト)
- create-code-block — FigJam コードブロックノードの作成と設定(言語、構文ハイライト、位置、セクションへの埋め込み)
- create-table — FigJam テーブルの作成と設定(行、列、セルのテキスト、色のプリセット、サイズ変更)
- edit-text — 既存のテキストノードの編集(フォントの読み込み、スタイル付き範囲、検索と置換、FigJam Charcoal のデフォルト色)
- create-label — FigJam ラベルノードの作成と設定(番号または文字を入れた小さな円形のコールアウトマーカー、連番、位置)
- batch-modify — 既存の多数のノードを一度に変更するパターン(一括スタイル変更、位置の変更、プロパティの更新)
- figjam-colors — すべてのノードタイプ(付箋、セクション、コネクター、図形、ラベル)に使用する標準の FigJam カラーパレットに加え、
hex/255表記ルールとh()ヘルパー