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

Engineering a design system

Engineering a design system

Slides for my Droidcon Berlin 2021 presentation:
Engineering a design system: how we design ours in our company, the entire process alongside with problems, controversy, and advantages we faced while building it.

Luca Nicoletti

October 21, 2021
Tweet

More Decks by Luca Nicoletti

Other Decks in Programming

Transcript

  1. luca_nicolett ENGINEERING 🛠 A DESIGN SYSTEM 🧑🎨 HOW WE “DID”

    IT
  2. 🧔 Luca 🇮🇹 Italian (🤌) 📍 London 🛠 Android engineer

    💼 Triller luca_nicolett INTRODUCTIONS 👋
  3. • What is a design system? • How does it

    impact the speed of design & development? • UI 㲗 code • Problems • Where we’re at • Conclusions ENGINEERING 🛠 A DESIGN SYSTEM 🧑🎨
  4. WHAT IS A DESIGN SYSTEM? DESIGN SYSTEM 🧑🎨

  5. “A design system is a set of interconnected patterns and

    shared practices coherently organised.” “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” DESIGN SYSTEM 🧑🎨
  6. NOT ONLY! DESIGN SYSTEM 🧑🎨

  7. “The complete set of designs standards, documentation, and principle along

    with the toolkit (UI patterns and code components) to achieve those standards” DESIGN SYSTEM 🧑🎨
  8. A design system is not just aesthetics, it’s implementation, code,

    all together DESIGN SYSTEM 🧑🎨
  9. DESIGN SYSTEM 🧑🎨

  10. DESIGN SYSTEM 🧑🎨

  11. DESIGN SYSTEM 🧑🎨

  12. DESIGN SYSTEM 🧑🎨

  13. Advantages: • Consistency • Higher quality • Faster builds, through

    reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
  14. Advantages: • Consistency • Higher quality • Faster builds, through

    reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
  15. Advantages: • Consistency • Higher quality • Faster builds, through

    reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
  16. Advantages: • Consistency • Higher quality • Faster builds, through

    reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
  17. Advantages: • Consistency • Higher quality • Faster builds, through

    reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
  18. Advantages: • Consistency • Higher quality • Faster builds, through

    reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
  19. Disadvantages: • Huge initial effort • Less fl exibility DESIGN

    SYSTEM 🧑🎨
  20. Disadvantages: • Huge initial effort • Less fl exibility DESIGN

    SYSTEM 🧑🎨
  21. DESIGN SYSTEM 🧑🎨

  22. Core components: • Color palette (colors) DESIGN SYSTEM 🧑🎨

  23. Core components: • Color palette (colors) • Fonts DESIGN SYSTEM

    🧑🎨
  24. Core components: • Color palette (colors) • Fonts • Grid

    system DESIGN SYSTEM 🧑🎨
  25. DESIGN SYSTEM 🧑🎨

  26. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms DESIGN SYSTEM 🧑🎨
  27. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components DESIGN SYSTEM 🧑🎨
  28. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components DESIGN SYSTEM 🧑🎨
  29. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components DESIGN SYSTEM 🧑🎨
  30. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components DESIGN SYSTEM 🧑🎨
  31. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components DESIGN SYSTEM 🧑🎨
  32. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components DESIGN SYSTEM 🧑🎨
  33. Core components: • Color palette (colors) ANDROID 🤖

  34. Core components: • Color palette (colors) ANDROID 🤖

  35. Core components: • Color palette (colors) • Fonts ANDROID 🤖

  36. Core components: • Color palette (colors) • Fonts • Grid

    system ANDROID 🤖
  37. Core components: • Color palette (colors) • Fonts • Grid

    system ANDROID 🤖
  38. Core components: • Color palette (colors) • Fonts • Grid

    system ANDROID 🤖
  39. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms ANDROID 🤖
  40. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms ANDROID 🤖
  41. Core components: • Color palette (colors) • Fonts • Grid

    system • Atoms • Components ANDROID 🤖
  42. WIDGETS! ANDROID 🤖

  43. • Idea from reactive frameworks ANDROID 🤖

  44. • Idea from reactive frameworks • Re-usable ANDROID 🤖

  45. • Idea from reactive frameworks • Re-usable • Slightly customisable/con

    fi gurable ANDROID 🤖
  46. WIDGETS! ANDROID 🤖

  47. WIDGETS! ANDROID 🤖

  48. WIDGETS! ANDROID 🤖

  49. WIDGETS! ANDROID 🤖

  50. Small components (single responsibility) Vs Bigger components (more purpose, con

    fi gurable) ANDROID 🤖
  51. Small components (single responsibility) ❌ Vs Bigger components (more purpose,

    con fi gurable) ✅ ANDROID 🤖
  52. ANDROID 🤖

  53. ANDROID 🤖

  54. ANDROID 🤖

  55. ANDROID 🤖

  56. Small components (single responsibility) ✅ ÷ Bigger components (more purpose,

    con fi gurable) ❌ ANDROID 🤖
  57. ANDROID 🤖

  58. ANDROID 🤖

  59. ANDROID 🤖

  60. ANDROID 🤖

  61. ANDROID 🤖

  62. ANDROID 🤖

  63. ANDROID 🤖

  64. ANDROID 🤖

  65. ANDROID 🤖

  66. ANDROID 🤖

  67. ANDROID 🤖

  68. ANDROID 🤖

  69. ANDROID 🤖

  70. ANDROID 🤖

  71. ANDROID 🤖

  72. ANDROID 🤖

  73. ANDROID 🤖

  74. ANDROID 🤖

  75. DEV APP ANDROID 🤖

  76. ANDROID 🤖

  77. ANDROID 🤖

  78. ANDROID 🤖

  79. ANDROID 🤖

  80. ANDROID 🤖

  81. CURRENT STATE ANDROID 🤖

  82. ANDROID 🤖

  83. ANDROID 🤖

  84. 㲗 㲗 㲗 CURRENT STATE ⏳

  85. FUTURE? CURRENT STATE ⏳

  86. SPECIAL THANKS 🙏 @leiajmassey @nicoletti_vale @lucaluzzatti @IzzyStannett

  87. QUESTIONS? QUESTIONS ⁉

  88. • Do your iOS team have the same things in

    place? • What was the hardest thing to achieve while implementing your design system? • Do you plan to move your code to Jetpack Compose? If so, how? • Are there any limitation to this system? • Why are you using a grid system? What are the advantages? QUESTIONS ⁉
  89. • https://en.wikipedia.org/wiki/Design_system • https://www.invisionapp.com/inside-design/guide-to-design-systems/ • https://www.youtube.com/watch?v=wc5krC28ynQ • https://www.youtube.com/watch?v=TgWyyoofKIA • https://atomicdesign.bradfrost.com/

    • http://material.io/ RESOURCES 🗃