figma

Figma MCP

Figma 主導の実装には Figma MCP サーバーを使用してください。セットアップとデバッグの詳細（環境変数、設定、検証）については、references/figma-mcp-config.md を参照してください。

Figma MCP 統合ルール

これらのルールは、Figma の入力をこのプロジェクト用のコードに変換する方法を定めたものであり、Figma 主導の変更のたびに必ず従ってください。

必須のフロー（スキップ禁止）

1. まず get_design_context を実行し、対象のノードの構造化された表現を取得します。
2. レスポンスが大きすぎる場合や切り詰められている場合は、get_metadata を実行して高レベルのノードマップを取得し、必要なノードのみを get_design_context で再取得します。
3. get_screenshot を実行し、実装対象のノードのバリアントの視覚的な参照を取得します。
4. get_design_context と get_screenshot の両方を取得してから初めて、必要なアセットをダウンロードし、実装を開始します。
5. 出力（通常は React + Tailwind）を、このプロジェクトの規約、スタイル、フレームワークに合わせて変換します。可能な限り、プロジェクトのカラートークン、コンポーネント、タイポグラフィを再利用してください。
6. 完了とする前に、Figma と照合して 1:1 の見た目と動作を検証します。

実装ルール

• Figma MCP の出力（React + Tailwind）は、最終的なコードスタイルではなく、デザインと動作の表現として扱ってください。
• 該当する場合は、Tailwind のユーティリティクラスをプロジェクトで推奨されるユーティリティ/デザインシステムのトークンに置き換えてください。
• 機能を重複させるのではなく、既存のコンポーネント（ボタン、入力欄、タイポグラフィ、アイコンラッパーなど）を再利用してください。
• プロジェクトのカラーシステム、タイポグラフィスケール、スペーシングトークンを一貫して使用してください。
• リポジトリにすでに採用されているルーティング、状態管理、データ取得のパターンを尊重してください。
• Figma デザインとの 1:1 のビジュアルパリティを目指してください。競合が生じた場合は、デザインシステムのトークンを優先し、見た目に合わせるためにスペーシングやサイズの調整は最小限にとどめてください。
• 最終的な UI は、見た目と動作の両面で Figma のスクリーンショットと照合して検証してください。

アセットの扱い

• Figma MCP サーバーは、画像および SVG アセットを配信できるアセットエンドポイントを提供します。
• 重要: Figma MCP サーバーが画像または SVG に対して localhost のソースを返した場合は、そのソースを直接使用してください。
• 重要: 新しいアイコンパッケージを import/追加しないでください。すべてのアセットは Figma のペイロード内にあるべきです。
• 重要: localhost のソースが提供されている場合は、プレースホルダーを使用したり作成したりしないでください。

リンクベースのプロンプト

• このサーバーはリンクベースです。実装の支援を求める際は、Figma のフレーム/レイヤーのリンクをコピーし、その URL を MCP クライアントに渡してください。
• クライアントは URL を閲覧できませんが、リンクからノード ID を抽出します。リンクが必ず目的の正確なノード/バリアントを指すようにしてください。

参考資料

• references/figma-mcp-config.md — セットアップ、検証、トラブルシューティング、リンクベースの利用に関する注意事項。
• references/figma-tools-and-prompts.md — フレームワークやコンポーネントの選択、メタデータの取得のためのツールカタログとプロンプトパターン。