Build Scalable Design System Using Provider-Consumer Pattern

Build Scalable Design System Using Provider-Consumer Pattern

Transcript

1. Creating Successful Scalable Design System
   @aziziyazit
   

   View Slide

2. A Little Bit About Me
   

   View Slide

3. Design System
   A design system is a collection of reusable
   components, guided by clear standards, that can be
   assembled together to build any number of
   applications.
   “
   WILL FANGUY, IN-VISION
   

   View Slide

4. Design System
   A design system is a collection of reusable
   components, guided by clear standards, that can be
   assembled together to build any number of
   applications.
   “
   WILL FANGUY, IN-VISION
   Scale!
   

   View Slide

5. Design System
   Did
   
   Assembled together to build any
   number of applications
   is considered
   
   scale?
   

   View Slide

6. Design System
   NO!
   

   View Slide

7. Design System
   Scaling Design System means, supports your
   organisation’s many teams, products and
   platforms.
   

   View Slide

8. Scaling Design System - Case Study
   Material Design
   Firebase Cloud Drive Map
   Caution! This is just case study and not represent the real/exact google
   

   View Slide

9. Scaling Design System - Case Study
   

   View Slide

10. Scaling Design System - Case Study
    Provider Design System
    Consumer
    Design System
    Consumer
    Design System
    Consumer
    Design System
    Consumer
    Design System
    Caution! This is just case study and not represent the real/exact google
    

    View Slide

11. Scaling Design System - Case Study
    Material Design
    Material.Firebase Material.Cloud Material.Drive Material.Map
    40% 60% 30% 70%
    Adapting Material Design
    Customised
    Caution! This is just case study and not represent the real/exact google
    

    View Slide

12. Scaling Design System - Let’s creating one
    Provider Design System
    Consumer
    Design System
    Consumer
    Design System
    Consumer
    Design System
    Consumer
    Design System
    Design
    System
    Product A Product B Product C Product D
    

    View Slide

13. Provider Design System - Create your own Design System
    Basic Components
    Compound Components
    

    View Slide

14. Foundation
    A
    AA
    Colours Typography Icons
    Layout
    14px
    Spacing
    Grid Flex Box
    Rules & Guidelines
    Provider Design System - Create your own Design System
    

    View Slide

15. Provider Design System - Create your own Design System
    Compound Component
    
    
    
    
    Tabs
    dispatch
    forward state
    
    
    
    
    
    Sub-Container
    Sub-Container
    Sub-Container
    Container
    
    
    
    
    
    
    

    View Slide

16. Provider Design System - Create your own Design System
    Compound Component
    
    
    
    
    
    Card
    dispatch
    forward state
    
    
    
    
    
    Sub-Container
    Sub-Container
    Sub-Container
    Container
    

    View Slide

17. Provider Design System - Create your own Design System
    Compound Component Accordion
    dispatch
    forward state
    
    
    
    
    
    Sub-Container
    Sub-Container
    Sub-Container
    Container
    
    
    
    
    1
    2
    4
    5
    6
    

    View Slide

18. 4 Keys Characteristics
    of Design System
    StyleGuide Driven Development
    Atomic Design & Code generator
    schematic
    Deploy your Design System
    builder
    Design System
    

    View Slide

19. Design system in general
    Documented
    components
    Playground
    Living
    Single Source of
    Truth
    1
    2
    3
    4
    

    View Slide

20. Provider Design System - Create your own Design System
    Basic Components
    Compound Components
    

    View Slide