Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System for Micro frontends

861e71f9f52486eb8bba75261a923004?s=47 Azizi Yazit
October 20, 2021

Design System for Micro frontends

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

October 20, 2021
Tweet

More Decks by Azizi Yazit

Other Decks in Education

Transcript

  1. microfrontends Design system

  2. An architectural style where independently deliverable frontend applications are composed

    into a greater whole
  3. 1 2 3 incremental changes independent deployment autonomous team

  4. A Design system is collection of reusable components, guided by

    clear standard, that can be assembled together to build any number of application.
  5. 1 2 3 documented components living style guide single source

    of truth
  6. Design System App 1 App 2 v1 v1 v1 v2

    v2 v2 App 3 v2 App 4 v1 Centralised
  7. Design System App 1 App 2 v1 v1 v1 v2

    v2 v2 App 3 v2 App 4 v1 Centralised
  8. Design System App 1 App 2 v1 v1 v1 v2

    v2 v2 App 3 v2 App 4 v1 Centralised
  9. Design System App 1 App 2 v1 v1 v1 v2

    v2 v2 App 3 v2 App 4 v1 Centralised independent deployment autonomous team incremental changes
  10. App 1 App 2 App 3 App 4 Independent Design

    System
  11. App 1 App 2 App 3 App 4 Independent Design

    System
  12. App 1 App 2 App 3 App 4 Independent Design

    System
  13. App 1 App 2 App 3 App 4 Independent Design

    System independent deployment autonomous team incremental changes
  14. Provider Design System Color System Spacing System Icons Atomic Components

    Typography Fonts Composite Components Headless UI Compound Component Consumer Design System Customised Atomic Components Implemented Composite Components
  15. Headless UI UI Logics & Interaction handling UI look &

    feel Abstraction Implementation Provider Consumer
  16. Headless UI

  17. Headless UI

  18. Headless UI

  19. Provider-Consumer Provider Design System App 1 App 2 v1 v1

    v1 v2 v2 v2 App 3 v2 App 4 v1 Consumer Design System Consumer Design System Consumer Design System Consumer Design System
  20. Provider Design System App 1 App 2 v1 v1 v1

    v2 v2 v2 App 3 v2 App 4 v1 Consumer Design System Consumer Design System Consumer Design System Consumer Design System independent deployment autonomous team incremental changes