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

Consistency is Key - Working with a design syst...

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

Maria Neumayer

April 05, 2019
Tweet

More Decks by Maria Neumayer

Other Decks in Technology

Transcript

  1. <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>
  2. <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> ⁉
  3. Styles + Easy to setup + Easy to extend -

    Less consistency - Might be restrictive Custom Views + Full control + Decide properties and restrictions - Harder to extend ⚖
  4. <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>
  5. 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"