Why use a Design System?

[00:00 - 00:18] In the past few years, design systems have been gaining popularity among designers and developers, and you might be wondering why that is. In this lesson, we'll clarify what design systems are, why they're becoming ever more important, and some popular options out there today for teams to choose from.

[00:19 - 00:37] The most basic definition of a design system comes courtesy of Wikipedia and simply describes them as a set of interconnected patterns and shared practices that are coherently organized. This is a good abstract idea, but here is an incomplete list of the more tangible components that design systems can include.

[00:38 - 01:09] They can include a set of reusable components, a style guide of colors, typ ography, and styles used throughout UI elements, a brand identity and language, a pattern library with examples of common interaction patterns, and a collection of standards and principles that can serve as a single source of truth for the entire organization. Typically, brands and companies have style guides to enable their design and marketing teams, and they also might have pattern libraries used by the development and the UX teams.

[01:10 - 01:17] Design systems are a combination of both and more. Modern design systems are easy to update as standards change.

[01:18 - 01:45] They can link to code snippets and they're bound together by design principles and an overarching UX strategy that helps to ensure that even in large decentralized organizations, like enterprise-sized companies, different applications and experiences feel connected. We've already started touching on some of the benefits that design systems can offer, but let's dive deeper and be more explicit about the tangible benefits that they can bring to organizations.

[01:46 - 02:08] A good design system brings benefits to many teams across an org, and it can provide a myriad of improvements, including, faster development times due to reusable components that handle complex functionality. Better products due to alignment around user experiences and consistent design language improved maintainability and scalability through a reduction of design and technical debt.

[02:09 - 02:30] Stronger focus on meeting user needs because the nitty-gritty implementation details and interactions are already handled, and a consistent look and feel across products due to shared best practices and brand patterns. These are powerful tools when used well, and while companies could create their own and some do, it's not always necessary or feasible.

[02:31 - 02:45] There's a lot of really excellent options already available to us that can be customized to suit our needs instead. The list of design systems is long and getting longer, but here are some of the most popular and comprehensive ones in use today.

[02:46 - 02:54] The first one is ant design. Ant design is a well-known and ever-expanding system that shows no signs of slowing down any time soon.

[02:55 - 03:22] Although the React ant components are the official version, there are now implementations for other UI frameworks like view, angular, and more. In addition to an extensive component library and very good documentation around components, ant design also offers thorough design patterns, extra libraries for things like data visualizations and mobile development, a strong open-source community, and blogs on design and experience that are regularly updated.

[03:23 - 03:30] It's a popular option for a good reason. Another good one is material UI, which is Google's own design system offering.

[03:31 - 03:43] It's a design system that is quite in vogue today. Material UI offers premium ready-made themes for those who might not have an in -house designer to rely on for a unique, unified design.

[03:44 - 04:08] It also offers backwards compatibility with older versions of Material UI, docs that are maintained for the community, TypeScript-specific supports, migration documentation to help users upgrade from one material version to another, localization advice, and more. The well-known software as a service company Salesforce has also published a design system that they've named the Lightning Design System.

[04:09 - 04:37] Among other things, Lightning boasts a use of design tokens, named entities that store visual design attributes, thorough documentation on using Lightning within different platforms like Her oku, Android, and iOS, large sections on design guidelines and accessibility, and tools for the team, like a sketch plugin for designers, and a VS code extension for developers. Always a tech leader, IBM released its design system to the general population, the carbon design system.

[04:38 - 04:52] Carbon is IBM's open-source design system for products and digital experiences. With the IBM Design Languages Its Foundation, this system consists of working code examples, case studies, design tools, and resources.

[04:53 - 05:08] It has human interface guidelines and a community of contributors that are working to improve it over time. One interesting thing that Carbon boasts is a fairly extensive data visualization library, which is useful for teams that need to leverage assets like these regularly.

[05:09 - 05:29] And disrupting every industry it touches, Uber shared its base web design system in 2018 with the world. Like the other competitors, base web boasts lots of components, lots of customization to make it match your brands' styles and colors, as well as an eye towards accessibility and performance to ensure that components don't make a site slower to load.

[05:30 - 05:50] Base web also offers a fairly unique way to learn to use it and to get more comfortable with how it operates before throwing it into your own project and an extensive API cheat sheet for quick reference. Now that we've talked at a higher level about the what's and why's of design systems, it's time to get our hands dirty and add one to our own application.

[05:51 - 06:01] In our next lesson, we'll implement the popular ant design library with hardware handler and learn how to refactor our project to take advantage of the reusable components that ant can provide to us.