Advance Auto Parts Design System

Introduction

Design systems are all the rage these days. We know how powerful they can be when you have them in place — and how much work it takes to get there. Here's how we did it:

Collaborative effort between the design and development teams

The design team created the Design System, which consists of a design language and components. The development team then implemented the code that makes those components work.

The collaborative effort between these two teams was facilitated by using a shared Figma document, where both sides worked in real time to test their changes and get feedback from each other.

Encouraged reuse of components

The more we can reuse components, the better.

The reason is simple: it reduces the need for developers to create new components and increases their productivity by reducing the time it takes to develop a feature.

It also improves maintainability because all changes are made in one place and then automatically updated everywhere else where they’re used.

Supported teams across the organization in creating better interfaces faster

The Design System is a living document. It's a collaborative effort, and has been reviewed on a regular basis by multiple people across the organization.

The Design System is a way to create better interfaces faster. It provides consistency across the product lines, which helps us move faster and improve our quality along the way

The Design System is designed to scale across teams, platforms and products so that everyone in your organization can benefit from it