Design Systems philosophy

SuperPower Tools

We had pretty sophisticated Sketch Libraries before, but Sketch Libraries really only benefit designers and have little effect on the finished product. They're very beneficial, but only if they work in lockstep with Code. By creating a Zeplin "Source of Truth", we created that lockstep relationship with Engineering which gave our relationship a little more peace of mind.

Empowering Product Teams

The key here is to empower product teams to be creative and do their best work to serve the users that only they know best. While it's important to create a design language that communicates your brand, it's equally important that designers on the front lines serving their users feel empowered to innovate in their product domain.

To achieve this vision, we defined Core, Shared, and Feature components.

Code Libraries

React Native Core Components had already been made by Walmart's Global Platform team. The Store Systems Platform Team extended those components for our own use created Feature Components. This would give them "free updates" from the Global Platform Team.

Zeplin Styleguide

The Source of Truth made Zeplin so much better. Seeing "Walmart Brand Blue" instead of "#017acd" or "Item Card" instead of just a list of attribute values really made Engineers' lifes' better and gave Designers' peace of mind that it would be what their users' expected.

Sketch UI Kit

A Dictionary for your visual language. Sketch Libraries are great, but they don't give a new design employee a wholistic view of your design language or a way to get started quickly. Every design system will have components which don't have common names and are unique to the context they exist in. A UI Kit is a great tool for laying it all out with copy-pastable components which are linked to the design system.

Sketch Libraries

The Power Tool for Designers. Along with a Core Components Sketch Library (managed by the Design Systems team), we determined that each Feature team or business area would have their own Feature Components library.