Helping more than 2000 Flutter teams build their own design system
summary
Claims that Widgetbook helped over 2,000 Flutter teams build design systems, then shows a reproducible workflow: start in Figma with Figma dev mode and variable-based tokens, mirror names into Flutter, organize components via atomic design, and catalog everything in Widgetbook for isolated previews and knobs. Explains why golden tests fail (flakiness, repo clutter) and demos Widgetbook Cloud running automated visual checks in pull requests, showing visual diffs, multi‑config snapshots, and options for self‑hosting or cloud hosting.
AI-written summary · about
chapters (10)
- 0:00Design systems with Flutter
- 1:46Setting up design system
- 6:25Design tokens in Flutter
- 10:45Building components
- 15:22Atomic design structure
- 18:35Sharing with stakeholders
- 20:20Maintaining design system
- 24:16UI regression testing
- 31:50Shifting left with reviews
- 32:32Summary and next steps
related talks
14mThe future of designing & building Flutter design libraries with Widgetbook
14mSystems and Designer/Developer Collaboration
28mSystems and Designer/Developer Collaboration with Widgetbook
29mSimplify app development by building widgets in isolation
37mBuilding a Design System in Flutter Within Everyone's Reach
50mFlutter: The Wizards of Widgets
15mBuilding a desktop design language with Flutter
32m"Flutter: How we're building a UI framework for tomorrow at Google"