[DevDojo] Design System for Mobile

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What’s Design System

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

NOT a new idea Real world examples ☝

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Framework Design System is a framework for building design Design Doc Design System is a design documentation deﬁning how to implement the UIs Protocol Buﬀers The Design System Implementation is a ProtoBuf like library but for building UIs

Slide 9

Slide 9 text

Why need Design System Understanding from the history of UI implementation

Slide 10

Slide 10 text

If not using Design System

Slide 11

Slide 11 text

When we want a constant value…

Slide 12

Slide 12 text

Implement Link text in other place…

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Implement Link text in other place…

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Refactoring with Design System example…

Slide 17

Slide 17 text

We have to care about design detail

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

By given Designs Designers Engineers Designing Coding

Slide 20

Slide 20 text

Similar UI existing

Slide 21

Slide 21 text

By given Design System Design System Design System Implementation Designers Engineers

Slide 22

Slide 22 text

󰩔 So...

Slide 23

Slide 23 text

Framework Design System is a framework for building design Design Doc Design System is a design documentation deﬁnining how to implement the UIs Protocol Buﬀers The Design System Implementation is a ProtoBuf like library but for building UIs

Slide 24

Slide 24 text

Game Changing Thanks for the revolution of Design Tools 🎮

Slide 25

Slide 25 text

Sketch 2010 ~ Zeplin 2015 ~ Figma 2016 ~

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Only limited styles ex, can not deﬁne 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 29

Slide 29 text

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

Slide 30

Slide 30 text

Relationship with DS implementation and screen

Slide 31

Slide 31 text

Implementation 󰞵

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

Style (Theme) or Brand

Slide 34

Slide 34 text

Brand (Design System)

Slide 35

Slide 35 text