figma-implement-design

Implement Design

Overview

このスキルは、Figma のデザインを、ピクセルパーフェクトの精度で本番環境向けのコードに変換するための、構造化されたワークフローを提供します。Figma MCP サーバーとの一貫した連携、デザイントークンの適切な利用、デザインとの 1:1 のビジュアルパリティを確保します。

Prerequisites

• Figma MCP サーバーに接続しており、アクセス可能であること
• ユーザーは、次の形式の Figma URL を提供する必要があります: https://figma.com/design/:fileKey/:fileName?node-id=1-2
  • :fileKey はファイルキーです
  • 1-2 はノード ID です（実装対象の特定のコンポーネントまたはフレーム）
• または figma-desktop MCP を使用する場合: ユーザーは Figma デスクトップアプリで直接ノードを選択できます（URL は不要）
• プロジェクトに、確立されたデザインシステムまたはコンポーネントライブラリがあること（推奨）

Required Workflow

以下の手順を順番に実行してください。手順を飛ばさないでください。

Step 0: Set up Figma MCP (if not already configured)

いずれかの MCP 呼び出しが、Figma MCP に接続されていないために失敗した場合は、作業を中断して設定してください:

1. Figma MCP を追加します:
   • codex mcp add figma --url https://mcp.figma.com/mcp
2. リモート MCP クライアントを有効にします:
   • config.toml で [features].rmcp_client = true を設定するか、codex --enable rmcp_client を実行します
3. OAuth でログインします:
   • codex mcp login figma

ログインに成功すると、ユーザーは codex を再起動する必要があります。回答を完了させ、次回の再試行時に Step 1 から続行できることをユーザーに伝えてください。

Step 1: Get Node ID

Option A: Parse from Figma URL

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

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

抽出する項目:

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

注意: ローカルのデスクトップ MCP（figma-desktop）を使用する場合、ツール呼び出しには fileKey をパラメーターとして渡しません。サーバーが現在開いているファイルを自動的に使用するため、nodeId のみが必要です。

例:

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

Option B: Use Current Selection from Figma Desktop App (figma-desktop MCP only)

figma-desktop MCP を使用しており、ユーザーが URL を提供していない場合、ツールは開いている Figma ファイルで現在選択されているノードを自動的に使用します。

注意: 選択ベースのプロンプトは figma-desktop MCP サーバーでのみ機能します。リモートサーバーでコンテキストを抽出するには、フレームまたはレイヤーへのリンクが必要です。ユーザーは、ノードを選択した状態で Figma デスクトップアプリを開いている必要があります。

Step 2: Fetch Design Context

ファイルキーとノード 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") で個々の子ノードを取得します

Step 3: Capture Visual Reference

ビジュアルリファレンスとして、同じファイルキーとノード ID を指定して get_screenshot を実行します。

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

このスクリーンショットは、ビジュアル検証の基準（信頼できる情報源）となります。実装の全工程を通じて、いつでも参照できるようにしておいてください。

Step 4: 必要なアセットをダウンロードする

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

重要: 以下のアセットルールに従ってください:

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

Step 5: プロジェクトの規約に合わせて変換する

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

主要な原則:

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

Step 6: 1:1 のビジュアルパリティを達成する

Figma デザインとのピクセルパーフェクトなビジュアルパリティを目指してください。

ガイドライン:

• デザインを正確に一致させるため、Figma への忠実さを優先してください
• ハードコードされた値は避けてください。Figma に該当するものがある場合は、Figma のデザイントークンを使用してください
• デザインシステムのトークンと Figma の仕様が競合する場合は、デザインシステムのトークンを優先し、ビジュアルに合わせるためにスペーシングやサイズを最小限だけ調整してください
• アクセシビリティについては WCAG の要件に従ってください
• 必要に応じてコンポーネントのドキュメントを追加してください

Step 7: Figma と照合して検証する

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

検証チェックリスト:

• レイアウトが一致している（スペーシング、配置、サイズ）
• タイポグラフィが一致している（フォント、サイズ、ウェイト、行の高さ）
• 色が正確に一致している
• インタラクティブな状態がデザイン通りに動作する（hover、active、disabled）
• レスポンシブな挙動が 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: ダッシュボードレイアウトの構築

ユーザーの指示: "Build this dashboard: 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 の変数とデザイントークン