using-figma

Dev Mode MCP サーバーを使用して Figma を利用する

このスキルは、デザインコンテキスト、変数、スクリーンショット、メタデータ、デザインシステム検索を Claude に公開する Figma 公式 MCP である、Figma Dev Mode MCP サーバーについてデザイナーに説明します。Figma デザインの構造、トークン、スクリーンショット、文字列の抽出など、デザインを 読む 必要があるタスクではいつでも適用してください。design-review、content-style-guide、preparing-design-handoff、evolving-design-system-components などの関連スキルは、Figma ファイルが参照されると、このスキルを呼び出します。

Figma MCP サーバーは、書き込みツール（ファイルの作成、アセットのアップロード、図の生成、Code Connect のマッピング、Figma オブジェクトの変更）も公開します。これらは意図的に、このスキルの対象外としています。allowed-tools は読み取り専用です。タスクで実際に Figma の変更が必要な場合は、このスキルの対象範囲を広げるのではなく、ユーザーの明示的な同意を得たうえで、基盤となる MCP ツールを直接呼び出してください。

前提条件：MCP サーバーがインストールされていること

Figma Dev Mode MCP サーバーは、このプラグインには同梱されていません。これは Figma 自体の製品であり、ユーザーが自分でインストールして認証する必要があります。有料 Figma プランの Dev または Full シートが必要なデスクトップサーバー、またはリモートサーバーのいずれかを選択できます。セッションで Figma MCP ツールを利用できない場合は、そこで作業を中断し、続行する前に Figma MCP サーバーをインストールして認証するようユーザーに伝えてください。

MCP ツールの中にはリモートサーバーでのみ利用でき、デスクトップサーバーでは使用できないものがあります。想定した場所にツールがない場合は、Figma のドキュメントを確認してください。詳しいセットアップ手順は references/setup.md にあります。

Figma URL の構成

すべての操作は Figma URL から始まります。重要なのは fileKey と nodeId の 2 つです。

https://www.figma.com/design/<fileKey>/<fileName>?node-id=<nodeIdWithDashes>&...

変換：URL の node-id では区切り文字に -（123-456）が使われますが、MCP サーバーでは :（123:456）が必要です。ツールに渡す前に変換してください。

ユーザーが node-id のない URL を貼り付けた場合、その URL はファイル全体を指しています。何かを抽出する前に、どのフレームを指しているのか確認してください。ファイル全体を対象にするのは、通常、ユーザーの意図とは異なり、必要以上に大量のコンテキストが返されます。

目的別の読み取りツール

Figma MCP サーバーは多数のツールを公開しています。質問に答えられる、最小限のツールを選んでください。

目的	ツール	備考
フレームのデザインコンテキストを読み取る（コード＋スクリーンショット＋メタデータ）	get_design_context	最も一般的な開始点です。フレームワークのパラメーターを受け付けます。デフォルトは React + Tailwind です。
構造の概要だけを取得する	get_metadata	レイヤー ID、名前、種類、位置、サイズを含む簡素な XML です。低コストです。
レンダリングされた画像だけを取得する	get_screenshot	コードやトークンの情報を含まない、視覚的な参照です。
選択範囲で使用されているデザイントークンを抽出する	get_variable_defs	変数とスタイル（色、間隔、タイポグラフィ）を取得します。
ファイルで利用可能なライブラリを確認する	get_libraries	リンクされている、登録済みまたは利用可能なデザインライブラリを表示します。
デザインシステム内のコンポーネントを検索する	search_design_system	コンポーネント、変数、スタイルを対象としたテキスト検索です。
FigJam ボードを調べる	get_figjam	FigJam コンテンツに対して、get_metadata と同じ役割を果たします。
認証済みの Figma ユーザーを特定する	whoami	権限やシートの種類が重要な場合に便利です。

Code Connect ツール（読み取り専用）

Figma コンポーネントを対応するコードにマッピングします。主に evolving-design-system-components 内で関連します。デザインの批評やコピーのレビューでは、ほとんど必要ありません。

• get_code_connect_map — 選択したインスタンスの既存のマッピング、ソースファイル、スニペットを返します。
• get_code_connect_suggestions — 選択したコンポーネントのマッピング候補を返します。
• get_context_for_code_connect — コンポーネントのプロパティ定義とバリアントの選択肢を返します。

（2 つの書き込み用 Code Connect ツール、add_code_connect_map と send_code_connect_mappings はこのスキルの対象外です。必要な場合は、ユーザーの明示的な同意を得て直接呼び出してください。）

判断のルール

• 反射的に get_design_context を使わないでください。 質問が「この背景の色は何か」の場合でも、コードとスクリーンショットが返されます。get_variable_defs を使えば、必要なコンテキストを大幅に減らして回答できます。
• まず get_metadata で概要を把握してください。 目的が「このフレームに何があるか教えて」の場合、メタデータの XML は完全なコンテキストより軽量で、次の手順を判断するのに通常は十分です。
• 人が確認するには get_screenshot、機械による推論には get_metadata を使ってください。 両方が必要でない限り、同時に読み込まないでください。
• このスキルではコードを生成しないでください。 本番コードの生成は、クライアントリポジトリにある figma-to-angular のようなリポジトリ固有の出力スキルが担当します。このスキルはデザインコンテキストの抽出までを行います。

他のスキルとの連携

• design-review。 デザインを批評する際は、まず get_screenshot と get_metadata で概要を把握します。批評にトークンが関係する場合（システム外の色、一貫性のない間隔など）は、get_variable_defs を取得します。コードの形そのものが問題となる場合に限り、get_design_context に進みます。
• content-style-guide。 get_design_context または get_metadata を使って、フレーム内のユーザーに見える文字列をすべて明らかにし、各文字列をスタイルガイドに照らして確認します。このスキル内で Figma のコピーを書き換えないでください。代替案を添えて指摘事項を返し、デザイナーに適用してもらいます。
• preparing-design-handoff。 get_metadata を使って、ファイルに想定どおりの Ready-for-Dev セクションがあり、エンジニアリングのストーリーに沿った名前が付いていることを確認します。get_variable_defs を使って、トークンが生の 16 進値ではなくライブラリに紐付いていることを確認します。
• evolving-design-system-components。 新しいパターンを提案する前に、search_design_system と get_libraries を使ってください。「新しいものが必要」というケースの多くは、「ライブラリにあるのに知らなかった」というケースです。Figma コンポーネントと対応するコードとのマッピングが問題となる場合は、Code Connect の読み取りツールを使ってください。

抽出前にユーザーに確認する

取得する前に、何を取得するのか、またその理由を伝えてください。

「まずそのフレームの get_metadata を取得してレイヤー構造を確認し、次に使用されているトークンの get_variable_defs を取得します。これならデザインコンテキスト全体を読み込まずに、間隔に関する質問に答えられるはずです。よろしいですか？」

これは、後から範囲の広すぎる呼び出しを謝罪するよりも効率的で、デザイナーが自分の質問にどの MCP ツールが答えられるかを理解する助けにもなります。

Figma の抽出結果の出力形式

Figma ファイルの内容を報告するときは、次の形式で回答してください。

1. フレームとステージ — ファイル名、フレーム名、判明している場合はステージ（30/60/90）。
2. 構造 — 質問に関係するレベルのレイヤー概要（XML をそのまま貼り付けないでください）。
3. トークンとライブラリの紐付け — デザインシステムに紐付いているものと、生の値を使っているもの。
4. ユーザーに見える文字列（コピーがタスクに含まれる場合）— content-style-guide の指摘事項を付記します。
5. 未解決の質問 — 作業を進める前にデザイナーが確認すべき、ファイル内の曖昧な点。

追加リソース

• references/setup.md — Figma Dev Mode MCP サーバーのインストールと認証 （デスクトップ版とリモート版）、シートタイプの要件、および利用できないツールのトラブルシューティング。
• Figma のツールごとの公式リファレンス： developers.figma.com/docs/figma-mcp-server/tools-and-prompts/ — ツールのパラメーター、戻り値の形式、デスクトップ版とリモート版での利用可否に関する信頼できる情報源です。