Are you planning to develop a Design System or just curious to know what Design System is? If yes, then here is a detailed guide for you. No matter who you are - a designer, developer, product owner, UX Writer, tester etc. this guide has something for everyone.
From the last few months I have been working on Design System at my workplace. There were challenges along with lots of learnings. I was sharing my experience on social media.Many people showed their interest on this topic. Hence, I have documented my learnings on the Design System.
- What is Design System?
- Why you need a Design System?
- How to Start?
- Designer guide for design system
- Developer guide for design system - WIP
- Post Design system guide
- Best Practises of Design system
- Resources
A single source of the truth for the designers, developers, and the products.
Design system is not a new thing. These are here from decades, thanks to our very complex UI and UX as well as rapidly changing technology. Companies are moving towards the Design System to also make sure that :
👉 Brand guidelines of the organization is followed by every product and project of the organization.
👉 Code Guidelines of the organization should be followed by every product and project within the organization.
👉 Designers and engineers can focus on more important and creative work rahter than just doing same task again.
👉 Remove the redundant tasks.
This is the most important question for everyone who is new to design system. If you Google Design System guide - the result you will get is what design system is, what it has etc. but no one explains - "How to start a design system" from a UX, UI, product Lead , or tester presepctive.Here is the process which I have followed and you can follow too:
For Developers: "Do not start with the code." For Designers: "Do not start with the design."
Most important task is to understand clearly about the scope of the design system, problems you are trying to solve by Design System, requirements of the organiztion/product/projects.
Step 1: Designer guide for design system
Step 2: Develoepr guide for design system - WIP
✅ tinyconf, Bangalore 2019 : Design design System for Reusability
✅ React Boston 2019 : Your guide for scalable in Design System
✅ Google DevFest, New Delhi 2019 : Design your Design System