Say Heyo
Design Systems: An Exhaustive Resource List
by Steven Trevathan
These links provide valuable insights and best practices for designing and maintaining design systems, offering guidance on various aspects of design and component creation. Browse the list and let us know how we did!
Best practices & thought pieces
About design systems
Design
Explore articles on creating themeable design systems, typography, spacing, and component design.
- https://bradfrost.com/blog/post/creating-themeable-design-systems/
- https://superfriendlydesign.systems/articles/typography-in-design-systems/
- https://www.figma.com/best-practices/typography-systems-in-figma/typography-scales/
- https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
- https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
- https://bradfrost.com/blog/post/design-system-components-recipes-and-snowflakes/
- https://www.figma.com/blog/the-future-of-design-systems-is-accessible/
Launch & Maintenance
Learn about releasing design systems, governance processes, team models, and more.
- https://medium.com/eightshapes-llc/releasing-design-systems-57fca91a23f6
- https://bradfrost.com/blog/post/a-design-system-governance-process/
- https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
- https://medium.com/related-works-inc/the-people-part-of-design-systems-a5b54eea24f4
- https://coggle.it/diagram/V0hkiP976OIbGpy8/t/vanilla-pattern
Code
This section offers resources related to the code and technical aspects of design systems, including guidelines and frameworks.
-
https://github.com/bradfrost/frontend-guidelines-questionnaire/
- A questionnaire to help establish frontend development guidelines for your design system.
-
https://bradfrost.com/blog/post/css-architecture-for-design-systems/
- Learn about best practices for structuring CSS in design systems.
-
https://www.figma.com/community/file/854767373644076713
- Explore Figma resources related to design systems.
Example design systems
This list features examples of established design systems from various companies, showcasing their design and implementation.
- http://styleguides.io/examples.html
- A collection of design system examples from different organizations.
- https://material.io/design
- Google's Material Design system, a widely recognized design language.
- https://lightningdesignsystem.com
- Salesforce's Lightning Design System for building user interfaces.
- https://polaris.shopify.com
- Shopify's Polaris design system for building eCommerce experiences.
- https://18f.gsa.gov/2017/10/03/building-a-large-scale-design-system/
- Insights from the U.S. Government's 18F on building a large-scale design system.
- https://garden.zendesk.com
- Zendesk's design system, known as Garden, for creating unified customer experiences.
- https://www.yelp.com/styleguide
- Yelp's style guide for consistent design across their platforms.
- https://designsystem.quickbooks.com
- Intuit's QuickBooks design system for financial software.
- https://www.ibm.com/design/language/
- IBM's design language for creating cohesive user experiences.
Kick off & planning
These links offer insights into initiating and planning design systems, including interview questions and scorecards.
- https://bradfrost.com/blog/post/design-system-interview-questions/
- A set of questions to consider when starting a design system project.
- https://superfriendlydesign.systems/articles/design-systems-pilots-scorecards/
- Learn about conducting pilot projects and using scorecards for design systems.
Tools
Explore a collection of tools for launching and maintaining design systems, including pattern libraries and interface inventory tools.
Launch & maintenance
- https://patternlab.io
- A tool for building design systems with pattern libraries.
- https://fractal.build
- A framework for building and documenting web component libraries.
- https://storybook.js.org
- An open-source tool for developing UI components in isolation.
- http://styleguides.io/tools.html
- A filterable list of tools for various style guide needs.
- https://amzn.github.io/style-dictionary/#/
- A build system for design tokens and style properties.
- https://www.invisionapp.com/design-system-manager/
- InVision's tool for managing and maintaining design systems.
- https://github.com/salesforce-ux/theo
- A tool for transforming and formatting design tokens.
- https://github.com/airbnb/react-sketchapp
- Airbnb's tool for designing with React components in Sketch.
- https://www.framer.com
- A great tool for designing and prototyping interactive user interfaces.
- https://www.uxpin.com
- A design and prototyping platform with design systems features.
- https://www.modulz.app
- Modulz is a visual code editor for building design systems and UI.
- http://bradfrost.github.io/style-guide-guide/
- A boilerplate starter for your own style guide
- https://zeroheight.com
- A platform for documenting and managing design systems.
Performance Find resources for optimizing design system performance and web page speed.
- https://cssstats.com
- Analyze the CSS of your design system for insights into its usage and performance.
- https://developers.google.com/speed/pagespeed/insights/
- A tool for assessing the performance of web pages.
- https://www.webpagetest.org
- Test and analyze the performance of web pages from multiple locations and devices.
- https://wpostats.com
- A resource for web performance optimization statistics and trends.