Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[DevDojo] Design System for Mobile

[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.

mercari
PRO

May 26, 2023
Tweet

More Decks by mercari

Other Decks in Technology

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