デザイン コンポーネント テンプレート

コンポーネントの詳細を記述する前に、基本情報を入力する必要があります。最初に、Component basics (コンポーネントの基本情報)の行を入力します。コンポーネントに名前を付け、その機能を説明し、コールアウトに番号を付けた構造図をアップロードします。これらのコールアウトを使用してキーを作成し、コンポーネントの構造の各要素を定義します。このセクションの目的は、コンポーネントの使用者にコンポーネントの構造を理解してもらうことです。

ここでは、より大きな機能のデザインの一部としてコンポーネントをどのように使用するのかを記述します。デザイン全体の目的を含むコンポーネントの使用方法を記述してから、さまざまなコンテキストでの見た目や動作を説明します。リポジトリのライブ コードをデザイン システムに使用し、異なるバリエーションを表示します。最後に、コンポーネントのビジュアル スタイルを記述します。すべきこととすべきではないことの例を必ず含めましょう。

それぞれのコンポーネントに特有の癖があります。それらを Additional guidance (追加ガイダンス)に記録しましょう。最初にコンテンツについて記録します。句読点に関するコンポーネント固有のルールがありますか? 標準ラベルはありますか? アクセシビリティに関するコンポーネント固有の懸念事項や、モバイル環境でのコンポーネントの利用に関するヒントとともにこれらを記録します。コンポーネントの使用方法に関する業界標準のベスト プラクティスがある場合は、それらも一覧にします。最後に、関連するコンポーネントやパターンへのリンクを追加します。