The goal of this project is to build an Interoperable Design System API which empowers consumers to seamlessly switch from one design system to another.
https://twitter.com/joeseifi/status/979898260142739457
We are starting to see really advanced design systems being built on top of React and CSS-in-JS libraries. This is great for now but as the number of publicly available Design Systems grow, we will end up with a large set of design systems that are not interoperable. Meaning the cost of moving from one to the other will be too high due to the lack of a shared specification.
The goal of this project is to build a common API, similar to the HTML spec, for UI components, to be adopted by Design Systems developers. Each system would implement their component internals, and only expose a common IDSAPI to consumers.
Creating a design system built on top of IDSAPI does not require building a full UI component list and their respective APIs. The only thing you should need to worry about is how those components look and behave.
- Start with IDSAPI documentation
- Start small. We can start by creating the API for shared atoms used in all Design System.
- Consumers should be able to install and use parts from multiple design systems simultaneously.
- Components should have common similar APIs for callbacks, variations and data exchange.
- Across all components similar props should be consistent.
- Standardizing on a currently highly opinionated API
- Designs systems may have internal dependencies which would need to be installed
A case study to see if this is feasible by surveying a list of existing DS's
- https://github.com/auth0/cosmos (Styled Components)
- https://github.com/seek-oss/seek-style-guide (CSS Modules and PostCSS)
- https://github.com/mui-org/material-ui (JSS)
- https://github.com/pluralsight/design-system (Glamor & PostCSS)
- https://github.com/salesforce/design-system-react (Plain CSS)
- https://github.com/alexpate/awesome-design-systems (Full List of Design Systems)
- https://github.com/cssinjs/istf-spec
- https://github.com/css-modules/icss
- https://github.com/diegohaz/arc
- https://github.com/jxnblk/rebass
- https://github.com/johnpolacek/design-system-playground
- https://www.youtube.com/watch?v=bLgZwFRYTJ4
- https://github.com/mrmartineau/design-system-utils
- https://airbnb.design/building-a-visual-language/