Building your next design system (NgConfCo)

Building your next design system (NgConfCo)

Talk at Angular Columbia Conference

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

August 14, 2020
Tweet

Transcript

  1. Build Your Next Design System With Angular Lighting talk @aziziyazit

  2. Azizi Yazit Frontend Architect Leading Design System Team Component Library

    Living StyleGuide Spacing System Pattern Library Colors system Layout Theme A Little bit about me
  3. Talk Roadmap 4 Keys Characteristics of Design System StyleGuide Driven

    Development Atomic Design & Code generator schematic Deploy your Design System builder
  4. Design system in general Documented components Playground Living Single Source

    of Truth 1 2 3 4
  5. Design system in general Documented components 1

  6. Design system in general Documented components 1 Components Foundation

  7. Design system in general Documented components 1 implementation code actual

    component displayed
  8. Design system in general Playground 2

  9. Design system in general Playground 2

  10. Design system in general Living 3 Button Button Primary <a-button(click)=“click”>

    Button </a-button> Button Button Secondary Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Button Button Header ID Password Header Header ID Password Header Button Button App 1 App 2 App 1 App 2
  11. Design system in general Single Source Of Truth 4 Button

    Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary New requirements UX Designer Logout Logout Frontend Engineer Logout Logout ? Designer referring to the Style-Guide ? Designer produce Zeplin page ? Engineer create new button variant ? Engineer perform Design Audit ? Engineer publish new button variant into the Style-Guide
  12. Design system in general Single Source Of Truth 4 Button

    Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary New requirements UX Designer Logout Logout Frontend Engineer Logout Logout ? Designer referring to the Style-Guide ? Designer produce Zeplin page ? Engineer create new button variant ? Engineer perform Design Audit ? Engineer publish new button variant into the Style-Guide
  13. Design system in general Single Source Of Truth 4 Button

    Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary New requirements UX Designer Logout Logout Frontend Engineer Logout Logout ? Designer referring to the Style-Guide ? Designer produce Zeplin page ? Engineer create new button variant ? Engineer perform Design Audit ? Engineer publish new button variant into the Style-Guide
  14. Design system in general Single Source Of Truth 4 Button

    Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary New requirements UX Designer Logout Logout Frontend Engineer Logout Logout ? Designer referring to the Style-Guide ? Designer produce Zeplin page ? Engineer create new button variant ? Engineer perform Design Audit ? Engineer publish new button variant into the Style-Guide
  15. Style-guide driven development 4 Phases Design Auditing Component Abstraction Publish

    into Storybook Integrated in Apps 1 2 3 4 Placeholder Button Button Button Header A Placeholder A Atoms Button Molecules Header Header A Placeholder Button Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Button
  16. Component architecture Atomic Design Button Placeholder Placeholder Button Atom Molecules

    Organisms Placeholder Button <m-search-field> <a-text-field> <a-button> <m-search-field> <m-table> <o-search-results>
  17. Component architecture Adapting the Atomic Design Story code Component code

    Storybook Style-Guide 1 2 3
  18. Workflow Angular Schematic $ npm run create-story ? what is

    the component name > Atom Molecules Organisms CREATE MyAtomComponent.component.ts (1323 bytes) CREATE MyAtomComponent.stories.ts (1323 bytes) Component Story creation $ npm run copy-story ? what is the type of the component > Atom Molecules Organisms CREATE NewButton.component.ts (1323 bytes) CREATE NewButton.stories.ts (1323 bytes) Copy existing component ? choose below atoms > Button TextField Dropdown Avatar Switcher Checkbox Radio ? what is your preferred name
  19. Deploy Design system Angular Builder $ ng deploy Build Completed

    Deploy to NETLIFY User Verified Site ID Confirmed Deploying project from location ./“storybook-static Your updated site is running
  20. Summary Component Backoffice Storefront Workspace L A A L lib

    A app schematic Atoms Molecules Organisms builder Netlify Publish as Style-Guide Publish as Component library
  21. Let’s see the DEMO! Application Component 1 $ npm start

    1 $ npm run storybook
  22. Codes And Resources https://github.com/ngdesignsystem/components 2. Angular default page (component based)

    3. Schematic https://github.com/ngdesignsystem/schematics 4. Live example https://ngcomponents.netlify.app/?path=/story/welcome--to-storybook https://speakerdeck.com/aziziyazit/building-your-next-design-system-ngconfco 1. Slide