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.

9455cf8cef7162321b21a354d27f6dba?s=128

Kristina Fox

March 22, 2019
Tweet

Transcript

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

    Engineer | Intuit
  2. @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
  3. @krstnfx kristina.io design system? W H A T I S

    A
  4. @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 “
  5. @krstnfx kristina.io

  6. @krstnfx kristina.io

  7. @krstnfx kristina.io Title label Body text

  8. @krstnfx kristina.io Title label Body text

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

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

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

    Title label Body text Title label Body text
  12. @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 /
  13. @krstnfx kristina.io benefit? W H O D O E S

    I T
  14. @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
  15. @krstnfx kristina.io applicable? W H E R E I S

    I T
  16. @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
  17. @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
  18. @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
  19. @krstnfx kristina.io get started? H O W D O Y

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

  21. @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
  22. @krstnfx kristina.io % How to implement a mobile design system

  23. @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 /
  24. @krstnfx kristina.io What are the most basic building blocks?

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

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

  27. @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 }
  28. @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 }
  29. @krstnfx kristina.io label.textColor = UIColor(named: "blue01")

  30. @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
  31. @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
  32. @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)
  33. @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
  34. @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
  35. @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 ?
  36. @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()) } }
  37. @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
  38. @krstnfx kristina.io keep others aligned? H O W D O

    Y O U
  39. @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 /
  40. @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
  41. @krstnfx kristina.io things to keep in mind? W H A

    T A R E S O M E
  42. @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. “
  43. @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
  44. @krstnfx kristina.io Thanks! @krstnfx | kristina.io