Building your next design system (NgConfCo)

Talk at Angular Columbia Conference

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