実装が公開されているデザインシステム一覧
レファレンスを調べてみる
デザインシステムを公開しているにはレベル差がある
デザインシステムとはソフトウェア開発において一貫性のあるデザインを提供するための仕組みです。
本来は企業や団体内において実装のブレをなくすためのツールですが、業界内でのプレゼンスを得るなどの目的で社外に公開されていることがあります。
自社でデザインシステムを導入するにあたり "デザインシステムを公開しています"という企業の事例を調べたところ、公開しているにも種類があり、Webサイトを公開している、Figmaのファイルを公開している、プログラムのコードを公開しているなどレベル差があることに気づきました。
デザインの指針やFigmaファイルの公開も有用ではあるものの、ソフトウェアエンジニア視点だと実装が公開されているのが取っ掛かりとして良さそうに思いました。
実装が公開されているという切り口でのデザインシステムの一覧をメモがてらまとめておきます。
Primer Design System
GitHub製のGitHubのためのデザインシステム。
FigmaやReactが公開されているだけではなく、RailsのViewComponentの実装が公開されている。
Pajamas
GitLabのデザインシステム。
Vue.jsをベースにRailsののViewComponentの実装も公開されている。
デジタル庁デザインシステムβ版
デジタル庁のデザインシステム。
Figmaと別にReactの実装が一部公開されている。
SmartHR Design System
SmartHRのデザインシステム。
Figma, Reactの実装が公開されている。
Cloudscape Design System
AWSのデザインシステム。
Reactの実装が公開されている。
Spindle
CyberAgentのAmeba用デザインシステム。
Reactの実装が公開されている。
Polaris
Shopify adminのデザインシステム。
Reactの実装が公開されている。
charcoal
pixivのデザインシステム。
React、SwiftUI、Jetpack Composeの実装が公開されている。
INGRED UI
VOYAGE GROUPのデザインシステム。
Reactの実装が公開されている。
vibes
フリー株式会社のデザインシステム。
Reactの実装が公開されている。
Washington Post Design System (WPDS)
ワシンポストのデザインシステム。
Reactの実装が公開されている。
Lightning Design System
Salesforceのデザインシステム。
公式サイトにはPlatformとしてLightning, VIsualforce, Heroku, Android, iOSサポートを標榜している。
プラットフォームによって公開具合にばらつきがありそう？Reactについては実装がありそう。
Spectrum
Adobeのデザインシステム。
CSS、Webコンポーネント、Reactの実装が公開されている。
Gestalt
Pinterestのデザインシステム。
Reactの実装が公開されている。
Base Web React UI framework
Uberのデザインシステム。
Reactの実装が公開されている。
まとめ
まとめです。Reactの例が多いですね。
| React | Vue | Web Component | CSS | Rails ViewComponent | iOS | Android | |
|---|---|---|---|---|---|---|---|
| Primer Design System | O | O | |||||
| Pajamas | O | O | |||||
| デジタル庁デザインシステムβ版 | O | ||||||
| SmartHR Design System | O | ||||||
| Cloudscape Design System | O | ||||||
| Spindle | O | ||||||
| Polaris | O | ||||||
| charcoal | O | O | O | ||||
| INGRED UI | O | ||||||
| vibes | O | ||||||
| Washington Post Design System | O | ||||||
| Lightning Design System | O | △? | △? | △? | |||
| Spectrum | O | O | O | ||||
| Gestalt | O | ||||||
| Base Web React UI framework | O |
Discussion