How to build a design system
- 1. BUILD A DESIGN SYSTEM HOW TO PART 1 faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design
- 2. Before going forward! first, understand What is design system? A Design System is the single source of truth, which groups all the elements that will allow the teams to design and develop a product even can be assembled together to build any number of applications and Design system can be included things like. Design Principle Design Token UX guidelines Development guidelines UI Patterns Remember UI Kit is not a design system, It can be a part of the design system! 2 faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design
- 3. faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design Understand difference 3 What’s the difference between a design system and a style guide? The design system is more complex than a style guide and style guide is a simple collection of colors, typography & other elements which can help to identify the brand. According to Emmet Connolly, Director of Product Design at Intercom, “most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-in!nite ways. Your product is more than just a pile of reusable UI elements. It has structure and meaning.
- 4. According to Atomic Design faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design There are so many benefits to creating a design system like Many more… It provides a future-friendly foundation to grow and involve the system over time. Make things easier to test UI Establish shareable vocabulary between disciplines and di!erent products Allows for generating higher quality design Allows for faster production Design system promote UI consistency, allowing user to get done what they need to get done 4
- 5. Focus on right clients 5 faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design Before providing a solution, understand they really need design system? if yes then why they need? Who have multiple digital products and now they are struggling with design. Who are trying to extend their business Who are running business last serval years (2-5 years) There are many types of clients, you can offer them a design system Don’t try to sell design system to startup, reason !rst they just begin and they didn’t scale their business so it is very hard to sell, because for design system you need to scale business and look into problems & challenges. Lastly, understand, the Design system is a way to solve the design+business problems but you should !nd right clients and right companies. How to sell design system?
- 6. Heading body text Gilroy font Aa Regular Medium Bold Extra Bold Say hello, I am gilroy typeface Say hello, I am gilroy typeface Say hello, I am gilroy typeface Say hello, I am gilroy typeface How to define design system 6 Understand the design system is not about working in isolation it's all about collaboration! If you are working individually, you may start from create style guide & It’s good start for individual designer. faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design Colors (brand, gradients, accents) Typography Layout/Grid Spacing Accessibility Colors Content More…
- 7. And then you can start 7 Building ui components Example Buttons Modals Form elements Data Tables On-o! switches Dialogs Toolbars Checkboxes Dropdown menus Sliders Steppers More… Button Button Button Pressed Disabled Default Default Pressed Disabled Cover The card container is the only required element in a card. All other elements shown. 14/05/2018 Date Faizur Rehman Card Holder 4345 43457123 71235354 53540023 0023 14/05/2018 Date Faizur Rehman Name 300$ Upcoming Payment Add Shop Amazon AliExpress Complete Introduce yourself Choose your account Confirm email address After this step your card will be send Vertify your identify faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design
- 8. Valuable sources 8 faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design https://www.designsystems.com/ Design System http://atomicdesign.bradfrost.com/ Atomic Design Book https://www.designbetter.co/design-systems-handbook Design Systems Handbook https://www.uxpin.com/create-design-system-guide/ Design System Starter Kit Books
- 9. Part 2 | Coming soon 9 I will continue design system post in part 2 and I will tell you what is complete roadmap to build a design system! faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design These are basics about design system, somehow you can start building in your own way, but truth is there are lots of things you need to do in the way to create design system! I will everything in the next post.
- 10. faizurrehman.com Faizur Rehman @fazurrehman Follow on Instagram youtube.com/faizurrehman Learn UX/UI Design Don’t forget to tag your friends in comments