Design System 101

Design System 101

Transcript

1. Azizi Yazit
   Architect
   Developer
   Speaker
   History
   

   View Slide

2. Backend
   Frontend
   Service
   module
   components
   

   View Slide

3. Backend
   GUI
   Service
   module
   components
   all screenshots taken from https://setproduct.com/
   

   View Slide

4. Style-guide
   Frontend
   Designer
   UI Developer
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. Design System
    Components
    Input
    Dropdown
    Button
    Canvas Docs
    Button
    Examples
    
    
    
    Publish
    Publish
    Publish Publish
    Publish
    • added icon
    • new background colour (purple)
    • removed border
    Design System
    Components
    Input
    Dropdown
    Button
    Canvas Docs
    Button
    Examples
    
    
    
    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
    

    View Slide

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
    

    View Slide

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
    • …
    

    View Slide

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
    • …
    

    View Slide

18. Component Library Standards
    Spacing System Colours System
    Design System
    

    View Slide

19. Material Design
    

    View Slide

20. Ant Design
    

    View Slide

21. Material Design
    

    View Slide

22. Primer Design
    

    View Slide

23. Carbon Design
    

    View Slide

24. Lightning Design
    

    View Slide

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.
    

    View Slide

26. Component Library
    Design System
    

    View Slide

27. Component Library
    Design System
    

    View Slide

28. Component Library
    Design System
    

    View Slide

29. Component Library
    Design System
    

    View Slide

30. Component Library
    Design System
    

    View Slide

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
    

    View Slide

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_*)
    

    View Slide

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)
    

    View Slide

34. Design System
    Colours System
    Colours system helps
    you apply colour to
    your UI in a meaningful
    way.
    var(—colour_*)
    

    View Slide

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)
    

    View Slide

36. Summary
    Design System
    Standards
    Canvas Docs
    Overview
    About this Design System
    Your Design System Name
    Overview
    Components
    Spacing
    Colours
    

    View Slide

37. Figma
    

    View Slide

38. Storybook
    

    View Slide