List resources
Public design systems have scope variations
A design system is a mechanism for providing consistent design in software development.
Originally, it is a tool to eliminate implementation style difference within a company or organization, but it is sometimes made public outside the company for purposes such as gaining a presence within the industry.
When we looked into examples of companies that open their design systems to the public in order to introduce a design system in our company, we found that there are different levels of openness, including openness of websites, Figma files, program code, etc.
While design guidelines and publication of Figma files are useful, from a software engineer's point of view, I thought that publication of the implementation would be a good starting point.
The following is a list of design systems that have open implementations.
Primer Design System
A design system for GitHub made by GitHub.
Not only are Figma and React published, but the Rails ViewComponent implementation is also available.
Pajamas
GitLab's design system.
Based on Vue.js, Rails' ViewComponent implementation is also available.
Digital Agency Design System Beta Version
Digital Agency Design System.
Some React implementations are available separately from Figma.
SmartHR Design System
SmartHR Design System.
Figma, React implementations are available.
Cloudscape Design System
AWS Design System.
A React implementation is available.
Spindle
https://github.com/openameba/spindle
CyberAgent's design system for Ameba.
A React implementation is available.
Polaris
https://github.com/Shopify/polaris
Shopify admin design system.
A React implementation is available.
charcoal
https://github.com/pixiv/charcoal https://github.com/pixiv/charcoal-ios https://github.com/pixiv/charcoal-android
pixiv design system.
React, SwiftUI, and Jetpack Compose implementations are available.
INGRED UI
https://github.com/voyagegroup/ingred-ui
VOYAGE GROUP Design System.
React implementation is available to the public.
vibes
https://github.com/freee/vibes
Freee Corporation Design System.
React implementation is available to the public.
Washington Post Design System (WPDS)
https://build.washingtonpost.com
Wasinpost Design System.
React implementation is available to the public.
Lightning Design System
https://www.lightningdesignsystem.com https://github.com/salesforce-ux/design-system
Salesforce design system.
The official site claims Lightning, VIsualforce, Heroku, Android, and iOS support as platforms.
There seems to be a variation in the state of public disclosure from platform to platform. It seems that implementation of React is also available.
Spectrum
Adobe Design System.
CSS, Web Components, and React implementations are available.
Gestalt
https://gestalt.pinterest.systems/home
Pinterest Design System.
A React implementation is available.
Base Web React UI framework
Uber Design System.
A React implementation is available.
Summary
Here's a summary. There are a lot of React examples.
| React | Vue | Web Component | CSS | Rails ViewComponent | iOS | Android | |
|---|---|---|---|---|---|---|---|
| Primer Design System | O | O | |||||
| Pajamas | O | O | |||||
| Digital Agency Design System Beta Version | 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 |
