作業の進め方
Figma Implement Designは、選択したFigmaノードからユーザーのリポジトリ内のコードへと進めます。構造化されたデザインコンテキストとスクリーンショットを組み合わせ、レイアウト、トークン、アセットをプロジェクトのフレームワークに合わせて調整します。デザインツールが生成するReactやユーティリティクラスは一つの表現として扱い、アプリケーションのアーキテクチャを置き換える指示とは見なしません。
ソースは再利用を重視しています。可能な限り、既存のボタン、入力、タイポグラフィ、レイアウトの基本部品を拡張します。複雑なフレームは、応答が途中で切れる場合に小さなノード単位の問い合わせに分割します。完了の条件は、単にコンパイルできるコードを作ることではなく、実際の実装を参照デザインと比較し、レスポンシブな挙動、インタラクション、アセットを確認することです。
想定される成果物
- 選択したFigmaデザインに一致するアプリケーションコンポーネントまたはページ
- プロジェクト標準のトークンとコンポーネントへのマッピング
- 必要な差異を記録した視覚的な比較
指示からレビューまで
- 01正確なデザインを取得する
ノード指定のリンクまたは対応するデスクトップ上の選択を確認し、構造化コンテキストとスクリーンショットの両方を取得します。
- 02リポジトリに合わせる
既存のコンポーネントとトークンを再利用し、提供されたアセットを取得し、ルーティング、状態、データ取得の規約を維持します。
- 03動作中のUIを比較する
レイアウト、タイポグラフィ、インタラクティブな状態、レスポンシブの制約、アセットの表示を、選択したデザインと照らして確認します。