Design System Ecosystem - interaction-dynamics/design-system-hub GitHub Wiki
This page contains all the information we could gather about Design systems
What is a Design System:
- Principles
- characteristic
- understanding how it impacts customer's experience and contribute to business goals
- clear examples
- Foundations
- accessibility
- typography
- colors
- elevation
- iconography
- spatial systems
- patterns
- Documentation
- on canvas
- figma description
- naming/structure
- written article and guides
- dedicated websites and tools
- Processes
Design system architecture inspired from Figma courses.
Figma
- Figma courses
- Figma and Storybook
- Figma for VS Code
- Figma tokens
- Chromatic in Figma (required to link storybook to figma)
- List of design systems in figma
Invision
- https://www.invisionapp.com/inside-design/introducing-design-systems-handbook/
- https://www.invisionapp.com/inside-design/guide-to-design-systems/
Examples of design systems
- https://atlassian.design/
- https://m3.material.io/
- https://design.wonderflow.ai/
- https://polaris.shopify.com/
- https://developer.apple.com/design/
- https://www.mongodb.design/
- https://baseweb.design/
- https://ux.mailchimp.com/
- https://www.lightningdesignsystem.com/
- https://designsystemsrepo.com/
Social medias and articles
- https://www.nngroup.com/articles/design-systems-101/
- https://www.nngroup.com/articles/design-systems-vs-style-guides/
- https://www.uxpin.com/studio/blog/design-system-governance/
- https://kyleshevlin.com/design-system-retrospective/
- https://medium.com/@janverardian/10-things-no-one-told-me-about-design-systems-803ab778193e
- Spotify podcast
- https://www.reddit.com/r/DesignSystems/
Solutions to maintain design systems
For developers:
- Storybook
- Histoire.dev not for React 🤷♂️
- Ladle ugly 🤮
- Cosmos storybook like, doesn't help for synchronization
- Vitebook archived
- Vessel not maintained
Others:
- https://tokens.studio/studio
- https://www.uxpin.com
- https://zeroheight.com/
- https://flareum.io/
- https://www.supernova.io/
- InVision Design System Manager but InVision is closing
- https://zeplin.io/why-zeplin/dev-mode-alternative/
- https://stackblitz.com/
- https://omlet.dev/ solution to measure production component usage
- https://github.com/fwouts/previewjs not really for design systems but it renders react components