コンポーネントを開発する際にさまざまなデザインシステムを比較したいニーズはあると思います。
こんなのあるよ!って紹介してもらったので皆さんにも紹介したいと思います!
デザインシステムを一覧で見たいを叶えるサイト「Adele」
コンポーネントを設計する際に世の中のデザインシステムを参考にすることは多いと思います。
「デザインシステム」で調べてサイトを確認していましたが、Storybookを見たいけどリンクはどこにあるのか?そもそもあるのかもわからいという状態によくなりました…。
公式サイト内を探してStoryboookが存在していなかった時もあり、時折悲しい思いをしました…
「Adele」はデザインシステムの一覧情報が掲載されている!
デザインシステムごとに技術やStorybookの有無をまとめてくれておりテーブルをスクロールすることで情報を確認できます!
デザインシステムのコンポーネントを探す手間がかなり短縮されました!
利用されているフレームワークもわかる!
嬉しかったのは利用されているフレームワークが掲載されていることです。
Vue.jsもReactおおよそ同じようなコードになりますが、できれば同じ言語で開発されているコンポーネントを確認したいですよね。
中身を見てから気がつくより、確認する前に気がつけるので良いと思っています!
まとめ
コンポーネント開発する場合はなるべくたくさんの実装例に触れたいですよね。
同じようなサイトもありますが、デザインシステムの表示数が多いので良いかと思っています!
コンポーネント作成だけでなく、サイトパーツのアイディアや命名について調べたい時も役に立つと思います!
他にも良いサイトがあればコメントで教えていただけると嬉しいです!