What in the world is a Design System?
A UI/UX Designer personal journey 🤓
Have you ever wondered how Netflix or Uber looks quite similar (almost the same) on ALL platforms?
What do I mean? Admit it, you have that friend that downloads episodes on their tablet or phone and watches them on the go, maybe you’re fancy, and you watch your shows on a nice 50” Smart TV, and last but not least, your ol’ trusted laptop.
Despite which device you or your friend might be using, the overall User Experience, the colors, typography, and even interactions are almost identical. But not only Netflix, think about Uber, YouTube, Google, Microsoft, or how all the iPhones and Android phones have the same interface regardless of their size and model.
How is this even possible?! Especially in this fast-paced ever-evolving world.
🥁 Meet Design Systems ✨
Well, this is thanks to Design Systems. Yep. A Design System is a digital product’s “Single Source of Truth” and they have been becoming more and more popular within the last years.
In said system, you can find the core components alongside their UI/UX Best Practices documentations, which are meant to be reusable, maintainable, and scalable across all teams to build a product.
🤓 TLDR; Think of it as a living and breathing evolving wiki that has EVERYTHING you need to build your product.
From the brand guidelines, type and iconography rules and recommendations, code snippets and best practices, usability and accessibility patterns, brand’s voice and tone, design tokens, which sounds you can use in specific interactions… yes sounds! among so many others.
Another description below:
“A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life.”
- Invision Design Systems Handbook
A UI Kit is not a Design System 🙊
With this being said… I’m sorry folks, but your Sketch component library is not a Design System, although it’s a fundamental part of it 🙌.
You require to have more than static components to create the final result.
It is quite common to confuse this term and apply it for a “Component Library” or a “UI Kit” Why? Because, you’re creating a systematic way of working and automatizing things — if you’re applying Atomic Design in your design components and established your layout, grid, text styles, icons, and colors well enough. But, this is a whole different topic… 🙃
Back to where we were!
A Design System it’s alive and evolving on a site. It’s built, consumed, and maintained by different teams — mostly UI/UX Designers and Developers.
The main idea is to keep consistency between your components, colors, and styles from your design files to code.
Components of a Design System 💻📱⌚️
Imagine you’re making a cake or a salad, you can’t cook it with just flour, or a salad with just lettuce? You need more ingredients to make it work. This applies to Design Systems, for this reason, they include some of the following:
- Design Principles
- UX guidelines
- Development guidelines
- Coded UI components
- Component guidelines, usage, and details
- Page templates
- User flows
- Design tools
- Dev tooling
- Code repositories
- Voice and tone guidelines
- Implementation guides
- Contribution processes
- Team structure
- Resources (internal and external)
- Other guidelines/resources/tools/process
The main goal of these systems is to keep unity across all involved teams and platforms. Forget about UI defects, inconsistencies in the brand’s messaging, and not-so-good-looking implementations 🤞 in an ideal world…
Simple, right? Not quite…
Create, develop, scale and maintain a Design System takes time, money, and effort from multiple teams. Some companies have a dedicated team to maintain it. Nevertheless, this a worthy investment in the long run if you’re planning on growing your product or set a good foundation from scratch.
I 💖 Design Systems, why?
Because I got to learn from them! 🤓
- Material Design was my go-to when I started in the UI/UX world 🍃, being the only Designer in a team full of Developers… A girl needs all the help she can!
- In doubt about grid sizing on a certain device, layout structure, or how to display general errors and alerts?
Why don’t go check Material or Human. - Creative block when building an internal dashboard?
Lightning and Polaris might have good examples. - Need to build something for a Microsoft-related product?
Fluent has your back and cool background effects. - Cool icon ideas or need to use them in your project?
Material and Carbon icon libraries have helped me to craft designs. They’re ready to use in Sketch 🙌
A team of experts from top companies took the time to create such detailed guidelines. How more reliable this can be?
Following a Design System (from a UI/UX perspective)
Before you go and start — literally — drag and drop components into your design file.
🛑 WAIT!
Unless you’re building a native-platform-branded app, and the components need to stay the way they are — trust me, I have colleagues that are told to keep things as they are…
PLEASE play and learn from them 🙏
Yes, those guidelines are there for a reason, but, don’t you want to give a unique touch on your designs based on best practices?
Personal Conclusion
As I mentioned before, Design Systems have been my go-to when I’ve been in doubt, for years. They’ve been adding value, efficiency, and consistency in ways of working across different organizations, and in my personal projects.
Having a strong and scalable foundation since the very beginning, helps me to focus on improving the overall User Experience and upgrade current features. Instead of calculating spacing, picking up colors, tweaking type sizes, naming components, and all other little details that are part of the design.
Thanks for reading! 🙏
Links & Resources
📚 Books & Articles
Invision. (n.d.). Design Systems Handbook. Design Systems Handbook — DesignBetter. https://www.designbetter.co/design-systems-handbook/introducing-design-systems
Hacq, A. (2018, May 22). Everything you need to know about Design Systems. https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
Blog, N. T. (2021, March 16). Hawkins: Diving into the Reasoning Behind our Design System. Medium. https://netflixtechblog.com/hawkins-diving-into-the-reasoning-behind-our-design-system-964a7357547
Frost, B. (2017, April 13). Managing Technology-Agnostic Design Systems. Brad Frost. https://bradfrost.com/blog/post/managing-technology-agnostic-design-systems/
Alli, E. (2020, October 22). 10 great design systems and how to learn (and steal) from them. Medium. https://uxdesign.cc/10-great-design-systems-and-how-to-learn-and-steal-from-them-4b9c6f168fa6
Frost, B. (2018, February 12). Your Sketch library is not a design system redux. Brad Frost. https://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system-redux/
Fessenden, T. (2021, April 11). Design Systems 101. Nielsen Norman Group. https://www.nngroup.com/articles/design-systems-101/
Hong, C. (2019, November 18). Design Systems: A List of Resources — Prototypr. Medium. https://blog.prototypr.io/design-systems-a-list-of-resources-480ebb767fff
T. (2019, December 23). What is a Design System? Definition & Examples. UXMISFIT.COM. https://uxmisfit.com/2019/03/26/what-is-a-design-system-everything-you-need-to-know/
