mcpField
F
figma-use-figjam

figma-use-figjam

github.com/figmaデザイン・UI2.1k2.0k 回インストール今日更新
リポジトリ

figma-use-figjam について

MCP 経由で Figma Plugin API を使うエージェント向けの、FigJam 専用スキルです。ボードの検査、テキスト編集、画像追加、各種ノードの操作資料をまとめています。

主な機能

  1. 01FigJam ファイルの検査とノード ID の取得
  2. 02フォント読み込みを含むテキスト編集手順
  3. 03upload_assets による画像追加
  4. 04セクション、付箋、コネクターなどの資料

活用シーン

  1. 01既存ボードを調べてノード ID を特定
  2. 02FigJam ボードのコンテンツ作成と整理
  3. 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.md
create-code-block.md
create-connector.md
create-label.md
create-section.md
create-shape-with-text.md
create-sticky.md
create-table.md
create-text.md
edit-text.md
figjam-colors.md
plan-board-content.md
position-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() ヘルパー

コメント