$30 off During Our Annual Pro Sale. View Details »

Building a Mobile Design System

Building a Mobile Design System

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.

Kristina Fox

March 22, 2019
Tweet

More Decks by Kristina Fox

Other Decks in Technology

Transcript

  1. @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
  2. @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 “
  3. @krstnfx kristina.io Title label Body text Title label Body text

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

    Title label Body text Title label Body text
  5. @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 /
  6. @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
  7. @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
  8. @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
  9. @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
  10. @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
  11. @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 /
  12. @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 }
  13. @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 }
  14. @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
  15. @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
  16. @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)
  17. @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
  18. @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
  19. @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<Photo>, 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()) } }
  20. @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
  21. @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 /
  22. @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
  23. @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. “
  24. @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