ADDC 2018: Jolanda Verhoef - Apps can have design systems too!

How do you maintain a consistent design for your native apps? This talk will present a solution for creating a living design system on mobile platforms. You'll walk away with the knowledge to start your own design system journey!

More about the talk, authors & slides: https://addconf.com/2018/schedule/apps-can-have-design-systems-too!/
Read about the conference: https://addconf.com

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!
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 HTML CSS npm install… SASS Storybook ReactJS
16. @lojanda
17. @lojanda What about native?
18. @lojanda What about native? Here is a library for React Native!
19. @lojanda What about native? Here is a library for React Native! Awesome! But I don’t use React Native.
20. @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…
21. @lojanda ME
22. @lojanda Apps can have Design Systems too!
23. @lojanda WHAT?
24. @lojanda Design System Design tokens Components Vision Management
25. @lojanda Design System Design tokens Components Vision Management
26. @lojanda Design tokens Core properties that every website and app consists out of
27. @lojanda Colors #C36F60 subtleRed #E2B75E peaceYellow #69B1A8 hipsterBlue
28. @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
29. @lojanda Spacings Spacing small 8px Spacing medium 16px Spacing large 24px
30. @lojanda Icons ic_android ic_web ic_chat ic_location
31. @lojanda Design tokens Colors Typography Spacings Icons
32. @lojanda Design System Design tokens Components Vision Management
33. @lojanda Design System Design tokens Components Vision Management
34. @lojanda Components Core elements that the website and app are built out of
35. @lojanda Components Button Toggle Text input
36. @lojanda Design System Design tokens Components Vision Management
37. @lojanda Design System Design tokens Components Vision Management
38. @lojanda Vision High-level principles that guide you on how to create good designs
39. @lojanda Design System Design tokens Components Vision Management
40. @lojanda Design System Design tokens Components Vision Management
41. @lojanda Management Rules surrounding the development and maintenance of the Design System
42. @lojanda Design System Design tokens Components Vision Management
43. @lojanda
44. @lojanda Living design system
45. @lojanda WHY?
46. @lojanda Apps can have Design Systems too!
47. @lojanda Design System Design tokens Components Vision Management
48. 1. Share Design Tokens 2. Component library & demo app 3. Component website
49. @lojanda Share Design Tokens Colors Typography Spacings Icons
50. @lojanda Share Design Tokens Web == Android == iOS
51. @lojanda Share Design Tokens Web != Android != iOS
52. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60 iOS rgb(195, 111, 96) subtleRed
53. @lojanda Share Design Tokens WEB hsl(9, 45%, 57%) ANDROID #C36F60 iOS rgb(195, 111, 96) ORIGIN subtleRed #C36F60
54. @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
55. @lojanda Share Design Tokens - Workflow subtleRed #CC0000 subtleRed #C36F60 Alice
56. @lojanda Share Design Tokens - Core elements of your UI - Shared among web, Android, iOS - Different representation on web, Android, iOS - Changes are automatically distributed
57. 1. Share Design Tokens 2. Component library & demo app 3. Component website
58. @lojanda Components Button Toggle Text input
59. @lojanda Web Design System
60. @lojanda iOS Design System Android Design System
61. @lojanda Android App Button Code Android Design System
62. @lojanda 2. Component library Button Code Toggle Code Input Code
63. @lojanda 2. Component library Design System App Button Code Toggle Code Input Code
64. @lojanda 2. Component library Live App Button Code Toggle Code Input Code Design System App
65. @lojanda Component Library - Workflow Alice
66. @lojanda 2. Component library & app - Re-usable elements - Separate library - Demo app for iOS - Demo app for Android
67. 1. Share Design Tokens 2. Component library & demo app 3. Component website
68. @lojanda Android Design System iOS Design System
69. @lojanda Android iOS Web
70. @lojanda iOS Android Web
71. @lojanda Upload screenshots to Design System
72. @lojanda https://github.com/facebook/screenshot-tests-for-android
73. @lojanda Component website - Workflow Record Pablo Verify
74. @lojanda Component website - Workflow Pablo Verify
75. @lojanda Upload screenshots to Design System Full customisation No dependencies Technically hard No interactions No animations
76. @lojanda Run an emulator in your browser
77. @lojanda Run an emulator in your browser Appetize.io * I’m not commercially linked to these products
78. @lojanda Run an emulator in your browser Easy integration Full experience 3rd party dependency Pretty expensive Not directly visible
79. @lojanda 3. Component website - One place for the Design System - Upload screenshots - Run emulator in browser
80. 1. Share Design Tokens 2. Component library & demo app 3. Component website
81. @lojanda ME
82. @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
83. @lojanda Apps can have Design Systems too! Join the discussion at design-systems.slack.com / #topic-mobile
84. @lojanda Q&A