Design System 101

Design System 101

Transcript

1. Azizi Yazit Architect Developer Speaker History
2. Backend Frontend Service module components
3. Backend GUI Service module components all screenshots taken from https://setproduct.com/
4. Style-guide Frontend Designer UI Developer
5. Style-guide Frontend UI Developer creates visual representations of concepts and ideas in Figma (static Style-guide) preparing UI assets UI | UX | Graphic Designer
6. Style-guide Frontend Designer A component developer focuses on developing UI building blocks, whereas a application developer focuses on coding applications UI Developer Component Developer Application Developer Develop UI components UI Documentation in Storybook (living Style-guide) Integrate UI components by referring to living Style-guide Manage business logic / application logic
7. Designer Frontend UI Developer Style-guide a document that contains design guidelines for each repeatedly used design element, such as visual identity elements, icons, interface components, and their states, headings, etc Static Living
8. Designer Frontend UI Developer Static Style-guide Figma is a powerful web-based design tool that helps you create anything, websites, applications, logos, and much more.
9. Designer Frontend Pixel Perfect UI Developer Static Style-guide 1 3 4 Verification Designer UI Developer Web App 2 width, height, border, colours, sizing, spacing, CSS etc publish
10. Designer Frontend UI Developer 2 3 developer efforts Static Style-guide 1 Designer Web App UI Developer UI Developer UI Developer Web App Web App change design
11. Designer Frontend UI Developer Living Style-guide Storybook is a frontend workshop for building UI components and pages in isolation. Storybook provides a workshop to build UIs in isolation. It helps you develop hard-to-reach states and edge cases without needing to run the whole app.
12. Designer Frontend Component Developer UI Developer Living Style-guide 1 Designer 2 3 Tester Web App UI Developer Web App UI Developer Web App UI Developer publish develop reusable components Verification
13. Designer Frontend UI Developer Living Style-guide 1 Designer Component Developer 2 3 Tester Web App UI Developer Web App UI Developer Web App UI Developer change develop reusable components Verification 4 all consumers changed
14. Design System Components Input Dropdown Button Canvas Docs Button Examples <ds-button> <ds-button> </ds-button> Publish Publish Publish Publish Publish • added icon • new background colour (purple) • removed border Design System Components Input Dropdown Button Canvas Docs Button Examples <ds-button> <ds-button icon=“publish”> </ds-button> Publish Publish Design System v1.0 v1.1 v1.0 v1.1 v1.1 v1.1 v1.0 Consumers ds-components v1.0 ds-components v1.1
15. App 1 npm install ds-component:1.1 App 2 npm install ds-component:1.1 App 3 npm install ds-component:1.1 node_modules update new button changes 1 2 3 4
16. Style-guide Frontend Designer UI Developer mail calendar meet drive Org Product A Product B Product C • GUI standards • Shareable components • Spacing system • Color system • …
17. Style-guide Frontend Designer UI Developer material.mail Calendar Team Meet Team Drive Team Material Design material.calendar material.meet material.drive Mail Team Design system • GUI standards • Shareable components • Spacing system • Color system • …
18. Component Library Standards Spacing System Colours System Design System
19. Material Design
20. Ant Design
21. Material Design
22. Primer Design
23. Carbon Design
24. Lightning Design
25. Component Library Design System Components are interactive building blocks for creating a user interface. The purpose of such a library is to keep reusable user interface components in a single place that can then be used for different projects.
26. Component Library Design System
27. Component Library Design System
28. Component Library Design System
29. Component Library Design System
30. Component Library Design System
31. Design System Standards Design guidance, specs, and tools to streamline the work of getting from Designer to finished products. Colours Motion Icons Shape Font
32. Design System Spacing System Spacing methods use baseline grids, key-lines, padding, and incremental spacing. 4-Pixel Rule 8-Pixel Rule 4 8 12 16 20 8 16 24 32 var(—size_*)
33. Design System Spacing System Spacing methods use baseline grids, key-lines, padding, and incremental spacing. 4-Pixel Rule 8-Pixel Rule 4 8 12 16 20 8 16 24 32 var(—size_*) var(—size_*) —size_* token name var( ) CSS variable _* token value e.g. _1, _2 example var(—size_1)
34. Design System Colours System Colours system helps you apply colour to your UI in a meaningful way. var(—colour_*)
35. Design System Spacing System Spacing methods use baseline grids, key-lines, padding, and incremental spacing. 4-Pixel Rule 8-Pixel Rule 4 8 12 16 20 8 16 24 32 var(—size_*) var(—colour_*) —size_* token name var( ) CSS variable _* token value e.g. _primary, _secondary example var(—colour_primary)
36. Summary Design System Standards Canvas Docs Overview About this Design System Your Design System Name Overview Components Spacing Colours
37. Figma
38. Storybook