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)をこのプロジェクトの規約、スタイル、フレームワークに変換します。プロジェクトのカラートークン、コンポーネント

...