<rich-h2>What Is A Design System?<rich-h2>
<rich-para>In the design verse, it’s everything that makes up a product from typography, layouts, grids, colours, icons (a style guide in brief) to coding convention, components & philosophies. A design system is wrapping all this together in a way that allows the entire team to learn, build, and to deliver consistent products. In short, everything you need to scale a product using reusable components and patterns.
Let’s dig deeper & understand a few examples of such design systems:<rich-para>
<rich-h2>Google’s Material Design<rich-h2>
<rich-para>Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web. Its goal is to deliver high-quality output consistently across platforms.<rich-para>
<rich-h3>Google’s Material Design Is Divided Into 4 Sections:<rich-h3>
<rich-list-item>Material Theming<rich-list-item>
<rich-list-item>Iconography<rich-list-item>
<rich-list-item>Text Fields<rich-list-item>
<rich-list-item last-item>Components<rich-list-item last-item>
<rich-h2>Shopify Polaris<rich-h2>
<rich-para>The Shopify Polaris design system is a set of comprehensive guidelines and principles that designers & partners can use to create a consistent user experience. It allows partners & designers to download a style guide, a library of components and patterns, and a UI kit they can use.<rich-para>
<rich-h3>The Polaris Design System Includes:<rich-h3>
<rich-list-item>Guides<rich-list-item>
<rich-list-item>Content<rich-list-item>
<rich-list-item>Design<rich-list-item>
<rich-list-item>Components<rich-list-item>
<rich-list-item last-item>Patterns<rich-list-item last-item>
<rich-h2>Airbnb’s Design Language<rich-h2>
<rich-para>Airbnb believes that a unified design language shouldn’t be just a set of static rules and individual atoms; it should be an evolving ecosystem. It should drive greater efficiency through well-defined and reusable components<rich-para>
<rich-h3>Airbnb’s Design System Is Split Into 4 Different Sections:<rich-h3>
<rich-list-item>Typeface<rich-list-item>
<rich-list-item>Spacing<rich-list-item>
<rich-list-item>Colour<rich-list-item>
<rich-list-item last-item>Iconography<rich-list-item last-item>
<rich-para>Every design system will have some commonalities and some differences. Some design systems may omit some sections which other design systems might choose to include.<rich-para>
<rich-h2>Design System Product Commonalities:<rich-h2>
<rich-list-item>Style & Design Guidelines: It contains information about consistent components across the products using elements like typography, colour, spacing, etc.<rich-list-item>
<rich-list-item>Component Library: It includes UI elements like forms, buttons, navigation, nested elements, etc.<rich-list-item>
<rich-list-item last-item>Images/Illustrations Library: It includes all the icons, images, illustrations, avatars, etc used in the entire project.<rich-list-item last-item>
<rich-para>Every design system will have something that will inspire you and something that will help you learn a lesson.<rich-para>
<rich-para>Takeaway: A design system is key but only if it’s based on the objectives of the project and not on what’s trending in the industry.<rich-para>
