作業の進め方
Component Canvasは、プロジェクトに存在するコンポーネントを全画面で確認できる場を作ります。対応するバリエーションや有用な状態をまとめ、デザイナーが一目で比較した後、実際の操作部品を触れます。コンポーネントの実装はキャンバスから独立させます。
比較の方法を細かく定めています。サイズの比較では文字、スタイル、データを固定し、スタイルの比較ではスタイルだけを変えます。ネイティブなポータル、フォーカス、入れ子のスクロールも維持するため、初期状態のスクリーンショットだけでなく、操作しても使えるプレビューが必要です。
想定される成果物
- 指定したコンポーネントを含む独立したキャンバス用ルートまたは入口。
- 名前付きのバリエーショングループと、対象一覧・省略理由の記録。
- 変更ファイル、実施した確認、判断、未検証の挙動をまとめた報告。
ブリーフからレビューまで
- 01安全な例を一つ表示する
コンポーネントの公開APIとプロジェクトの慣習を読みます。実データへの書き込みを防ぐため、テストデータ、モック、既存コールバックを使ってから、一つのコンポーネントを表示します。
- 02比較できるグループを作る
対応するバリエーションを一貫したグループに追加します。一度に比較する軸は一つにし、実際の無効状態、フォーカス、操作の挙動を保ちます。
- 03コンポーネントを取り巻くキャンバスを検証する
パン、ズーム、表示範囲へのフィット、キーボード操作を、入れ子のスクロールやネイティブなポータルとともにテストします。永続化するのはカメラだけとし、リセット時もプレビュー状態が保たれることを確認します。