4 Characteristics of Design System

4 Characteristics of Design System

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

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

July 11, 2020
Tweet

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