implement-design

デザインの実装

概要

このスキルでは、Figma のデザインをピクセル単位で忠実に再現し、本番環境で使えるコードに変換するための、体系的なワークフローを提供します。Figma MCP サーバーとの一貫した連携、デザイントークンの適切な使用、デザインとの 1:1 の視覚的な一致を実現します。

前提条件

• Figma MCP サーバーに接続され、アクセスできること
  • 先に進む前に、Figma MCP ツール（例：get_design_context）が利用可能かどうかを確認し、Figma MCP サーバーが接続されていることを検証します。
  • ツールを利用できない場合、Figma MCP サーバーが有効になっていない可能性があります。プラグインに含まれる Figma MCP サーバーを有効にするよう、ユーザーに案内してください。その後、MCP クライアントの再起動が必要になる場合があります。
• ユーザーが次の形式の Figma URL を指定すること：https://figma.com/design/:fileKey/:fileName?node-id=1-2
  • :fileKey はファイルキーです
  • 1-2 はノード ID（実装する特定のコンポーネントまたはフレーム）です
• プロジェクトにデザインシステムまたはコンポーネントライブラリが確立されていること（推奨）

必須のワークフロー

次の手順を順番どおりに実行してください。手順を省略しないでください。

ステップ 1：ノード ID を取得する

オプション A：Figma URL から解析する

ユーザーから Figma URL が提供されたら、ファイルキーとノード ID を抽出し、MCP ツールの引数として渡します。

URL 形式： https://figma.com/design/:fileKey/:fileName?node-id=1-2

抽出する情報：

• ファイルキー： :fileKey（/design/ の後に続くセグメント）
• ノード ID： 1-2（node-id クエリパラメーターの値）

例：

• URL：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
• ファイルキー：kL9xQn2VwM8pYrTb4ZcHjF
• ノード ID：42-15

ステップ 2：デザインコンテキストを取得する

抽出したファイルキーとノード ID を指定して、get_design_context を実行します。

get_design_context(fileKey=":fileKey", nodeId="1-2")

これにより、次のような構造化データが取得できます。

• レイアウトのプロパティ（Auto Layout、制約、サイズ設定）
• タイポグラフィの仕様
• 色の値とデザイントークン
• コンポーネントの構造とバリエーション
• 間隔とパディングの値

レスポンスが大きすぎる、または途中で切れている場合：

1. get_metadata(fileKey=":fileKey", nodeId="1-2") を実行して、概要レベルのノードマップを取得します
2. メタデータから必要な特定の子ノードを特定します
3. get_design_context(fileKey=":fileKey", nodeId=":childNodeId") を使って、個々の子ノードを取得します

ステップ 3：視覚的な参照をキャプチャする

同じファイルキーとノード ID を指定して get_screenshot を実行し、視覚的な参照を取得します。

get_screenshot(fileKey=":fileKey", nodeId="1-2")

このスクリーンショットを、視覚的な検証の信頼できる基準として使用します。実装中はいつでも参照できる状態にしておいてください。

ステップ 4：必要なアセットをダウンロードする

Figma MCP サーバーから返されたアセット（画像、アイコン、SVG）をダウンロードします。

重要： 次のアセットのルールに従ってください。

• Figma MCP サーバーから画像または SVG の localhost ソースが返された場合は、そのソースを直接使用します
• 新しいアイコンパッケージをインポートまたは追加しないでください。すべてのアセットは Figma のペイロードから取得してください
• localhost ソースが提供されている場合、プレースホルダーを使用または作成しないでください
• アセットは、Figma MCP サーバーの組み込みアセットエンドポイントを通じて提供されます

ステップ 5：プロジェクトの規約に合わせる

Figma の出力を、このプロジェクトのフレームワーク、スタイル、規約に合わせて変換します。

主な原則：

• Figma MCP の出力（通常は React + Tailwind）は、最終的なコードスタイルではなく、デザインと動作を表すものとして扱います
• Tailwind のユーティリティクラスを、プロジェクトで推奨されるユーティリティまたはデザインシステムのトークンに置き換えます
• 機能を重複して実装するのではなく、既存のコンポーネント（ボタン、入力欄、タイポグラフィ、アイコンラッパー）を再利用します
• プロジェクトの色システム、タイポグラフィスケール、間隔トークンを一貫して使用します
• 既存のルーティング、状態管理、データ取得パターンを尊重します

ステップ 6：1:1 の視覚的な一致を実現する

Figma のデザインとピクセル単位で完全に一致するよう努めてください。

ガイドライン：

• デザインを正確に再現できるよう、Figma への忠実さを優先してください
• ハードコードされた値は避け、利用可能な場合は Figma のデザイントークンを使用してください
• デザインシステムのトークンと Figma の仕様が競合する場合は、デザインシステムのトークンを優先しつつ、見た目を合わせるために間隔やサイズを最小限調整してください
• アクセシビリティに関する WCAG の要件に従ってください
• 必要に応じてコンポーネントのドキュメントを追加してください

ステップ 7：Figma と照合して検証する

完了とする前に、最終的な UI を Figma のスクリーンショットと照合して検証してください。

検証チェックリスト：

• レイアウトが一致している（間隔、配置、サイズ）
• タイポグラフィが一致している（フォント、サイズ、太さ、行の高さ）
• 色が完全に一致している
• インタラクティブな状態が設計どおりに動作する（ホバー、アクティブ、無効）
• レスポンシブ時の動作が Figma の制約に従っている
• アセットが正しく表示される
• アクセシビリティ基準を満たしている

実装ルール

コンポーネントの構成

• UI コンポーネントは、プロジェクトで指定されたデザインシステムのディレクトリに配置してください
• プロジェクトのコンポーネント命名規則に従ってください
• 動的な値に本当に必要な場合を除き、インラインスタイルは避けてください

デザインシステムとの統合

• 可能な場合は、必ずプロジェクトのデザインシステムのコンポーネントを使用してください
• Figma のデザイントークンをプロジェクトのデザイントークンに対応付けてください
• 一致するコンポーネントがある場合は、新しく作成するのではなく、それを拡張してください
• デザインシステムに追加した新しいコンポーネントについて記録してください

コード品質

• ハードコードされた値は避け、定数またはデザイントークンに切り出してください
• コンポーネントは組み合わせやすく、再利用できる状態に保ってください
• コンポーネントの props に TypeScript の型を追加してください
• エクスポートするコンポーネントには JSDoc コメントを含めてください

例

例 1：ボタンコンポーネントの実装

ユーザーの依頼：「この Figma のボタンコンポーネントを実装してください：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15」

アクション：

1. URL を解析して、fileKey=kL9xQn2VwM8pYrTb4ZcHjF と nodeId=42-15 を抽出します
2. get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") を実行します
3. 視覚的な参照用に get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15") を実行します
4. アセットのエンドポイントからボタンのアイコンをダウンロードします
5. プロジェクトに既存のボタンコンポーネントがあるか確認します
6. ある場合は新しいバリアントで拡張し、ない場合はプロジェクトの規則に従って新しいコンポーネントを作成します
7. Figma の色をプロジェクトのデザイントークンに対応付けます（例：primary-500、primary-hover）
8. パディング、角丸、タイポグラフィをスクリーンショットと照合して検証します

結果： Figma のデザインに一致し、プロジェクトのデザインシステムに統合されたボタンコンポーネント。

例 2：ダッシュボードのレイアウト構築

ユーザーの依頼：「このダッシュボードを構築してください：https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5」

アクション：

1. URL を解析して、fileKey=pR8mNv5KqXzGwY2JtCfL4D と nodeId=10-5 を抽出します
2. ページ構造を把握するため、get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") を実行します
3. メタデータから主要なセクション（ヘッダー、サイドバー、コンテンツ領域、カード）と、それぞれの子ノード ID を特定します
4. 主要な各セクションについて、get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId") を実行します
5. ページ全体を確認するため、get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5") を実行します
6. すべてのアセット（ロゴ、アイコン、グラフ）をダウンロードします
7. プロジェクトのレイアウト用プリミティブを使ってレイアウトを構築します
8. 可能な場合は既存のコンポーネントを使って各セクションを実装します
9. Figma の制約と照合してレスポンシブ時の動作を検証します

結果： レスポンシブなレイアウトを備え、Figma のデザインに一致する完全なダッシュボード。

ベストプラクティス

まずコンテキストを確認する

推測に基づいて実装してはいけません。必ず最初に get_design_context と get_screenshot を取得してください。

段階的な検証

実装中に頻繁に検証してください。最後にまとめて行うだけではありません。これにより、問題を早期に発見できます。

相違点を記録する

アクセシビリティや技術的な制約などの理由で Figma のデザインから変更する必要がある場合は、その理由をコードコメントに記録してください。

再作成より再利用

新しいコンポーネントを作成する前に、必ず既存のコンポーネントを確認してください。Figma のデザインを完全に再現することより、コードベース全体の一貫性を重視してください。

まずデザインシステムを確認

迷った場合は、Figma のデザインをそのまま反映するよりも、プロジェクトのデザインシステムのパターンを優先してください。

よくある問題と解決策

問題：Figma の出力が途中で切れる

原因： デザインが複雑すぎるか、ネストされたレイヤーが多すぎるため、1 回の応答で返せません。 解決策： get_metadata を使用してノード構造を取得し、続けて get_design_context で個々のノードを取得してください。

問題：実装後のデザインが一致しない

原因： 実装したコードと元の Figma デザインとの間に視覚的な差異があります。 解決策： ステップ 3 のスクリーンショットと並べて比較してください。デザインコンテキストのデータで、間隔、色、タイポグラフィの値を確認してください。

問題：アセットが読み込まれない

原因： Figma MCP サーバーのアセットエンドポイントにアクセスできないか、URL が変更されています。 解決策： Figma MCP サーバーのアセットエンドポイントにアクセスできることを確認してください。サーバーは localhost の URL でアセットを提供します。変更せずにそのまま使用してください。

問題：デザイントークンの値が Figma と異なる

原因： プロジェクトのデザインシステムのトークンと、Figma のデザインで指定された値が異なります。 解決策： プロジェクトのトークンと Figma の値が異なる場合は、一貫性を保つためにプロジェクトのトークンを優先しつつ、視覚的な忠実度を維持できるよう間隔やサイズを調整してください。

デザイン実装を理解する

Figma 実装ワークフローは、デザインをコードに反映するための信頼できるプロセスを確立します。

デザイナー向け： 実装がピクセル単位の精度でデザインに一致するという確信が得られます。 開発者向け： 推測をなくし、やり取りを伴う修正を減らすための体系的なアプローチです。 チーム向け： デザインシステムの整合性を維持する、一貫性のある高品質な実装が実現します。

このワークフローに従うことで、すべての Figma デザインを、同じレベルの配慮と細部への注意をもって実装できます。

追加リソース

• Figma MCP サーバーのドキュメント
• Figma MCP サーバーのツールとプロンプト
• Figma の変数とデザイントークン