Scaling Design Systems in Flutter: Lessons from building UIKit

Transcript

1. Ahmedabad 2025 Dhrumil Shah Architect, Scapia Scaling Design Systems in Flutter: Lessons from building UIKit
2. Ahmedabad 2025 Dhrumil Shah Architect, Scapia - Flutter & Dart GDE - Mobile App Architect - Startup mentor - A11y advocate
3. Why Are We Here?
4. Scalable System Design • Planning the architecture & infrastructure of a system • Defining components (APIs, services, databases) • Understanding how they interact to meet requirements
5. Scalable System Design • Planning the architecture & infrastructure of a system • Defining components (APIs, services, databases) • Understanding how they interact to meet requirements
6. DESIGN SYSTEM ≠ SYSTEM DESIGN
7. Let’s create a button
8. Ahmedabad 2025
9. Ahmedabad 2025
10. Ahmedabad 2025
12. Inconsistent Code Developers create the same button in many different ways:
13. • UI inconsistency slows teams down
14. • UI inconsistency slows teams down • Engineering time wasted reinventing components
15. • UI inconsistency slows teams down • Engineering time wasted reinventing components • Designers maintain multiple versions of the same UI
16. • 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
17. We Are Here for DESIGN SYSTEM
18. Design System • A style guide for UI & graphic design
19. Design System • A style guide for UI & graphic design • Ensures products have a consistent, cohesive, on-brand experience
20. Design System • A style guide for UI & graphic design • Ensures products have a consistent, cohesive, on-brand experience Visual + Interaction + Code + Tokens + Governance
23. Ahmedabad 2025 Design System { standards } UIKit { implementation in Flutter } Component Library { ready-to-use Widgets }
24. Why Companies Need DS • Consistency • Speed • Onboarding • Reusability
25. How to start with Design System
26. Tokens "The smallest, platform-agnostic design values"
27. Tokens • Colors • Typography • Spacing • Radius & shadow • Motion
35. Atoms "The smallest functional UI elements"
36. Atoms • Buttons • Inputs • Icons • Text styles • Avatars
37. Molecules "Atoms working together as a small, meaningful unit"
38. Molecules • Search bar (input + icon + label) • Form field (label + input + error) • Card header (avatar + text)
39. Organisms "Complex sections made of atoms + molecules"
40. Organisms • Navigation bar • Card component • Sidebar • Form sections
42. design.tatadigital.com/latest/components/accordion
50. Key challenges in Scaling • Multiple teams
51. Key challenges in Scaling • Multiple teams • New designers
52. Key challenges in Scaling • Multiple teams • New designers • Design drift
53. Key challenges in Scaling • Multiple teams • New designers • Design drift • Component misuse
54. Flutter Strength for Design System
55. Flutter Strength for DS • Single Codebase • Declarative Nature • Theming + Extension • Composition over Inheritance • Hot Reload & Widget Previews
56. API Design Principles • Sensible defaults • Fewer required params • Consistent naming • Predictable behavior
57. API Design Principles
58. Anti Patterns • Props explosion • Overly generic widgets • Styles inside features • Multiple forms of the same component
59. What Makes a Component "Reusable"? Configurations, states, behavior. Ahmedabad 2025
60. Handling Multiple Variants • Enum-based variants • Theme overrides • Composition
61. Example: Buttons Done Right • Primary/Secondary/Tertiary • Sm/Med/Lg sizes
62. Documentation
63. Documentation is Important
64. Documentation is Important (or why it fails) • Nobody reads it • Nobody updates it
65. What Good Docs Look Like
66. • Usage guidelines Navigation bars can have three to five destinations
67. • Do / Don’t with Code examples The FAB should be right-aligned above the navigation bar Don’t cover the navigation bar with FAB
68. • Story-Based Documentation • Live Catalogs (Widgetbook / Widget Previews) • Auto-Generated Docs (Dartdoc)
70. Testing
71. • Golden Tests for snapshot comparison
72. • Golden Tests for snapshot comparison • Widget Tests for behaviour
73. • Golden Tests for snapshot comparison • Widget Tests for behaviour • CI Integration to block PRs on mismatched goldens
74. Testing • 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”)
75. Examples references • Material Design - m3.material.io • Zing - design.tatadigital.com • Sushi - blog.zomato.com/sushi • Blade - blade.razorpay.com • wise.design
76. Connect With Me x.com/dhuma1981 linkedin.com/in/dhuma1981 flutterflakes.com conalyz.com
77. Special Thanks to Tirth AI (Asli Insaan)
78. speakerdeck.com/dhuma1981
79. Thank You Ahmedabad