🎨
Figmaに公開されている日本のデザインシステム系ファイル
Figmaを絡めて新たなデザインシステム構築を手伝う仕事が生まれそうなので、調査がてらFigmaに公開されているデザインシステム系ファイルの情報をまとめました。
なお、海外のデザインシステムは大量に公開されており、特に有名企業のシステムはどこの記事でも紹介しているので、この記事では日本で公開されているFigma関連のファイルに限定して取り扱います。
検索する限りでは意外と日本企業が公開しているファイルは少ない。
なお、ここに掲載されている以外で公開されているファイルがありましたら@kgsiまでご連絡いただけると嬉しいです。
FALCON by SPEEDA
- コンポーネントごとにページを分けている
- Variantsは
DefaultやLargeなどアッパーキャメルケースを採用
*書体はHiragino Kaku Gothic Proを指定
SmartHR UI by SmartHR
- 全コンポーネントを
Componentsページに配置している - コンポーネントを使って作成したレイアウトのサンプルを
Layoutsページに設置 - スペーシング指定や付箋として使えるユーティリティコンポーネントを
Toolsページに用意している - 書体は
Hiragino Sans
Apron by cookpad
- いわゆるガイドライン。ページは
DocumentとAboutのみ - プロダクトに使われているコンポーネントは含まれない
- コンポーネントはドキュメント内で使っている
TextStyleやColor Paletteのみ - 書体は
Hiragino Kaku Gothic Pro
ツクロア
Jumpu UI
- TailwindCSSのプラグインという形でリリースされているUIライブラリ
- ツクロアのプロダクトならびにクライアントワークで使用している模様
- コンポーネントをページ単位で分けており、命名規則はコンスタントケース
- tailwindに準拠した命名規則を当てており、各ページにclass名の説明も付属している
- 書体は
Noto Sans JP
tuqulore Design System
- コンポーネントは
Componentsページに全てまとめている - Variantsは
rounded-skeltonなどケバブケースを採用 - 特定のプロダクトでなく、汎用的に使われることを想定して作っている様子
-
Galleryページにモバイルやデスクトップ用のレイアウトサンプルを配置している - 書体は
Hiragino Sans、Noto Sans Japaneseを使用、欧文と日本語で書体を変えている
JDD | JP + UI Kit by Japan Digital Design
iOS用
Android用
- コンポーネントは
Componentsページにまとめている - オンボーディングやヘルプとして
Welcome、Guideページを用意している - レイヤー名に
23 Progress indicatorなど、接頭詞に2桁の番号を設定 - 日本語書体は
Hiragino Kaku Gothic Pro、英語書体はSF Pro Textを設定。JP、ENと書体をStyleを分けている
mikan DesignSystem by mikan
Gaudiy DesignSystem by Gaudiy
Ubie Design Tokens by Ubie
- tokenをvscode上で使いやすくしてれるExtensionも用意されている
その他
情報収集として利用した、デザインシステムをデータベースやコレクションとして紹介してるサイトも合わせて紹介しておきます。こちらでは日本のシステム以外も取り扱っています。
Design Systems For Figma
Josh Cusickさんという海外デザイナーがFigmaのデザインシステムをまとめて紹介している。ただ直近は更新されてなさそう。ドメインの力が強いせいか調査すると必ず上位に来るサイト。
Open design systems from the Figma Community
Figma公式で運営。デザインシステムにまつわるリソースをまとめているサイト。
Design System Collection
みんな大好きHiroki TaniさんがまとめているNotionデータベース。
Discussion
tuqulore Design System について取り上げてくださりありがとうございます。
私はツクロアに所属している者なのですが、現在 tuqulore Design System は Jumpu UI という名称でリブランディングされてまして、もし興味あればそちらもご参照ください。
（名称以外の変更点としては、TailwindCSS プラグイン版も並行リリースしていたりします）
情報をありがとうございます！新しいバージョンがあったんですね。以下確認しました。
質問したいのですが、このシステムの利用ケースは御社のプロダクト・クライアントワーク、という理解であってますか？ユースケースを踏まえて記事で紹介したいと思います！
現状そのように利用しています（ツクロアのプロダクトならびにクライアントワークで利用中）ので、その認識であってます
一方でコンセプト的にはすでに上記の通り紹介いただいているように、ツクロアのプロダクトでの利用のみを想定したものではないです。社外のデザイナー、開発者の利用も歓迎です
ありがとうございます！