Netflixがデザインシステム「Hawkins」について紹介

UIのためのデザインシステムの構築・運用・評価について、いいお手本だと思います。じっくり理解したいです。
なぜデザインシステムが重要なのか、どのような利益をもたらすのか、どのように運用するのか、などを紹介してます。
デザインシステムの成功には継続的な努力が必要であり、その結果として継続的なリターンを生み出すようになるようです。

「Hawkins」はNETFLIXの人気ドラマ「ストレンジャー・シングス」に登場する架空の田舎町の名前です。(このドラマおもしろかったです。)
この名前をデザインシステムの名前にしたのはとてもいいです。

以下、概略と抜粋です。

基礎層となるモックを作るための「Figma」
ユーザー・インターフェースを構築するための JavaScript ライブラリとして「React」
を利用しているようです。
ゼロから自分たちで作るか、または既存のソリューションを利用するかを検討して、Material-UIを利用してカスタマイズすることにしたようです。

各コンポーネントはさまざまな組み合わせで使用できるようにしています。
各コンポーネントは小さく軽量にすることで、より大きなコンポーネントに組み立てることが容易になります。

デザインシステムは、アプリケーションに一貫性を持たせ、各アプリケーションのエンジニアリング負担を大幅に軽減することができます。

デザインシステムは下記のような利益をもたらすそうです。
・ユーザーの直観に沿った一貫性を提供する
・チームの連携や新規開発メンバーの受け入れをスムーズにする
・エンジニアの負担を軽減する
・バグの数を大幅に減らす

最初に設計システムを作るのに多くの時間を費やすことになりますが、設計システムが完全に実装され、組織全体で信頼されるようになれば、大きな利益を得ることができるようです。(これを辛抱できるかどうか・・・)

デザインシステムが成功したかどうかを判断するための指標として、各コンポーネントの使用数、パッケージのインストール数、実運用でHawkinsを使用しているアプ リケーションの数などを検証することにしたそうです。(これはデザインシステムの評価についての適切な指標かも)

エンジニアが見つけた問題点を報告できるようにしました。エンジニアがより多くのサポートを受けていると感じるほど、エンジニアはデザインライブラリを利用することに寛容になるでしょう。

・・・などなど、詳しくわからない箇所もありますが、勉強になりそうな内容です。

このデザインシステムはまだまだ成長し続けているようです。
この成長がさらに利益をもたらすのでしょう。

元記事はこちら
httpsHawkins: Diving into the Reasoning Behind our Design System >>

Figma >>

React >>

Leave a Comment

2021年2月15日 デザイン