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

Build Scalable Design System Using Provider-Consumer Pattern

Build Scalable Design System Using Provider-Consumer Pattern

Build Scalable Design System Using Provider-Consumer Pattern

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

April 21, 2021
Tweet

Transcript

  1. Creating Successful Scalable Design System @aziziyazit

  2. A Little Bit About Me

  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
  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!
  5. Design System Did Assembled together to build any number of

    applications is considered scale?
  6. Design System NO!

  7. Design System Scaling Design System means, supports your organisation’s many

    teams, products and platforms.
  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
  9. Scaling Design System - Case Study

  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
  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
  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
  13. Provider Design System - Create your own Design System Basic

    Components Compound Components
  14. Foundation A AA Colours Typography Icons Layout 14px Spacing Grid

    Flex Box Rules & Guidelines Provider Design System - Create your own Design System
  15. Provider Design System - Create your own Design System Compound

    Component <Tabs> </Tabs> <TabList> <TabPanels> Tabs dispatch forward state <Provider> </Provider> <ConsumerA> <ConsumerB> <ConsumerC> Sub-Container Sub-Container Sub-Container Container </TabList> <Tab> <Tab> </TabPanels> <TabPanel> <TabPanel>
  16. Provider Design System - Create your own Design System Compound

    Component <Card> </Card> <CardHeader> <CardContent> <CardActions> Card dispatch forward state <Provider> </Provider> <ConsumerA> <ConsumerB> <ConsumerC> Sub-Container Sub-Container Sub-Container Container
  17. Provider Design System - Create your own Design System Compound

    Component Accordion dispatch forward state <Provider> </Provider> <ConsumerA> <ConsumerB> <ConsumerC> Sub-Container Sub-Container Sub-Container Container <Accordion> </Accordion> <AccordionSummary> <AccordionDetails> 1 2 4 5 6
  18. 4 Keys Characteristics of Design System StyleGuide Driven Development Atomic

    Design & Code generator schematic Deploy your Design System builder Design System
  19. Design system in general Documented components Playground Living Single Source

    of Truth 1 2 3 4
  20. Provider Design System - Create your own Design System Basic

    Components Compound Components