Scaling Design Systems in Flutter: Lessons from building UIKit

Transcript

1. Pune 2025 Dhrumil Shah Architect, Scapia Scaling Design Systems in Flutter: Lessons from building UIKit
2. Pune 2025 Dhrumil Shah Architect, Scapia - Flutter & Dart GDE - Mobile App Architect - Startup mentor - A11y advocate
3. Why Are We Here?
5. Scalable System Design • Planning the architecture & infrastructure of a system • Defining components (APIs, services, databases) • Understanding how they interact to meet requirements
6. Scalable System Design • Planning the architecture & infrastructure of a system • Defining components (APIs, services, databases) • Understanding how they interact to meet requirements
7. DESIGN SYSTEM ≠ SYSTEM DESIGN
8. Let’s create a button
9. Pune 2025
10. Pune 2025
11. Pune 2025
12. आता कशाला वाट लागली?
13. Inconsistent Code Developers create the same button in many different ways:
14. • UI inconsistency slows teams down
15. • UI inconsistency slows teams down • Engineering time wasted reinventing components
16. • UI inconsistency slows teams down • Engineering time wasted reinventing components • Designers maintain multiple versions of the same UI
17. • UI inconsistency slows teams down • Engineering time wasted reinventing components • Designers maintain multiple versions of the same UI • Hard to scale without a shared source of truth
18. We Are Here for DESIGN SYSTEM
21. Design System • A style guide for UI & graphic design
22. Design System • A style guide for UI & graphic design • Ensures products have a consistent, cohesive, on-brand experience
23. Design System • A style guide for UI & graphic design • Ensures products have a consistent, cohesive, on-brand experience Visual + Interaction + Code + Tokens + Governance
24. Pune 2025 Design System { standards } UIKit { implementation in Flutter } Component Library { ready-to-use Widgets }
25. Why Companies Need DS
26. Why Companies Need DS • Consistency
27. Why Companies Need DS • Consistency • Speed
28. Why Companies Need DS • Consistency • Speed • Onboarding
29. Why Companies Need DS • Consistency • Speed • Onboarding • Reusability
30. Why Companies Need DS • Consistency • Speed • Onboarding • Reusability
31. How to start with Design System
34. Tokens "The smallest, platform-agnostic design values"
35. Tokens • Colors • Typography • Spacing • Radius & shadow • Motion
36. Tokens • Colors • Typography
37. Atoms "The smallest functional UI elements"
38. Atoms
39. Atoms
40. Molecules "Atoms working together as a small, meaningful unit"
41. Molecules
42. Organisms "Complex sections made of atoms + molecules"
43. Organisms • Navigation bar • Card component • Sidebar • Form sections
44. Template "A page-level blueprint that defines the layout and structure of an interface without including specific content."
45. Template
47. Key challenges in Scaling
48. Key challenges in Scaling • Multiple teams
49. Key challenges in Scaling • Multiple teams • New designers
50. Key challenges in Scaling • Multiple teams • New designers • Design drift
51. Key challenges in Scaling • Multiple teams • New designers • Design drift • Component misuse
53. Flutter Strength for Design System
54. Flutter Strength for DS • Single Codebase
55. Flutter Strength for DS • Single Codebase • Declarative Nature
56. Flutter Strength for DS • Single Codebase • Declarative Nature • Theming + Extension
57. Flutter Strength for DS • Single Codebase • Declarative Nature • Theming + Extension • Composition over Inheritance
58. Flutter Strength for DS • Single Codebase • Declarative Nature • Theming + Extension • Composition over Inheritance • Hot Reload & Widget Previews
60. API Design Principles with Flutter • Sensible defaults
61. API Design Principles with Flutter • Sensible defaults • Fewer required params
62. API Design Principles with Flutter • Sensible defaults • Fewer required params • Consistent naming
63. API Design Principles with Flutter • Sensible defaults • Fewer required params • Consistent naming • Predictable behavior
64. API Design Principles
65. Anti Patterns in Flutter • Props explosion • Overly generic widgets • Styles inside features • Multiple forms of the same component
66. Documentation
68. Documentation is Important
69. Documentation is Important (or why it fails) • Nobody reads it • Nobody updates it
70. What Good Docs Look Like
71. • Usage guidelines Navigation bars can have three to five destinations
72. • Do / Don’t with Code examples The FAB should be right-aligned above the navigation bar Don’t cover the navigation bar with FAB
73. • Story-Based Documentation • Live Catalogs (Widgetbook / Widget Previews) • Auto-Generated Docs (Dartdoc)
76. Testing
77. • Golden Tests for snapshot comparison
78. • Golden Tests for snapshot comparison • Widget Tests for behaviour
79. • Golden Tests for snapshot comparison • Widget Tests for behaviour • CI Integration to block PRs on mismatched goldens
80. • Golden Tests for snapshot comparison • Widget Tests for behaviour • CI Integration to block PRs on mismatched goldens • Linting for Compliance (Custom rules -“no random colors”)
81. Dhrumil Shah @dhuma1981
82. Examples references • Material Design - m3.material.io • Zing - design.tatadigital.com • Sushi - blog.zomato.com/sushi • Blade - blade.razorpay.com • Base - base.uber.com • wise.design
83. Connect With Me x.com/dhuma1981 linkedin.com/in/dhuma1981 flutterflakes.com conalyz.com
84. Special Thanks to Tirth AI (Asli Insaan) Deep AI (Asli Insaan)
85. Thank You Pune