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

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

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

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

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

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

一覧ページ

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

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

https://www.figma.com/community/file/854767373644076713

Github で使われているデザインシステム Primer のUIコンポーネント集です。

ページサンプルなども置いてあり、開発者がよくみるGithubのUIコンポーネントを改めてみることができます。整理されておりダークモードの時のコンポーネント設定もあります。
https://www.figma.com/community/file/809920999413919915

Github で使われているアイコン集です。Primer の一部でオープンソースとして公開されておりOcticonsという名前がついてます。
https://www.figma.com/community/file/854766928300977832

色や文字などのstyle に関する設定をまとめたものです。

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

https://www.figma.com/community/file/778763161265841481

Android で用いられているマテリアルデザインのデザインシステムです。アプリなどのUI設計やプロト作成であれば、これをそのまま使うだけでかなりそれっぽくなりますね。

一通り各コンポーネントをみてみるだけでも、アプリのUIの勉強になります。
https://www.figma.com/community/file/787036571667088922

ダークモードバージョンもあります。

https://www.figma.com/community/file/916836509871353159

Microsoft で使われている Fluent のファイルです。Teams などはこれでデザインされてますし、他のものにも利用されています。
https://www.figma.com/community/file/836835755999342788

アイコン集です。数がとても多いですが良いですね。他にもアクセシビリティ関連などいくつもファイルがあるのでMicrosoftのアカウントはチェックしておくと良いです。

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

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

利用する際には以下のComponent pack を利用することで、もう1つ上の階層のMolecular階層のコンポーネントを探せます。
https://www.figma.com/community/file/857042825430121165

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

https://www.figma.com/community/file/847372282968994272

Cookpad のデザインシステムです。細かいコンポーネントは含まれていませんが、色やテキストなどのstyleの仕様が公開されています。
https://www.figma.com/community/file/885445931580188399

スキルマップのファイルです。好き嫌いの軸とできるできないの2軸になっており、自分のスキルの棚卸しやチーム内でのスキル共有などに活かせそうです。