Why design systems matter

Design systems allow companies to define their own brand identity and bake it into accessible, consistent, and re-usable components, and this comes with many benefits.

Accessibility

Everyone, regardless of circumstance, should be able to achieve the same results from your application.

Design systems ensure that your application has a color palette with sufficient contrast ratios, typography scales with large enough text sizes, and easy-to-digest content. It also ensures that all of the components within your web application can be used with just a keyboard, that important alerts are read by screen readers, and landmark regions are denoted.

Consistency

Design systems facilitate consistency. We live in an era where it's common for one company to own many sister products, or suites of products, with similar brand identities.

Take Google for example. They have a suite of products that look and feel like they come from the same family. I can use Google Drive, Maps, and Flights and will see the same web components each time.

And when your company owns a suite of products similar to Google, consistency is key.

Trickle-Down Updates

Trickle-down style updates is another huge benefit of design systems. When a design pattern is updated, developers no longer have to sync cross-squads to implement this change.

The style can be updated in one component within the system, and will propagate to each product with just a quick update to the library package.

Responsiveness

Responsiveness. Design systems are built to be responsive. Mobile devices account for about half of all web traffic, worldwide.

Our web applications must account for different screen resolutions and devices. Design systems ensure that they do.

Onboarding

Streamlined on-boarding. This benefit is two-fold. Having a well-documented design system ensures that new team members can be onboarded quickly and efficiently. There is one place for them to go to get all of the information they need to get started.

Additionally, design systems facilitate better cross-squad collaboration. If all squads are using the same system, developers from squad A can easily jump into squad B to help with a feature or bug.

Flexibility

Flexibility. And you're probably a bit confused by this as I've just harped on the importance of consistency. But design systems must be flexible and serve different teams and different use cases. However they must establish boundaries within which teams can customize.

We need variations of our components such as small, medium, and large sized buttons or buttons with icons. A design system must serve a variety of use cases, while setting parameters on what exactly those use cases can be.

Speed

Once the system has had a stable release, designers can use the UI Kit to rapidly prototype designs and developers can use the component library to rapidly develop these new designs.