Building a Mobile Design System

by Kristina Fox

Slide 1

Slide 1 text

@krstnfx kristina.io MOBILE DESIGN SYSTEMS Kristina Fox | Senior iOS Engineer | Intuit

Slide 2

Slide 2 text

@krstnfx kristina.io h i t u n e s . a p p l e . c o m / u s / a p p / q u i c k b o o k s - s e l f - e m p l o y e d / i d 8 9 8 0 7 6 9 7 6

Slide 3

Slide 3 text

@krstnfx kristina.io design system? W H A T I S A

Slide 4

Slide 4 text

@krstnfx kristina.io Design system Design system A series of components that can be reused in different combinations. Design systems allow you to manage design at scale. W H A T I S A D E S I G N S Y S T E M ? f o r u m o n e . c o m / i d e a s / w h a t - i s - d e s i g n - s y s t e m “

Slide 5

Slide 5 text

@krstnfx kristina.io

Slide 6

Slide 6 text

@krstnfx kristina.io

Slide 7

Slide 7 text

@krstnfx kristina.io Title label Body text

Slide 8

Slide 8 text

@krstnfx kristina.io Title label Body text

Slide 9

Slide 9 text

@krstnfx kristina.io Title label Body text Title label Body text Title label Body text Title label Body text

Slide 10

Slide 10 text

@krstnfx kristina.io

Slide 11

Slide 11 text

@krstnfx kristina.io Title label Body text Title label Body text Title label Body text Title label Body text

Slide 12

Slide 12 text

@krstnfx kristina.io b r a d f r o s t . c o m / b l o g / p o s t / a t o m i c - w e b - d e s i g n /

Slide 13

Slide 13 text

@krstnfx kristina.io beneﬁt? W H O D O E S I T

Slide 14

Slide 14 text

@krstnfx kristina.io Everyone! Everyone! W H O D O E S I T B E N E F I T ? ! Engineers " Designers # End users

Slide 15

Slide 15 text

@krstnfx kristina.io applicable? W H E R E I S I T

Slide 16

Slide 16 text

@krstnfx kristina.io a i r b n b . d e s i g n / b u i l d i n g - a - v i s u a l - l a n g u a g e

Slide 17

Slide 17 text

@krstnfx kristina.io a i r b n b . d e s i g n / b u i l d i n g - a - v i s u a l - l a n g u a g e

Slide 18

Slide 18 text

@krstnfx kristina.io m e d i u m . c o m / t a p - t o - d i s m i s s / a - d e s i g n - s y s t e m s - i m p a c t - 1 5 9 f 4 a d 3 c 2 3 0

Slide 19

Slide 19 text

@krstnfx kristina.io get started? H O W D O Y O U

Slide 20

Slide 20 text

@krstnfx kristina.io $ “How to create a mobile design system”

Slide 21

Slide 21 text

@krstnfx kristina.io m e d i u m . f r e e c o d e c a m p . o r g / h o w - t o - b u i l d - a - d e s i g n - s y s t e m - w i t h - a - s m a l l - t e a m - 5 3 a 3 2 7 6 d 4 4 a c

Slide 22

Slide 22 text

@krstnfx kristina.io % How to implement a mobile design system

Slide 23

Slide 23 text

@krstnfx kristina.io b r a d f r o s t . c o m / b l o g / p o s t / a t o m i c - w e b - d e s i g n /

Slide 24

Slide 24 text

@krstnfx kristina.io What are the most basic building blocks?

Slide 25

Slide 25 text

@krstnfx kristina.io What are the most basic building blocks? Fonts and colors!

Slide 26

Slide 26 text

@krstnfx kristina.io Congrats! You’re already started!

Slide 27

Slide 27 text

@krstnfx kristina.io Fonts Fonts H O W D O Y O U G E T S T A R T E D ? enum FontStyle { case display1 case display2 case display3 case headline case headline2 case hero case pageTitle }

Slide 28

Slide 28 text

@krstnfx kristina.io Colors Colors H O W D O Y O U G E T S T A R T E D ? enum Color { case blue01 case blue02 case blue03 case quickbooksGreen case quickbooksLtGray case quickbooksDkGray case pink01 }

Slide 29

Slide 29 text

@krstnfx kristina.io label.textColor = UIColor(named: "blue01")

Slide 30

Slide 30 text

@krstnfx kristina.io UI Controls UI Controls H O W D O Y O U G E T S T A R T E D ? UIKit standard QuickBooks Self-Employed Lyft

Slide 31

Slide 31 text

@krstnfx kristina.io UI Components UI Components H O W D O Y O U G E T S T A R T E D ? let doneButton = ActionButton()  doneButton.setButton(style: .Save) Done

Slide 32

Slide 32 text

@krstnfx kristina.io UI Components UI Components H O W D O Y O U G E T S T A R T E D ? let deleteButton = ActionButton()  deleteButton.setButton(style: .Destructive)

Slide 33

Slide 33 text

@krstnfx kristina.io View Components View Components H O W D O Y O U G E T S T A R T E D ? a i r b n b . d e s i g n / b u i l d i n g - a - v i s u a l - l a n g u a g e

Slide 34

Slide 34 text

@krstnfx kristina.io View Components View Components H O W D O Y O U G E T S T A R T E D ? d e s i g n s y s t e m . q u i c k b o o k s . c o m / b o l t

Slide 35

Slide 35 text

@krstnfx kristina.io Piecing Together Piecing it Together H O W D O Y O U G E T S T A R T E D ?

Slide 36

Slide 36 text

@krstnfx kristina.io Epoxy by Airbnb Epoxy by Airbnb H O W D O Y O U G E T S T A R T E D ? override fun buildModels(photos: List, loadingMore: Boolean) { } g i t h u b . c o m / a i r b n b / e p o x y header { id("header") title("My Photos") description("My album description!") } photos.forEach { photoView { id(it.id()) url(it.url()) } }

Slide 37

Slide 37 text

@krstnfx kristina.io Implementing de Implementing Design Systems H O W D O Y O U G E T S T A R T E D ? • Fonts & Colors • UI Controls • UI Components • View Components • Piecing it together

Slide 38

Slide 38 text

@krstnfx kristina.io keep others aligned? H O W D O Y O U

Slide 39

Slide 39 text

@krstnfx kristina.io Documentation Documentation is Key H O W D O Y O U K E E P O T H E R S A L I G N E D ? m a t e r i a l . i o / d e v e l o p / i o s / c o m p o n e n t s / b u t t o n s /

Slide 40

Slide 40 text

@krstnfx kristina.io Stay in sync with Stay in sync with design H O W D O Y O U K E E P O T H E R S A L I G N E D ? ! Engineers " Designers

Slide 41

Slide 41 text

@krstnfx kristina.io things to keep in mind? W H A T A R E S O M E

Slide 42

Slide 42 text

@krstnfx kristina.io Over-engineering Over-engineering is bad W H A T A R E S O M E T H I N G S T O K E E P I N M I N D ? Just because you can, doesn’t mean you should. “

Slide 43

Slide 43 text

@krstnfx kristina.io Building a workin Building a working relationship W H A T A R E S O M E T H I N G S T O K E E P I N M I N D ? ! Engineers " Designers

Slide 44

Slide 44 text

@krstnfx kristina.io Thanks! @krstnfx | kristina.io