Build Scalable Design System Using Provider-Consumer Pattern

Build Scalable Design System Using Provider-Consumer Pattern

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