背景
6時間ほど前に、デザインシステムのβ版を公開したと公式X(旧Twitter)でお知らせされていました。
以前にもデザインが簡素かつ非常に優れていると話題にもなっていましたね。
Qiitaでも話題になっていました。
https://qiita.com/mu_tomoya/items/f78f1fad3a8b57ac7dc3
情報のキャッチをたまたま早くにできたため、早速見てみることに。
なお、本記事では、公開されたという情報の発信を中心としています。
デザインシステムサイトのコンポーネントがGitHubで公開される
デザインページの中で、コンポーネントというページがあります。各コンポーネントのページに、対応するGitHubのリンクが用意されています。
以下、リポジトリのリンクです。
早速動かしてみる
主な使用技術は、Tailwind CSSとStorybookであり、各自リポジトリをクローンして確認できるようです。
簡単に言うと、Tailwind CSSはReactやNext.jsなどで主流なCSSフレームワークのひとつであり、Storybookはコンポーネント単位のモックをブラウザ上で確認できるUIカタログツールです。
以下、それぞれの公式サイトのリンクになります。
以下のコマンドで、GitHubからリポジトリをクローンして、Storybookを動かしましょう。
特に環境構築が必要なわけでもなく、Dockerでイメージの構築も必要ないため、1分もかからず動かせます。
$ git clone https://github.com/digital-go-jp/design-system-example-components
$ cd design-system-example-components
$ npm install
$ npm run storybook
出力については、各自でご確認ください。
すでに結構な数のコンポーネントがすでに公開されており、今後も追加で実装されていくようです。
Biome.jsを使っていたりと、意外なところもありました。あまり知らない技術について知る・触れる機会にもなりますし、実際に見てみるとやはり勉強になります。
私も初心者だからこそ、こういった情報に対して即行動が重要であると感じました。
特にこういった簡素かつ明瞭なコンポーネントを教科書として理解できるというのは非常に大きいですね。
おわりに
今回は自分のことではありませんが、情報の鮮度を優先して本記事を公開いたしました。
細かなところまでは確認できていないのですが、Tailiwind CSS, Storybookを使っている私にとってはかなりありがたい情報です。