Everything you should know about design systems. Briefly
Are they a UX trend or just a new word instead of the ‘Guide’ term? Trying to understand what’s what.
Design systems may be perceived as a set of templates, or a guide for developers, or a Sketch library. Also, some of them turn into complex resources which feature many cases embraced by single approach and philosophy. And yet all these variants happen to be, I’ve found it vital to sum up all the essentials and help you figure out what’s what.
Origins & Key Notions
The first ancestors of design systems appeared in the early 2010s. You know them as the Atomic design that has established a framework for UX designers to build upon and use repeatedly. Or as Google’s Material Design of 2014, that combined pattern libraries & Atomic Design. And was evidently meant to create a visual language that was applicable across all devices and platforms.
And then the design systems come up as a unified visual language and its technical reflection. They group all the elements, enabling the team to design, release and continuously update the product.
As a set of deliverables, a design system includes following components:
- Visual language (involves a paradigm of corporate values & rules, complete production guidelines, best practices and a full library of design tools & styles);
- Programming code and its separate elements;
- Templates of web elements;
- Design system support & development team.
I’ve come across a vast number of theories where the last component was omitted, and I honestly find it wrong. As a long-lasting project the design system can’t do without its masterminds, managers and production team. And it’s up to you to decide who these people will be in your particular case — your teammates solely or you will employ an outsourced system designer for qualified support and control.
Last but not least point to keep in mind: a design system is never a stable, permanent guide. In contrast to it, the design system isn’t composed once and forever. It is born together with the project and evaluates with it, follows the purposes, philosophy and trends, imposed by the team. In its turn, the guide embraces the guidelines (sorry for the tautology) and acts as a solid marble stone. See the difference?
Design Systems in Real Life
No theory is good enough without nice examples. So, here are a few great projects, based and maintained with the help of design systems: from Airbnb, the pioneers in adopting and implementing a design system to their workflow to Apple with their highly detailed Human Interface Guidelines.
- Airbnb
- Polaris
- Mozilla Design Language
- Carbon Design System by IBM
- Human Interface Guidelines by Apple
- Mailchimp System
Destroying the Prejudices
I was following some conversations about the design systems and found myself drowning in the flow of suspiciousness. Actually, there are 2 main points that make teams and project managers feel unconfident about implementing design systems, and I’ll be happy to crash both of them.
Design System is clumsy and unable to adapt to your constantly evaluating project.
Err, yes and no. On the one hand, there are integrated design systems, created once and forever and fit more or less stable projects. Portfolios, marketing campaigns, and promotions are the best example.
On another hand, there are modular design systems which contain tons of variable elements. And still the team keeps completing them with even more to stay up-to-date. That’s more complicated — but that'’s also the right solution for global projects like e-commerce or public websites.
Design Systems are only for UI/UX design.
Well, it’s close to the truth. With the code as one of the essential elements of a design system, you use it to realize and develop a website or an app first. But why don’t you use a complex system of deliverables elaborated by your team for borderline products: posters, stickers and even interior design. Like with Creative Market headquarters which is imbued with their corporate values, philosophy and key visual features from the website. Just don’t hesitate to think globally!
Getting to your with this article, I was trying to hit one primary goal: bring the trend and help you get rid of unconfidence and try it for your team. Sure, I’ve only touched the surface, and design systems require more expertise to be applied to your workflow. That’s why I recommend you not to limit yourself by this brief, but discover more sources, dedicated to the design systems.
Check out the blog of Nathan Curtis that reveals professional approach or try Design Systems by Figma, where the most relevant problems and cases are embraced.
