Building your next design system

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. In this talk we will go thru building our next design system with Angular

Transcript

1. Build your next design system with Angular Angular Meetup
2. Communicating Design Principles At Scale Elevating The Experience Of Your Design System Creating And Evolving A Cross-Platform System At Scale How To Know When You’ve Outgrown Your Design System Introducing Design Systems Into Chaos
3. The HYPE is real!!
4. Design System in general Tools and Stack Today Agenda Get to know methodology - Atomic Design Building our design system
5. 1. Setup naive continuous integration with CircleCI 2.Add a design system 3. Add offline support and PWA superpowers 4. Add Firebase Authentication 5. Add a server & backend 5 things to do after `ng new` https://fluin.io/blog/5-things-to-do-after-ng-new
6. “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. Will Fanguy, Invision
7. Developer Designer Design System Designer and Developer Collaboration Design handoff Visual Review Single Source Of Truth
8. Google
9. VMWare
10. Your next Design System •Reusable component •Monorepo •Schematic •Component library •Playground •Documentation and guide }Living Style Guide `npm run create-story` Button, Textfield, Dropdown etc Libraries, Apps etc Discover Abstract into component Implement & Document Integrate Style Guide Driven Development Tools and Stack
11. Atomic Design Atom Molecules Organisms Button Textfield 1 2 3 > > > > Num User name Hafsa Rumaysa 1 2 1 2 3 > > Num User name Hafsa Rumaysa 1 2 Address Petaling Jaya Subang Jaya
12. Lets build the Design System! Setting up SGDD 1 : Discover 1 2 3 > > Num User name Hafsa Rumaysa 1 2 Address Petaling Jaya Subang Jaya
13. Lets build the Design System! SGDD 2 : Abstract into components SGDD 3 : Implement and document Button Textfield > > table
14. Lets build the Design System! SGDD 4 : Integrate 1 2 3 > > Num User name Hafsa Rumaysa 1 2 Address Petaling Jaya Subang Jaya 1 2 3 > > Num User name Hafsa Rumaysa 1 2 Address Petaling Jaya Subang Jaya 1 2 3 > > Num User name Hafsa Rumaysa 1 2 Address Petaling Jaya Subang Jaya 1 2 3 > >
15. Summary • Design Systems enable designers & developers to reuse components and thereby increase efficiency • Angular have incredible tooling that make building reusable component easy and fast • Storybook serve as guidelines and playground known as Living Style Guide • Atomic Design is a methodology used in Style Guide Driven Development