Tweet
Tweet

Slide 1

Slide 1 text

Design System for Mobile DevDojo version

Slide 2

Slide 2 text

@kevin iOS Engineer at Marketplace Joined Mercari since 2023

Slide 3

Slide 3 text

● Why are Design Systems relevant to you? ● What’s a Design System? ● Why are Design Systems needed? ● Implementation & Structure Agenda

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

What’s a Design System?

Slide 6

Slide 6 text

Guideline consisting of rules, styles and components used to build application user experiences Design System is…

Slide 7

Slide 7 text

NOT a new idea 💡 Exists in the real world

Slide 8

Slide 8 text

Concept born from Software Design Patterns Design System is Software Engineering 💻

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Why do we need Design Systems?

Slide 11

Slide 11 text

Not using a Design System

Slide 12

Slide 12 text

When we need a constant value (like color)

Slide 13

Slide 13 text

Now we want more Link text

Slide 14

Slide 14 text

Good job, until...🫣 Yes, you may have already noticed

Slide 15

Slide 15 text

Keep adding Link text

Slide 16

Slide 16 text

How would it improve with a Design System?

Slide 17

Slide 17 text

We don’t need to care about design details

Slide 18

Slide 18 text

Refactoring previous example with Design System

Slide 19

Slide 19 text

Communicating design is hard 🙈

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Different UI for the same elements

Slide 22

Slide 22 text

Design System Design System Implementation

Slide 23

Slide 23 text

󰩔 So...

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Evolution of Design Tools

Slide 26

Slide 26 text

Sketch 2010 ~ Zeplin 2015 ~ Figma 2016 ~

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Limitations

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Using Design System in Mercari

Slide 32

Slide 32 text

Relationship of Design System and Screen Feature Screen 📱 DS Implementation Design System

Slide 33

Slide 33 text

DS Implementation Feature Relationship of Design System and Screen

Slide 34

Slide 34 text

Design System Detail & Structure in Mercari 󰞵

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

Style (Theme) or Brand

Slide 38

Slide 38 text

Brand (Design System)

Slide 39

Slide 39 text

Brand (Design System)

Slide 40

Slide 40 text

Component Nothing Fancy

Slide 41

Slide 41 text

Button

Slide 42

Slide 42 text

Other components…

Slide 43

Slide 43 text

Requirements Latest Technologies Multiple Devices Accessibility Brand Switching

Slide 44

Slide 44 text

SwiftUI

Slide 45

Slide 45 text

Declarative Syntax and Less code

Slide 46

Slide 46 text

No StoryBoard, No AutoLayout

Slide 47

Slide 47 text

Native on All Apple Platforms

Slide 48

Slide 48 text

For Productivity 📱💻🖥

Slide 49

Slide 49 text

PlayBook(UICatalog)

Slide 50

Slide 50 text

Snapshot test

Slide 51

Slide 51 text

Accessibility 🌙☀

Slide 52

Slide 52 text

DarkMode

Slide 53

Slide 53 text

Dynamic Type

Slide 54

Slide 54 text

Voice Over

Slide 55

Slide 55 text

Thank You Any Questions?