[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
2. • Why should you know Design System • What’s Design System • Why need Design System • Implementation & Structure Agenda
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
4. What’s Design System
5. Standard language and visual consistency within different system. Design System is…
6. NOT a new idea Real world examples ☝
7. The idea of Design System is stolen from engineers 🥷 Already exists
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
9. Why need Design System Understanding from the history of UI implementation
10. If not using Design System
11. When we want a constant value…
12. Implement Link text in other place…
13. Good job, until... This is where you know you need to laugh at the next slide 󰣻
14. Implement Link text in other place…
15. How would the code improve if we had the Design System?
16. Refactoring with Design System example…
17. We have to care about design detail
18. We are not perfect Except the mistakes we made on implementing the design 🤫
19. By given Designs Designers Engineers Designing Coding
20. Similar UI existing
21. By given Design System Design System Design System Implementation Designers Engineers
22. 󰩔 So...
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
24. Game Changing Thanks for the revolution of Design Tools 🎮
25. Sketch 2010 ~ Zeplin 2015 ~ Figma 2016 ~
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
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
30. Relationship with DS implementation and screen
31. Implementation 󰞵
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.
33. Style (Theme) or Brand
34. Brand (Design System)
35. Brand (Design System)
36. Component Nothing Fancy
37. Button
38. Other components…
39. Building a Design System implementation using Jetpack Compose — Part1 Building a Design System implementation using Jetpack Compose — Part2 Want to know more?
40. Requirements Latest Technologies Multiple Devices Accessibility Brand Switching
41. SwiftUI
42. Declarative Syntax and Less code
43. No StoryBoard, No AutoLayout
44. Native on All Apple Platforms
45. For Productivity 📱💻🖥
46. PlayBook(UICatalog)
47. Snapshot test
48. Accessibility 🌙☀
49. DarkMode
50. Dynamic Type
51. Voice Over
52. 52 Thank you!