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

Azizi Yazit

April 21, 2021
Tweet

More Decks by Azizi Yazit

Other Decks in Research

Transcript

  1. 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
  2. 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!
  3. Scaling Design System - Case Study Material Design Firebase Cloud

    Drive Map Caution! This is just case study and not represent the real/exact google
  4. 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
  5. 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
  6. 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
  7. Foundation A AA Colours Typography Icons Layout 14px Spacing Grid

    Flex Box Rules & Guidelines Provider Design System - Create your own Design System
  8. 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>
  9. 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
  10. 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
  11. 4 Keys Characteristics of Design System StyleGuide Driven Development Atomic

    Design & Code generator schematic Deploy your Design System builder Design System