Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
    MOBILE
    DESIGN SYSTEMS
    Kristina Fox | Senior iOS Engineer | Intuit

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  5. @krstnfx
    kristina.io

    View Slide

  6. @krstnfx
    kristina.io

    View Slide

  7. @krstnfx
    kristina.io
    Title label Body text

    View Slide

  8. @krstnfx
    kristina.io
    Title label
    Body text

    View Slide

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

    View Slide

  10. @krstnfx
    kristina.io

    View Slide

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

    View Slide

  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 /

    View Slide

  13. @krstnfx
    kristina.io
    benefit?
    W H O D O E S I T

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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 /

    View Slide

  24. @krstnfx
    kristina.io

    What are the most basic building blocks?

    View Slide

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

    View Slide

  26. @krstnfx
    kristina.io

    Congrats! You’re already started!

    View Slide

  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
    }

    View Slide

  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
    }

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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 ?

    View Slide

  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, 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())
    }
    }

    View Slide

  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

    View Slide

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

    View Slide

  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 /

    View Slide

  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

    View Slide

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

    View Slide

  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.

    View Slide

  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

    View Slide

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

    View Slide