4 Characteristics of Design System

3 minutes lightning talk with Azizi series. This talk will talk about 4 characteristic of Design System.

Transcript

1. The 4 key characteristics of the Design System 3 mins @aziziyazit Lighting talk 1
2. Design system in general Documented components Playground Living Single Source of Truth 1 2 3 4
3. Design system in general Documented components 1
4. Design system in general Playground 2
5. 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
6. 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
7. 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
8. 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
9. 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
10. Style-guide driven development 4 Phases Design Auditing Component Abstraction Publish into Storybook Integrated in Apps 1 2 3 4 Placeholder Button Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Header A Placeholder A Atoms Button Molecules Header Header A Placeholder Button Button Button Secondary Button