Betsumushi UI

Figma で公開されている Design System のリンク

2021/06/15

タイトル通りです。 Figmaで公開されているデザインシステムの紹介です。

私はUI設計やデザイン・プロト作成にFigmaを使っています。 そのFigmaではComunityというエリアがあります。 そこでは他の人が作った素材やテンプレートが公開されており、簡単に活用できます。

UIコンポーネント集だったり、端末の外枠・画面要素など、便利なものがたくさん公開されています。

今回はその中で有用そうなデザインシステムの紹介です。 デザインシステムを公開してくれている企業やサービスがあり、Figma上でこれを覗いて参考にできます。

大手のサービスのデザインシステムもあるので、UIやコンポーネントの勉強にもなりますしデザイン設計やガイドライン作成の参考にもなります。 暇な時に触ってみるだけでもとても勉強になるのでおすすめです。

一覧ページ

一覧になっているページです。 気になるものやよく使うサービスがあれば、ここから探してFigmaに取り込んで触ってみましょう。

https://www.designsystems.com/open-design-systems/

気になったもの

上記の一覧から気になったものと、そのアカウントが公開している他のファイルについて軽く紹介です。

Github Primer

Primerはオープンソースになっているので参考にしやすくなっています。さらに、Figmaで確認できるようになっているというのはとても助かりますね。 https://primer.style/

Material Design

Microsoft Fluent

ATLASSIAN

  • https://www.figma.com/community/file/857042449394640587

    atomic デザインでいう一番小さいAtomic階層のコンポーネント集です。 結構な数とページがありますが、とても細かく分類されていてわかりやすくて良質でした。

    利用する際には以下のComponent pack を利用することで、もう1つ上の階層のMolecular階層のコンポーネントを探せます。

  • https://www.figma.com/community/file/857042825430121165

    Molecular階層のコンポーネント集です。コンポーネントを階層を分けてが公開されているのは便利ですね。

Cookpad

おわりに

他にも Uber や Spotify ・ Salesforce などのデザインシステムも公開されています。 海外のサービスが多いですが日本のものもあります。 Figma に簡単に取り込んで閲覧・編集・再利用ができるので、とても便利な取り組みです。

みるだけでももちろんですし、細かい数値を確認してみたり実際にページやコンポーネントを設計するとさらに勉強になりますね。

UI設計についての勉強になるのは当然で、デザインシステムの設計やガイドラインの作成の際にも参考になります。 Figma そのものの使い方・コンポーネントの作成方法もとても参考になるので、いろんなデザインシステムをコピーして遊んでみると勉強になります。


こっし@本の虫エンジニア

Written by こっし@本の虫エンジニア
About Privacy