Pro Yearly is on sale from $80 to $50! »

Apps can have Design Systems too!

Apps can have Design Systems too!

Slides for my talk at the App Design & Developer Conference in Barcelona, 2018.

How do you maintain a consistent design for your native apps as well as your website? During this talk I will share my experience creating a living design system for mobile platforms. You'll walk away with the knowledge to start your own design system journey!

Af7e5e2b05ae5f8666233e8fd9122faa?s=128

Jolanda Verhoef

July 06, 2018
Tweet

Transcript

  1. @lojanda Apps can have Design Systems too!

  2. @lojanda ME

  3. @lojanda

  4. @lojanda

  5. @lojanda

  6. @lojanda Apps can have Design Systems too!

  7. None
  8. @lojanda

  9. @lojanda

  10. @lojanda

  11. @lojanda Design System

  12. @lojanda Design System One place with a detailed documentation of

    all the designs, kept in sync with the actual implementation
  13. @lojanda

  14. @lojanda What about Android & iOS?* * Famous last words

  15. @lojanda Design Systems are currently web-oriented

  16. @lojanda Design Systems are currently web-oriented HTML CSS npm install…

    SASS Storybook ReactJS
  17. @lojanda

  18. @lojanda What about native?

  19. @lojanda What about native? Here is a library for React

    Native!
  20. @lojanda What about native? Here is a library for React

    Native! Awesome! But I don’t use React Native.
  21. @lojanda What about native? Here is a library for React

    Native! Awesome! But I don’t use React Native. I think most people just work on web…
  22. @lojanda ME

  23. @lojanda Apps can have Design Systems too!

  24. @lojanda WHAT?

  25. @lojanda Design System Design tokens Components Vision Management

  26. @lojanda Design System Design tokens Components Vision Management

  27. @lojanda Design tokens Core properties that every website and app

    consists out of
  28. @lojanda Colors #C36F60 subtleRed #E2B75E peaceYellow #69B1A8 hipsterBlue

  29. @lojanda Typography Title The quick brown fox jumps over the

    lazy dog. Audiowide, 72px, white Body The quick brown fox jumps over the lazy dog. Helvetica, 48px, white
  30. @lojanda Spacings Spacing small 8px Spacing medium 16px Spacing large

    24px
  31. @lojanda Icons ic_android ic_web ic_chat ic_location

  32. @lojanda Design tokens Colors Typography Spacings Icons

  33. @lojanda Design System Design tokens Components Vision Management

  34. @lojanda Design System Design tokens Components Vision Management

  35. @lojanda Components Core elements that the website and app are

    built out of
  36. @lojanda Components Button Toggle Text input

  37. @lojanda Design System Design tokens Components Vision Management

  38. @lojanda Design System Design tokens Components Vision Management

  39. @lojanda Vision High-level principles that guide you on how to

    create good designs
  40. @lojanda Design System Design tokens Components Vision Management

  41. @lojanda Design System Design tokens Components Vision Management

  42. @lojanda Management Rules surrounding the development and maintenance of the

    Design System
  43. @lojanda Design System Design tokens Components Vision Management

  44. @lojanda

  45. @lojanda

  46. @lojanda Living design system

  47. @lojanda WHY?

  48. @lojanda Apps can have Design Systems too!

  49. @lojanda Design System Design tokens Components Vision Management

  50. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  51. @lojanda Share Design Tokens Colors Typography Spacings Icons

  52. @lojanda Share Design Tokens Web == Android == iOS

  53. @lojanda Share Design Tokens Web != Android != iOS

  54. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) subtleRed
  55. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) ORIGIN subtleRed #C36F60
  56. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) ORIGIN subtleRed #C36F60
  57. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) ORIGIN subtleRed #C36F60
  58. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60

    iOS rgb(195, 111, 96) ORIGIN subtleRed #C36F60
  59. @lojanda Web != Android != iOS Share Design Tokens subtleRed

    #C36F60 Original format
  60. @lojanda Web != Android != iOS Share Design Tokens subtleRed

    #C36F60 Original format Converters to web / android / iOS rgb(195, 111, 96)
  61. @lojanda Web != Android != iOS Share Design Tokens subtleRed

    #C36F60 Original format Converters to web / android / iOS Setup to automatically publish changes rgb(195, 111, 96)
  62. @lojanda Web != Android != iOS Share Design Tokens subtleRed

    #C36F60 Original format Converters to web / android / iOS Setup to automatically publish changes rgb(195, 111, 96) Theo
  63. @lojanda Share Design Tokens - Workflow

  64. @lojanda Share Design Tokens - Workflow Alice

  65. @lojanda Share Design Tokens - Workflow subtleRed #C36F60 Alice

  66. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 Alice

  67. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 Alice

  68. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 Alice

  69. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 Alice

  70. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 Alice

  71. @lojanda Share Design Tokens - Core elements of your UI

    - Shared among web, Android, iOS - Different representation on web, Android, iOS - Changes are automatically distributed
  72. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  73. @lojanda Components Button Toggle Text input

  74. @lojanda Web Design System

  75. @lojanda iOS Design System Android Design System

  76. @lojanda Android App Android Design System

  77. @lojanda Android App Button Code Android Design System

  78. @lojanda 2. Component library Button Code Toggle Code Input Code

  79. @lojanda 2. Component library Design System App Button Code Toggle

    Code Input Code
  80. @lojanda 2. Component library Live App Button Code Toggle Code

    Input Code Design System App
  81. @lojanda Component Library - Workflow Alice

  82. @lojanda Component Library - Workflow Alice

  83. @lojanda Component Library - Workflow Alice

  84. @lojanda Component Library - Workflow Alice

  85. @lojanda Component Library - Workflow Alice

  86. @lojanda Component Library - Workflow Alice

  87. @lojanda Component Library - Workflow Alice

  88. @lojanda 2. Component library & app - Re-usable elements -

    Separate library - Demo app for iOS - Demo app for Android
  89. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  90. @lojanda Android Design System iOS Design System

  91. @lojanda Android iOS Web

  92. @lojanda iOS Android Web

  93. @lojanda Upload screenshots to Design System

  94. @lojanda https://github.com/facebook/screenshot-tests-for-android

  95. @lojanda Component website - Workflow Pablo

  96. @lojanda Component website - Workflow Pablo

  97. @lojanda Component website - Workflow Record Pablo

  98. @lojanda Component website - Workflow Record Pablo

  99. @lojanda Component website - Workflow Record Pablo Verify

  100. @lojanda Component website - Workflow Record Pablo Verify

  101. @lojanda Component website - Workflow Record Pablo Verify

  102. @lojanda Component website - Workflow Pablo

  103. @lojanda Component website - Workflow Pablo

  104. @lojanda Component website - Workflow Pablo

  105. @lojanda Component website - Workflow Pablo Verify

  106. @lojanda Component website - Workflow Pablo Verify

  107. @lojanda Component website - Workflow Pablo Verify

  108. @lojanda Component website - Workflow Pablo Verify

  109. @lojanda Upload screenshots to Design System

  110. @lojanda Upload screenshots to Design System Full customisation No dependencies

  111. @lojanda Upload screenshots to Design System Full customisation No dependencies

    Technically hard No interactions No animations
  112. @lojanda Run an emulator in your browser

  113. @lojanda Run an emulator in your browser Appetize.io * I’m

    not commercially linked to these products
  114. @lojanda Run an emulator in your browser

  115. @lojanda Run an emulator in your browser Easy integration Full

    experience
  116. @lojanda Run an emulator in your browser Easy integration Full

    experience 3rd party dependency Pretty expensive Not directly visible
  117. @lojanda 3. Component website - One place for the Design

    System - Upload screenshots - Run emulator in browser
  118. 1. Share Design Tokens 2. Component library & demo app

    3. Component website
  119. @lojanda ME

  120. @lojanda Resources • Twitter: @lojanda • Theo: github.com/salesforce-ux/theo • appetize.io:

    appetize.io • Run that app: runthatapp.com • Sample: github.com/jolandaverhoef/living-design-system-android
  121. @lojanda Apps can have Design Systems too! Join the discussion

    at design-systems.slack.com / #topic-mobile
  122. @lojanda Q&A