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

Design System for Micro frontends

Azizi Yazit
October 20, 2021

Design System for Micro frontends

Azizi Yazit

October 20, 2021
Tweet

More Decks by Azizi Yazit

Other Decks in Education

Transcript

  1. microfrontends
    Design system

    View full-size slide

  2. An architectural style where independently
    deliverable frontend applications are composed
    into a greater whole

    View full-size slide

  3. 1
    2
    3
    incremental
    changes
    independent
    deployment
    autonomous
    team

    View full-size slide

  4. A Design system is collection of reusable
    components, guided by clear standard, that can be
    assembled together to build any number of
    application.

    View full-size slide

  5. 1
    2
    3
    documented
    components
    living
    style guide
    single source
    of truth

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. App 1
    App 2
    App 3
    App 4
    Independent
    Design
    System
    independent deployment
    autonomous team
    incremental changes

    View full-size slide

  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

    View full-size slide

  15. Headless UI
    UI Logics &
    Interaction handling
    UI look & feel
    Abstraction Implementation
    Provider Consumer

    View full-size slide

  16. 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

    View full-size slide

  17. 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

    View full-size slide