Learn how to build a mobile design system from the ground up. Learn what a design system is, how it's useful to your team, how it can help speed up your development and the first few things you need to focus on to get started successfully.
@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 “
@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
@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 }
@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 }
@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
@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)
@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
@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
@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()) } }
@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
@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 /
@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. “
@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
krstnfx
eliasnogueira
ykanoh
6onoda
udzura
hirokiotsuka
tokyo_metropolitan_gov_smart_tokyo_strat
orgachem
____rina____
oogfranz
ahana
gen519
toshiaizawa
iamctodd
kneath
jrom
lauravandoore
quramy
malarkey
soudai
eitanlees
marcelosomers
michaelherold
tanoku
speakerdeck