The trouble with the term “design system” is that it means completely different things to different people. For example, to developers it means “component library” but to designers it means “I'd like a promotion.”— Mark Dalgleish (@markdalgleish) May 5, 2020
In my opinion a design system isn’t an implementation. Instead the design system is a set of guidelines, principles, best practices, etc. that the implementations use in order to be “on brand.” The Material Design system is a perfect example of this. Initially when the project came out, it was just some documentation. But since then, they’ve added iconography, components, and more to help build applications that adhere to the Material Design “look and feel.”
Usually a design system is started within the Brand team (and likely with a brand agency 😔). And out comes foundational elements: typography, color, tone of voice and motion. Typically these are showcased in marketing materials like print ads, emails or marketing landing pages.
The Design team then takes those brand guidelines and massages them into UI elements. From past experiences, the colors that the Brand teams choose usually aren’t accessible for contrast ratio and the Design team has to make some tweaks. Then the output from them is an implementation of the design system as a pattern library in Figma, Sketch, InVision, or other similar design tools.
In my opinion, it’s super duper important that the Design team creates this first implementation. If an organization is creating their own design system (and not using an existing one), presumably they’re big enough to have designers. They need those designers producing designs according to the design system. If the organization has a component library, but the designers aren’t designing consistent with that library or bought into the design system, the engineers will find themselves in more pain trying to use the library than if they had just built things from scratch.
I’ll probably have a post in the future to dive deeper into this. It’s a sore spot for me and a point I believe many design systems go wrong.
After the design pattern library implementation of the design system has been created, the remaining implementations depend on the stack.
With all this talk about the Web, we shouldn’t forget the native apps. They too should adhere to the design system. And ideally they are on-brand with more than just typography and colors. The same buttons, text inputs, notifications, etc. should appear in the native apps. The only differences should be in page-level conventions like navigation.
At Stitch Fix we’ve built our own design system (of course). It’s called Mode. It started with Brand. It was massaged with our Design Platform team. We’ve built out a Style System that exports Sass mixins. And now I’m wrapping up a beta release of the React component library.
More thoughts to come on how to spin up and maintain a React component library. I learned a lot during this process.
Keep learning my friends. 🤓