Yahooのデザインシステムの記事を読んだ

フロントエンドから取り組むデザインシステムの改善という記事を読んだ

最近はフロントエンドの開発をやっているし、デザインシステムについても最近ホットな話題なのでリーディングリストから引っ張って読んだ。

この記事では、一般的に下記の機能を含んだものと書かれている。

スタイルガイドとして規定を作り、その規定に従ったコンポーネントを提供することでプロダクトの開発速度や提供速度を向上させて生産効率を上げる。また、複数プロダクトで一貫した UI デザインを提供することでユーザー体験を向上させる。

Yahoo 社内では Riff というデザインシステムが使われているらしい。

社内で利用しているツールやライブラリによって必要なものは変わってくるので、Yahoo では Sketch と React の UI ライブラリを構築しているとのこと。

スクリーンショットで React のコンポーネントの一部が見えているけど、クオリティがすごい。

Element UI の Component みたい。

実際に動いているコンポーネントを確認できる場所として Storybook を使っているとのことで、Storybook 自体はメジャーな感じだけど、ちゃんとメンテしているのがすごい。Storybook のメンテは大変なイメージ。

あとさらっと書いてあるけどコンポーネントの詳細な API はドキュメントから確認できるということは、コンポーネントひとつひとつに対してちゃんとドキュメントを用意しているということだと思う。すごい。

こんなのあるのか。

Storybook で見た目だけを確認するのではなく、実際にコードを編集できるデモ環境すごい。

たしか Storybook にいろいろなプラグインがあって、コンポーネントの中身を変更できる AddKnobs みたいなやつを使えば同じことができそうだったけど、なんか複雑だし挙動が怪しかった記憶がある(もう 1〜2 年も前の話なので今はわからない)

ユーザーに提供しているプロダクトではなくデザインシステムでビジュアルリグレッションテストをしているのすごい。見習いポイント。

ビジュアルリグレッションテストは reg-suit 一択っぽい感じがしているが、どうなんだろう。

すごすぎ。これはかなり欲しいし、実際「このボタンの背景の文字色これだとどうなの？」みたいなことで議論したりする時間も省けるし、最高だ。

コントラスト比をちゃんと決めるって大切だな、全く考慮していなかった(今までなんとなくでやっていた)

ここまでやっているの本当にすごいな。

アンケートで満足度調査までは分かるけど、コンポーネントの使用数を測定して、デザインシステム上のコンポーネントを利用することでどれほど開発が効率化されたのかを測るところまでやってるのはさすがすぎる。

利用側でビルドする必要があったtreatというライブラリを使っていたが、利用側でビルドしなくてもいいように Sass に切り替えたらしい。

実際、色々なプロダクトごとにチームを組んでいる場合には様々な新規開発や改善のタスクが積み上げられているし、それを中断して多くの時間をとって導入するとなると尻込みするのは間違いない。

やはり独自でビルドして配布できる状態にしておくのがいいんだなあ。

これでもまだ発展途上だというのだからすごい。

見習うところがたくさんありそう。