Figma
すべてのデザイン作業はFigmaで行われます。コンポーネント、パターン、フロー、アーカイブという整理されたページで単一の信頼できるソースを維持します。開発者はすべてのファイルへの閲覧アクセスを持っています。
Figmaライブラリには、バリアント、オートレイアウト、レスポンシブ制約を持つすべての本番コンポーネントが含まれています。コンポーネントはReactコンポーネントライブラリと1対1で対応しています。
デザインプロセス
新しい機能やページへのアプローチ方法。
- 理解する： どんな問題を解決しているか？誰のためか？成功はどのように見えるか？
- 探索する： 複数のアプローチをスケッチします。最初のアイデアにこだわらずオプションを示します。
- 洗練する： 方向性を選び、磨きます。すべての状態とエッジケースを考慮します。
- レビューする： デザインとエンジニアリングからフィードバックを得ます。入力に基づいて反復します。
- シップする： 実装についてエンジニアリングと協力します。最終結果をQAします。
デザインレビュー
重要なデザイン変更は実装前にレビューされます。
- 解決策だけでなく、解決している問題を共有する
- コンテキストを示す—これはより大きな体験にどう合致するか？
- エッジケースを含める：ローディング、空の状態、エラー状態
- 変更が安価な早い段階でフィードバックを得る
デザイン〜開発のハンドオフ
デザインを壁越しに投げません。デザイナーと開発者は最初から一緒に働きます。ハンドオフには以下が含まれます。
- インスペクトモードが有効なFigmaリンク
- アニメーションのインタラクション仕様
- レスポンシブ動作のノート
- アクセシビリティ要件
- コピーとマイクロコピーの確定
- 必要に応じてアセットのエクスポート
品質保証
デザインQAはリリース前後に行われます。
- 実装された機能をデザインと比較してレビューする
- 実際のデバイスでレスポンシブ動作をテストする
- アニメーションとトランジションが適切に感じられるか確認する
- スクリーンリーダーでアクセシビリティをチェックする
- 意図的な逸脱を記録する