Building and maintaining large multi-brand design systems with Flutter
summary
Built a white‑label Flutter design system for multiple InvestSuite products that supports RTL and multi language fonts, tokenizes colors (color groups × three emphasis × five shades with container-on-container foreground/background pairs), text styles, assets and widget/screens, and lets teams swap components via a component adapter using Provider. A Figma pipeline exports style tokens and assets (originally JSON caused ~2s startup lock so it now generates Dart), automated sync runs on CI, and strict contract validation prevents broken style guides.
AI-written summary · about
chapters (13)
- 0:00Introduction and goals
- 3:55Ground rules for design systems
- 8:51Branding with style guides and tokens
- 13:27Tokenizing assets and variants
- 15:13Handling brand impact components
- 17:01Tokenizing widgets and screens
- 20:35Naming conventions for components
- 21:58Tokenizing screens and routes
- 25:28Scaling the design system
- 26:32Improving widget readability
- 28:16Automating style guide sync
- 31:07Managing assets and validation
- 33:57Next steps and future plans
related talks
37mBuilding a Design System in Flutter Within Everyone's Reach
37mFlutter at scale
34mHelping more than 2000 Flutter teams build their own design system
44mMultimodule Flutter App
37mTaming Legacy: Refactoring Patterns for Large Flutter Codebases
32mTailoring Flutter Architectures for Team and Business Success
42mOur Journey to Flutter
32m"Flutter: How we're building a UI framework for tomorrow at Google"