丁寧に文書化されたデザイン コンポーネントのライブラリを作成
特に拡大中のチームでは、デザインで使用するすべてのコンポーネントを容易に追跡できない可能性があります。デザイン コンポーネント テンプレートを使用して、コンポーネントの機能と構造などの基本情報から、さまざまなコンテキストでの見た目や動作などの詳細まで、各コンポーネントを文書化できます。追加ガイダンスのセクションもあり、そこでコンテンツやアクセシビリティ、モバイルその他、コンポーネントの固有ルールについて説明できます。完全なコンポーネント ライブラリをゼロから作成しましょう!
コンポーネントの詳細を記述する前に、基本情報を入力する必要があります。最初に「Component basics(コンポーネントの基本情報)」の行を入力します。コンポーネントに名前を付け、その機能を説明し、コールアウトに番号を付けた構造図をアップロードします。これらのコールアウトを使用してキーを作成し、コンポーネントの構造の各要素を定義します。このセクションの目的は、コンポーネントの使用者にコンポーネントの構造を理解してもらうことです。
ここでは、より大きな機能のデザインの一部としてコンポーネントをどのように使用するのかを記述します。デザイン全体の目的を含むコン ポーネントの使用方法を記述してから、さまざまなコンテキストでの見た目や動作を説明します。リポジトリのライブ コードをデザイン システムに使用し、異なるバリエーションを表示します。最後に、コンポーネントのビジュアル スタイルを記述します。すべきこととすべきではないことの例を必ず含めましょう。
それぞれのコンポーネントに特有の癖があります。それらを Additional guidance (追加ガイダンス)に記録しましょう。最初にコンテンツについて記録します。句読点に関するコンポーネント固有のルールがありますか?標準ラベルはありますか?アクセシビリティに関するコンポーネント固有の懸念事項や、モバイル環境でのコンポーネントの利用に関するヒントとともにこれらを記録します。コンポーネントの使用方法に関する業界標準のベスト・プラクティスがある場合は、それらも記載します。最後に、関連するコンポーネントやパターンへのリンクを追加します。