Building your next design system

861e71f9f52486eb8bba75261a923004?s=47 Azizi Yazit
November 20, 2019

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

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

November 20, 2019
Tweet

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