デザインシステムの定義と作成方法、導入事例

利点

市場に投入されるまでの時間が短縮される

デザインシステムは、レゴのようにすべてを再利用可能にし、同じコンポーネントを再構築する時間を最小限に抑えます。

プラットフォームや製品をまたいでもUXが一貫する

標準化されたコンポーネントによって、より一貫したルック＆フィールが生まれます。

バージョン管理の問題が減る

デザインシステムでコンポーネントを更新すると、その変更はすべてのオブジェクトに反映されます。デザインシステムはもっとも正しい情報源です。

協力とコミュニケーションが簡単になる

デザインシステムによって、デザイナー、プロダクトマネージャー、エンジニアの間で一般的なベースとコンポーネントを共有できます。

UIインベントリを作成する

最初に、現在インターフェイスで使用されているすべてのデザインパターンをリストアップし、見つかった矛盾をメモしましょう。

組織からのサポートを受ける

すべての人に見つけた矛盾を示し、共通のデザイン言語を持つ有用性を説明しましょう。デザインシステムの啓蒙に関する記事で説明したように、冗長な作業に費やされているデザインや開発の時間と、製品の一貫性がどれほどNPSスコアを向上させるのかを測定してください。

デザインの原則を確立する

実践内容を修正しましょう。ここからデザインシステムのスタイルガイドに取り掛かり始めます。

カラーパレットを作成する

UIインベントリを構築する際、私たちは統一するべき116種類の異なるグレーの陰影があると気づきました。パレットを作成し、その命名規則を決めましょう。

タイポグラフィのスケールを決める

既存のスタイルに合わせてスケールを最適化することもできますし、黄金比やメジャーセカンド（８：９）を使用して調和のとれたスケールを構築しても良いでしょう。スケールを決めるときは、フォントサイズだけでなく、太さや行の高さなどのプロパティも設定することを忘れないでください。

アイコンライブラリなどのスタイルを実装する

UIインベントリにあるどのアイコンをデザインシステムに含めるべきかを決め、実装を標準化します。

最初のパターンを構築し始める

これは決して終わらないタスクです。パターンは、常に実際の製品を正しく反映しているか、近い将来の製品のあるべき姿を反映するべきです。

事例

The inuit-starter-kit specifically contains some inuitcss default variables and mixins, as well as Nicolas Gallagher’s Normalize.css and global box-sizing rules.

Reactd ベース