[DevDojo] Mercari Design System for Mobile - 2024

Design systems are something that Mercari is heavily focused on in the interest of providing our users with a sustainable and consistent user experience. In this session, we will explain the basics of design systems for mobile, and how we actually create and operate them at Mercari.

Transcript

1. Design System for Mobile DevDojo version
2. @kevin iOS Engineer at Marketplace Joined Mercari since 2023
3. • Why are Design Systems relevant to you? • What’s a Design System? • Why are Design Systems needed? • Implementation & Structure Agenda
4. Designer Use the Design System to design UIs Mobile / Frontend Engineer Use the Design System to understand the design and develop applications. QA Use the Design System to spot inconsistencies in the application. Backend engineer / etc… Understand overall design structure to help designing data, interfaces, etc. Why are Design Systems relevant to you?
5. What’s a Design System?
6. Guideline consisting of rules, styles and components used to build application user experiences Design System is…
7. NOT a new idea 💡 Exists in the real world
8. Concept born from Software Design Patterns Design System is Software Engineering 💻
9. Guideline Design System is a guideline for creating design Language Design System is a common language between design and software development Library The Design System is a library to build User Interfaces
10. Why do we need Design Systems?
11. Not using a Design System
12. When we need a constant value (like color)
13. Now we want more Link text
14. Good job, until...🫣 Yes, you may have already noticed
15. Keep adding Link text
16. How would it improve with a Design System?
17. We don’t need to care about design details
18. Refactoring previous example with Design System
19. Communicating design is hard 🙈
21. Different UI for the same elements
22. Design System Design System Implementation
23. 󰩔 So...
24. Guideline Design System is a guideline for creating design Language Design System is a common language between design and software development Library The Design System is a library to build User Interfaces
25. Evolution of Design Tools
26. Sketch 2010 ~ Zeplin 2015 ~ Figma 2016 ~
29. Limitations
30. 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
31. Using Design System in Mercari
32. Relationship of Design System and Screen Feature Screen 📱 DS Implementation Design System
33. DS Implementation Feature Relationship of Design System and Screen
34. Design System Detail & Structure in Mercari 󰞵
35. History Legacy (original) design Design 1.0 Rebranding (+ dark mode) DS 2.0 The first Design System DS 1.5 Current Design System DS 3.0 Future DS 4.0
36. Styles Including colors, sizes (margin, paddings), typography, etc. which defines the appearance the application and can be changed by external factors like: color mode, localization, screen size ... Components Are 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 base on platform or screen sizes.
37. Style (Theme) or Brand
38. Brand (Design System)
39. Brand (Design System)
40. Component Nothing Fancy
41. Button
42. Other components…
43. Requirements Latest Technologies Multiple Devices Accessibility Brand Switching
44. SwiftUI
45. Declarative Syntax and Less code
46. No StoryBoard, No AutoLayout
47. Native on All Apple Platforms
48. For Productivity 📱💻🖥
49. PlayBook(UICatalog)
50. Snapshot test
51. Accessibility 🌙☀
52. DarkMode
53. Dynamic Type
54. Voice Over
55. Thank You Any Questions?