Get an overview on what design systems are, why they are important, and how Sketch can help create and manage them.
- [Narrator] Once a website or application reaches a certain size and complexity or a company has multiple software products, the arguments for a design system are overwhelming. I'm going to tell you what a design system is, where it will provide value, and how it benefits an organization. First, let's talk about the pieces of a design system. At a low level, you have your "Foundations and Principles." These are your accessibility targets, your guiding design principles, some animations, your scaling, and your grids.
Then you have the "Brand Identity," your fonts, colors, meaning, visual language, white labeling, logo/marketing related. These are more akin to your traditional marketing style guide. Then you have your "Editorial Guidelines," your voice and tone, your word list, capitalization, some punctuation rules. Then you have the two biggest pieces. The first biggest piece is the "Pattern Library," and those are the UI components, the page templates, and your reference files, whether that's Photoshop, Illustrator, or Sketch files.
Then, ideally, you have some "Code," and that "Code" would be an implementation of the "Pattern Library" components that teams can consume and integrate in to their product. Now that we know what makes up a design system, how do you know if your company needs one? A design system will provide value if your product or products need to look and behave similarly, if they implement similar UI components. Do your products duplicate low-level functionality? Are you selling software as a service? Maybe those need to be white labeled or themed.
Are your products being built on completely different tech stacks? Or do you products suffer from visual regression bugs? If you agree with any of these, you'll most likely benefit from having a design system in place. At a high level, what are some of those goals or benefits of a design system? They provide a single source of truth for building user interfaces. They're easy to modify and extend functionality from a central repository. They save time and money, shorter productions cycles, faster, more accurate designs and high fidelity wire frames, and quicker development.
They increase consistency. You'll have condensed testing cycles with fewer surprises. They're unit tested and regression tested. Instead, the product teams can put their time and energy in to creating new experiences, new algorithms, and new business logic. They decrease maintenance. They let the UX teams focus on the experience and the dev teams focus on the implementation. Most importantly, they improve the user experience through well-defined and learned behaviors.
Those well-defined and learned behaviors can extend across the suite of products because they're all defined in the design system and not at an application level. Companies around the world are using design systems, and they're really becoming the new standard for enterprise software development. Let's take a look at some of those examples. Salesforce Lightning Design System is kind of the gold standard of design systems. They provide great accessibility guidelines and a comprehensive set of designs and implementation of components.
The Federal Government even has their own design system. Then this is meant for all of the government web sites that are under the design system will use their typography, colors, accessibility, grids, buttons, et cetera. Shopify recently came out with their design system, Polaris, which has a well documented public API for each component with guidelines and well-defined conventions. Intuit's design system, Harmony, also has a great narrative of the reason behind why their components are designed and built the way they are.
This is another great example of a design system. The companies around the world that are using design systems do this so that developers don't need to worry about the underlying implementation, and the designers don't need to worry about all of the little things that they have to worry about, like font or color. They can really focus on creating amazing user experiences. Generally speaking, there's no official definition for what a design system is other than a structured approach towards optimizing your product's design workflow.
Like a software product, a design system will go through phases of maturity as it becomes more complex and serves the needs of individuals beyond the design team itself.