Need
実装の元となるデザイン
Default options
Why it's needed
対象のフレームやコンポーネントを指定すると、どのデザインを基準に実装するかが明確になります。
Codex use case
Figma デザインのコード化
構造化されたデザイン情報を活用し、見た目を確認しながら、Figma で選択した要素を完成度の高い UI に仕上げます。
Difficulty Intermediate
Time horizon 1h
Codex で Figma からデザイン情報、アセット、バリアントを取得し、リポジトリのデザインシステムに沿って実装します。次に、Playwright で実装した UI と Figma のデザインを比較し、見た目が一致するまで調整します。
Best for
- Figma で設計した画面やフローを既存のコードベースに実装する場合
- 構造化されたデザイン情報に基づいて Codex に実装を任せたいチーム
Contents
Figma デザインのコード化
構造化されたデザイン情報を活用し、見た目を確認しながら、Figma で選択した要素を完成度の高い UI に仕上げます。
Codex で Figma からデザイン情報、アセット、バリアントを取得し、リポジトリのデザインシステムに沿って実装します。次に、Playwright で実装した UI と Figma のデザインを比較し、見た目が一致するまで調整します。
Intermediate
1h
Codex で Figma からデザイン情報、アセット、バリアントを取得し、リポジトリのデザインシステムに沿って実装します。次に、Playwright で実装した UI と Figma のデザインを比較し、見た目が一致するまで調整します。
Intermediate
1h
Related links
Best for
- Figma で設計した画面やフローを既存のコードベースに実装する場合
- 構造化されたデザイン情報に基づいて Codex に実装を任せたいチーム
Skills & Plugins
- デザインをコードで実装し、公開済みのコンポーネントとソースファイルを Code Connect で対応付けます。また、プロジェクト固有のデザインシステムのルールを生成し、Figma のデザインを一貫した手順で実装できるようにします。
- 実装した UI を実際のブラウザで検証し、画面サイズに応じて意図どおりに動作するかを確認します。
| Skill | Why use it |
|---|---|
| Figma | デザインをコードで実装し、公開済みのコンポーネントとソースファイルを Code Connect で対応付けます。また、プロジェクト固有のデザインシステムのルールを生成し、Figma のデザインを一貫した手順で実装できるようにします。 |
| Playwright | 実装した UI を実際のブラウザで検証し、画面サイズに応じて意図どおりに動作するかを確認します。 |
Starter prompt
Figma スキルを使って、この Figma デザインを現在のプロジェクトに実装してください。
要件
- まず、対象のノードまたはフレームを指定して `get_design_context` を実行してください。
- 応答が途中で切れた場合は、`get_metadata` でファイルの構造を把握してから、`get_design_context` で必要なノードだけを再取得してください。
- コードを書き始める前に、実装対象のバリアントを指定して `get_screenshot` を実行してください。
- 既存のデザインシステムのコンポーネントとトークンを再利用してください。
- 別の仕組みを新設せず、このリポジトリのユーティリティとコンポーネントの実装パターンを使って、Figma の出力をコードに反映してください。
- 要素の間隔、レイアウト、視覚的な階層、画面サイズに応じた挙動を忠実に再現してください。
- ルーティング、状態管理、データ取得は、このリポジトリの実装パターンに従ってください。
- ページはデスクトップとモバイルの両方の画面サイズに対応させてください。
- Figma が画像や SVG の参照先として localhost の URL を返した場合は、そのまま使用してください。プレースホルダーを作成したり、新しいアイコンパッケージを追加したりしないでください。
検証
- 完成した UI の見た目と挙動を Figma のデザインと比較してください。
- Playwright で UI がデザインと一致しているかを確認し、差異があれば、一致するまで調整と確認を繰り返してください。
Figma スキルを使って、この Figma デザインを現在のプロジェクトに実装してください。
要件
- まず、対象のノードまたはフレームを指定して `get_design_context` を実行してください。
- 応答が途中で切れた場合は、`get_metadata` でファイルの構造を把握してから、`get_design_context` で必要なノードだけを再取得してください。
- コードを書き始める前に、実装対象のバリアントを指定して `get_screenshot` を実行してください。
- 既存のデザインシステムのコンポーネントとトークンを再利用してください。
- 別の仕組みを新設せず、このリポジトリのユーティリティとコンポーネントの実装パターンを使って、Figma の出力をコードに反映してください。
- 要素の間隔、レイアウト、視覚的な階層、画面サイズに応じた挙動を忠実に再現してください。
- ルーティング、状態管理、データ取得は、このリポジトリの実装パターンに従ってください。
- ページはデスクトップとモバイルの両方の画面サイズに対応させてください。
- Figma が画像や SVG の参照先として localhost の URL を返した場合は、そのまま使用してください。プレースホルダーを作成したり、新しいアイコンパッケージを追加したりしないでください。
検証
- 完成した UI の見た目と挙動を Figma のデザインと比較してください。
- Playwright で UI がデザインと一致しているかを確認し、差異があれば、一致するまで調整と確認を繰り返してください。
はじめに
Figma で実装したい箇所を正確に指定すると、Codex はプロジェクトで確立されたパターンに沿って、洗練された UI に仕上げることができます。
Figma スキルを使うと、Codex は Figma MCP サーバーから、構造化されたデザインコンテキスト、変数、アセット、実装対象のバリアントを取得できます。
Playwright interactive スキルを使うと、Codex は実際のブラウザでアプリを開き、実装結果を Figma のデザインと比較できます。レイアウトや動作を繰り返し調整し、目標のデザインに近づけることができます。
Figma プロジェクトの準備
Figma ファイルを整理しておくほど、初回の実装の精度が上がります。デザインを実装に引き継ぎやすくするには、次の点を意識してください。
- 特に色、タイポグラフィ、余白には、可能な限り変数やデザイントークンを使う
- 再利用する UI 要素は、切り離したレイヤーを複製せず、コンポーネントにする
- 手動で配置する代わりに、できるだけオートレイアウトを使う
- メイン画面、状態、バリアントがひと目でわかるように、フレームやレイヤーに名前を付ける
- Codex が推測せずに済むように、可能な限り実際に使うアイコンや画像をファイルに含める
こうしてデザインの構造を明確にすると、Codex は本番環境で使える堅牢な UI を実装しやすくなります。
要件の具体化
想定する操作パターンや希望するスタイルを具体的に伝えるほど、期待に近い結果が得られます。
重要な状態、ブレークポイント、操作があれば明示してください。ファイルに似たバリアントが複数ある場合は、どれを実装の基準にするかを Codex に伝えます。
デザインと厳密に一致させる箇所と、リポジトリの規約を優先する箇所を明確にすると、Codex は両者のバランスを適切に判断しやすくなります。
デザインシステムの準備
対象のリポジトリでコンポーネントの構成が明確になっていると、Codex は最も効果的に機能します。コンポーネントやデザインシステムを一から作り直すことなく、既存のものを自動的に活用できます。
必要に応じて、再利用するプリミティブ、トークンの定義場所、ボタン、入力欄、カード、タイポグラフィ、アイコンについてリポジトリで標準としている実装を Codex に伝えてください。
Figma MCP の出力は、React と Tailwind を組み合わせたコードに似ていることがよくあります。この出力は構造を把握するための参考にし、最終的なコードの書き方はプロジェクトに合わせます。プロジェクトで実際に使っているユーティリティ、コンポーネントラッパー、配色体系、タイポグラフィスケール、余白トークン、ルーティング、状態管理、データ取得パターンに沿って実装するよう Codex に依頼してください。
ワークフロー
Figma での実装対象の選択
実装したい Figma のフレーム、コンポーネント、またはバリアントを選択し、そのリンクをコピーします。Figma MCP はリンクを基に対象を特定するため、親フレームではなく、実装したいノードそのものを指すリンクが必要です。
Codex に Figma の使用を指示するプロンプト
最初の実装は Figma のデザインを基準にします。実装に着手する前に Figma MCP の手順に従うよう Codex に依頼してください。
プロンプトには次の内容を含めます。
1. まず、実装対象のノードまたはフレームを指定して `get_design_context` を実行してください。
2. 応答が大きすぎる場合や途中で切れている場合は、`get_metadata` を実行してファイルの構造を把握し、必要なノードだけを対象に `get_design_context` を再実行してください。
3. 実装対象のバリアントを指定して `get_screenshot` を実行してください。
4. デザインコンテキストと対象のバリアントの両方がそろってから、必要なアセットをダウンロードし、実装を始めてください。
5. リポジトリの規約に沿って実装してください。既存のコンポーネントを再利用し、ユーティリティクラスを直接指定している箇所は、可能な限りプロジェクトで採用している仕組みに置き換えてください。余白、視覚的な階層、画面サイズに応じた動作はデザインに合わせてください。
6. Figma が localhost の画像または SVG のソースを返した場合は、そのまま使ってください。応答にアセットがすでに含まれている場合は、プレースホルダーを作成したり、新しいアイコンパッケージを追加したりしないでください。
最初の実装ができたら、Codex は Playwright を使って実際のブラウザで UI を検証し、見た目や操作時の動作がデザインと異なる箇所を調整します。
Tech stack
Need
Default options
Why it's needed
| Need | Default options | Why it's needed |
|---|---|---|
| 実装の元となるデザイン | Figma | 対象のフレームやコンポーネントを指定すると、どのデザインを基準に実装するかが明確になります。 |
