🎨

Figmaに公開されている日本のデザインシステム系ファイル

2022/08/12に公開
4

Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。

なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。


検索する限りでは意外と日本企業が公開しているファイルは少ない。
なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。

FALCON by SPEEDA

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

  • コンポーネントごとにページを分けている
  • VariantsはDefaultLargeなどアッパーキャメルケースを採用
    *書体はHiragino Kaku Gothic Proを指定

SmartHR UI by SmartHR

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

  • 全コンポーネントをComponentsページに配置している
  • コンポーネントを使って作成したレイアウトのサンプルをLayoutsページに設置
  • スペーシング指定や付箋として使えるユーティリティコンポーネントをToolsページに用意している
  • 書体はHiragino Sans

Apron by cookpad

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

  • いわゆるガイドライン。ページはDocumentAboutのみ
  • プロダクトに使われているコンポーネントは含まれない
  • コンポーネントはドキュメント内で使っているTextStyleColor Paletteのみ
  • 書体はHiragino Kaku Gothic Pro

ツクロア

Jumpu UI

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

  • TailwindCSSのプラグインという形でリリースされているUIライブラリ
  • ツクロアのプロダクトならびにクライアントワークで使用している模様
  • コンポーネントをページ単位で分けており、命名規則はコンスタントケース
  • tailwindに準拠した命名規則を当てており、各ページにclass名の説明も付属している
  • 書体はNoto Sans JP

tuqulore Design System

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

  • コンポーネントはComponentsページに全てまとめている
  • Variantsはrounded-skeltonなどケバブケースを採用
  • 特定のプロダクトでなく、汎用的に使われることを想定して作っている様子
  • Galleryページにモバイルやデスクトップ用のレイアウトサンプルを配置している
  • 書体はHiragino SansNoto Sans Japaneseを使用、欧文と日本語で書体を変えている

JDD | JP + UI Kit by Japan Digital Design

iOS用
https://www.figma.com/community/file/1004913616377523083

Android用
https://www.figma.com/community/file/1004913531894846346

  • コンポーネントはComponentsページにまとめている
  • オンボーディングやヘルプとしてWelcomeGuideページを用意している
  • レイヤー名に23 Progress indicatorなど、接頭詞に2桁の番号を設定
  • 日本語書体はHiragino Kaku Gothic Pro、英語書体はSF Pro Textを設定。JP、ENと書体をStyleを分けている

mikan DesignSystem by mikan

https://www.figma.com/file/MJiAJCvX3hExiBwRHKWhQT/mikan-Design-System-Public?node-id=0%3A1

Gaudiy DesignSystem by Gaudiy

https://www.figma.com/file/MSb2SawAvBJaF73kP9ZvGR/[SHARE]-Gaudiy-DesignSystem?node-id=0%3A1

Ubie Design Tokens by Ubie

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

  • tokenをvscode上で使いやすくしてれるExtensionも用意されている

その他

情報収集として利用した、デザインシステムをデータベースやコレクションとして紹介してるサイトも合わせて紹介しておきます。こちらでは日本のシステム以外も取り扱っています。

Design Systems For Figma

Josh Cusickさんという海外デザイナーがFigmaのデザインシステムをまとめて紹介している。ただ直近は更新されてなさそう。ドメインの力が強いせいか調査すると必ず上位に来るサイト。

https://www.designsystemsforfigma.com/

Open design systems from the Figma Community

Figma公式で運営。デザインシステムにまつわるリソースをまとめているサイト。

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

Design System Collection

みんな大好きHiroki TaniさんがまとめているNotionデータベース。

https://www.notion.so/Design-System-Collection-b266887afdff455fb1f18823bcbc7ab5

Discussion

くのきみくのきみ

tuqulore Design System について取り上げてくださりありがとうございます。
私はツクロアに所属している者なのですが、現在 tuqulore Design System は Jumpu UI という名称でリブランディングされてまして、もし興味あればそちらもご参照ください。
(名称以外の変更点としては、TailwindCSS プラグイン版も並行リリースしていたりします)
https://www.figma.com/community/file/1042706969451783914

こぎそこぎそ

情報をありがとうございます!新しいバージョンがあったんですね。以下確認しました。
https://github.com/tuqulore/jumpu-ui

質問したいのですが、このシステムの利用ケースは御社のプロダクト・クライアントワーク、という理解であってますか?ユースケースを踏まえて記事で紹介したいと思います!

くのきみくのきみ

このシステムの利用ケースは御社のプロダクト・クライアントワーク、という理解であってますか?

現状そのように利用しています(ツクロアのプロダクトならびにクライアントワークで利用中)ので、その認識であってます

特定のプロダクトでなく、汎用的に使われることを想定して作っている様子

一方でコンセプト的にはすでに上記の通り紹介いただいているように、ツクロアのプロダクトでの利用のみを想定したものではないです。社外のデザイナー、開発者の利用も歓迎です