ADDC 2019 - Maria Neumayer - Consistency is Key - Working with a Design System

Working with a design system can be hugely rewarding: layouts can be created and modified using shared components. This should result in faster design and development and consistent designs across the app. But getting there is a slow and painful process. When implementing a design system you have to make many decisions, like: Where do you start? What actually makes a component? And how flexible should components be? This talk will shed some light on these issues by taking you through Deliveroo's process of adopting a design system in its three Android apps.

Recordings & more: https://addconf.com/

Transcript

1. CONSISTENCY IS KEY Working with a design system Maria Neumayer - @marianeum
2. Consumer Restaurant Rider
3. Deliveroo
4. Design system
5. Visual Styles
6. Visual Styles UI Components
7. Visual Styles UI Components Guidelines
8. Material Design
9. ! ⁉ #
11. Designers Engineers
14. Consumer Restaurant Rider
15. Consumer Restaurant Rider UiKit
16. Private Maven Repository
17. implementation "com.deliveroo.android:ui-kit:1.0.0"a
18. Major Minor Patch 1.0.0
19. Major Minor Patch 1.0.0
20. Major Minor Patch 1.0.0
21. Major Minor Patch 1.0.0
25. Creating components
27. <color name="teal_100">#00ccbc</color> <style name=“UIKit.TextAppearance.Heading.Medium”>
32. <style name="Special.Button" parent="Body.Medium.Bold.White"> <item name="android:minHeight">@dimen/button_height</item> <item name="android:paddingStart">@dimen/padding_sides</item> <item name="android:paddingEnd">@dimen/padding_sides</item> <item name="android:paddingTop">@dimen/padding_top_bottom</item> <item name="android:paddingBottom">@dimen/padding_top_bottom</item> <item name="android:foreground">?selectableItemBackground</item> <item name="android:stateListAnimator">@animator/button_animator</item> </style> <style name="Special.Button.Primary"> <item name="android:background">@drawable/button_bg_primary</item> </style> <style name="Special.Button.Secondary"> <item name="android:background">@drawable/button_bg_secondary</item> <item name="android:textStyle">normal</item> <item name="android:textColor">@color/teal_120</item> </style>
33. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style> $
34. <style name="Special.Button.Primary.Green"> <item name="android:background">@drawable/button_bg_green</item> </style> % <style name="Special.Button.Primary.Red"> <item name="android:background">@drawable/button_bg_red</item> </style> <style name="Special.Button.Primary.Small"> <item name="android:paddingStart">@dimen/padding_small</item> <item name="android:paddingEnd">@dimen/padding_small</item> <item name="android:paddingTop">@dimen/padding_small</item> <item name="android:paddingBottom">@dimen/padding_small</item> </style> <style name="Special.Button.Secondary.Large"> <item name="android:minHeight">@dimen/button_large</item> </style> ⁉ #
35. <Button style="@style/Special.Button.Primary" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableStart="@drawable/ic_star" android:text="@string/button_label" /> Wanted Result
36. <com.deliveroo.common.ui.UiKitButton android:layout_width="match_parent" android:layout_height="wrap_content" app:icon="@drawable/ic_star" app:text="@string/button_label"/> Result
37. Styles + Easy to setup + Easy to extend - Less consistency - Might be restrictive Custom Views + Full control + Decide properties and restrictions - Harder to extend ⚖
38. Button
39. Button UiKitButton
40. <declare-styleable name="UiKitButton"> <attr name="text" format="string"/> <attr name="icon" format="reference"/> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> <enum name="destructive" value=“3"/> </attr> <attr name="inverted" format="boolean"/> <attr name="loading" format="boolean"/> <attr name="enabled" format="boolean"/> </declare-styleable>
41. button.type = UiKitButton.Type.PRIMARY button.text = "Hello ADDC”
42. Forces consistency Simplifies the component
43. Forces consistency Simplifies the component
44. Designers + Engineers need to be aware of limitations
45. '
46. ( Communicate changes Document components
47. ( Communicate changes Document components
48. ( Clarify behaviour Enable easy access
49. ( Clarify behaviour Enable easy access
50. Communicate
51. Creating components
52. Simplicity Consistency Reusability
53. Simplicity Consistency Reusability
54. Simplicity Consistency Reusability
55. Updating components
56. <declare-styleable name="UiKitButton"> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> <enum name="destructive" value=“3"/> </attr> </declare-styleable>
57. <declare-styleable name="UiKitButton"> <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> </attr> <attr name="destructive" format="boolean"/> </declare-styleable>
58. <attr name="type" format="enum"> <enum name="primary" value="0"/> <enum name="secondary" value="1"/> <enum name="tertiary" value="2"/> <!-- {@deprecated Use property instead.} --> <enum name="destructive" value="3"/> </attr> enum class Type { PRIMARY, SECONDARY, TERTIARY, @Deprecated("Use property instead") DESTRUCTIVE }
61. )
62. implementation "com.deliveroo.android:icon-set:1.9.0"a *
63. What’s next?
64. Design Tokens
65. JSON Android XML iOS plist Web CSS
66. Dark mode
67. We’re still at the beginning
68. THANK YOU Maria Neumayer - @marianeum We’re hiring - deliveroo.co.uk/careers