Consistency is Key - Working with a design system (Droidcon Italy)

Consistency is Key - Working with a design system (Droidcon Italy)

Working with a design system can be hugely rewarding: layouts can be created and modified using shared components. This should result in faster 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.

Presented at Droidcon Italy 2019
https://www.youtube.com/watch?v=7a0_RA04kQk

A3fcd5fb62ede9161d6327592424dcb4?s=128

Maria Neumayer

April 05, 2019
Tweet

Transcript

  1. 13.

  2. 14.
  3. 16.
  4. 17.
  5. 22.
  6. 23.
  7. 34.
  8. 37.
  9. 38.
  10. 40.
  11. 42.
  12. 43.
  13. 44.
  14. 45.
  15. 46.

    <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>
  16. 48.

    <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> ⁉
  17. 53.

    Styles + Easy to setup + Easy to extend -

    Less consistency - Might be restrictive Custom Views + Full control + Decide properties and restrictions - Harder to extend ⚖
  18. 54.
  19. 56.

    <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>
  20. 60.

    var type: Type = Type.PRIMARY set(value) { field = value

    updateColours() } var text: CharSequence? get() = textView.text set(value) { textView.text = value } button.type = UiKitButton.Type.PRIMARY button.text = "Hello Droidcon Italy"
  21. 63.
  22. 64.
  23. 66.
  24. 67.
  25. 68.
  26. 72.
  27. 81.
  28. 82.
  29. 83.
  30. 86.