[DevDojo] Design System for Mobile

To provide customers with a sustainable and consistent service experience, Mercari places a strong emphasis on the Design System. In this course, we will explain the fundamentals of Design System in mobile applications and how we create and implement design at Mercari.

Transcript

1. 1
   Design System for Mobile
   Fumiya Kume
   Mercari Acquisition & Activation Team / Software Engineer
   

   View Slide

2. ● Why should you know Design System
   ● What’s Design System
   ● Why need Design System
   ● Implementation & Structure
   Agenda
   

   View Slide

3. Mobile / Frontend Engineer
   Use the Design System during develop the service.
   Designer
   Use the Design System to make the UI.
   Backend engineer / etc…
   Investigate the client code in the future.
   Why should your know Design System
   

   View Slide

4. What’s Design System
   

   View Slide

5. Standard language and
   visual consistency
   within different system.
   Design System is…
   

   View Slide

6. NOT a new idea
   Real world examples ☝
   

   View Slide

7. The idea of Design System is stolen from engineers 🥷
   Already exists
   

   View Slide

8. Framework
   Design System is a framework for building design
   Design Doc
   Design System is a design documentation defining how
   to implement the UIs
   Protocol Buffers
   The Design System Implementation is a ProtoBuf like
   library but for building UIs
   

   View Slide

9. Why need
   Design System
   Understanding from the history of UI implementation
   

   View Slide

10. If not using
    Design System
    

    View Slide

11. When we want a constant value…
    

    View Slide

12. Implement Link text in other place…
    

    View Slide

13. Good job, until...
    This is where you know you need to laugh at the next slide 󰣻
    

    View Slide

14. Implement Link text in other place…
    

    View Slide

15. How would the code improve
    if we had the Design System?
    

    View Slide

16. Refactoring with Design System example…
    

    View Slide

17. We have to care about design detail
    

    View Slide

18. We are not perfect
    Except the mistakes we made on implementing the design 🤫
    

    View Slide

19. By given Designs
    Designers
    Engineers
    Designing
    Coding
    

    View Slide

20. Similar UI existing
    

    View Slide

21. By given Design System
    Design System
    Design System Implementation
    Designers
    Engineers
    

    View Slide

22. 󰩔
    So...
    

    View Slide

23. Framework
    Design System is a framework for building design
    Design Doc
    Design System is a design documentation definining
    how to implement the UIs
    Protocol Buffers
    The Design System Implementation is a ProtoBuf like
    library but for building UIs
    

    View Slide

24. Game Changing
    Thanks for the revolution of Design Tools 🎮
    

    View Slide

25. Sketch
    2010 ~
    Zeplin
    2015 ~
    Figma
    2016 ~
    

    View Slide

26. View Slide

27. View Slide

28. Only limited styles
    ex, can not define spacing token (Except Zeplin)
    Single layer reference
    Can not refer a style reference as value to another style
    Single theme
    Not easy to switch themes on design tool without plugin
    

    View Slide

29. History
    Legacy
    (original) design
    Design
    1.0
    Rebranding (+
    dark mode)
    DS 2.0
    The first
    Design System
    DS 1.5
    New Design
    System
    DS 3.0
    …...
    Future
    

    View Slide

30. Relationship with DS implementation and screen
    

    View Slide

31. Implementation
    󰞵
    

    View Slide

32. Styles
    Including colors, sizes (margin,
    paddings), typography, etc. which
    defines the appearance of the
    application and can be changed by
    external factors like: color mode,
    localization, screen size ...
    Components
    A set of UI blocks can be modified
    under rules defined by Design
    System. The appearance of
    components are based on styles. A
    Design System Component can have
    multiple implementations based on
    platform or screen sizes.
    

    View Slide

33. Style (Theme)
    or Brand
    

    View Slide

34. Brand (Design System)
    

    View Slide

35. Brand (Design System)
    

    View Slide

36. Component
    Nothing Fancy
    

    View Slide

37. Button
    

    View Slide

38. Other components…
    

    View Slide

39. Building a Design System implementation using Jetpack Compose — Part1
    Building a Design System implementation using Jetpack Compose — Part2
    Want to know more?
    

    View Slide

40. Requirements
    Latest Technologies Multiple Devices Accessibility Brand Switching
    

    View Slide

41. SwiftUI
    

    View Slide

42. Declarative Syntax and Less code
    

    View Slide

43. No StoryBoard, No AutoLayout
    

    View Slide

44. Native on All Apple Platforms
    

    View Slide

45. For Productivity
    📱💻🖥
    

    View Slide

46. PlayBook(UICatalog)
    

    View Slide

47. Snapshot test
    

    View Slide

48. Accessibility
    🌙☀
    

    View Slide

49. DarkMode
    

    View Slide

50. Dynamic Type
    

    View Slide

51. Voice Over
    

    View Slide

52. 52
    Thank you!
    

    View Slide