designSystemWW.pdf

Transcript

1. Wojciech Warwas 2023 Storybook, czyli jak ujarzmić design (system)
6. Po co nam design system?
13. Primary Primary
14. #B57AB #BF56AC
16. https://www. fi gma.com/community/ fi le/1206388778568512085 https://www. fi gma.com/@medamineck
17. https://www. fi gma.com/community/ fi le/1206388778568512085 https://www. fi gma.com/@medamineck
19. https://atomicdesign.bradfrost.com/chapter-2/
20. Do not repeat yourself!
21. https://www. fi gma.com/community/ fi le/1006458029662147883 https://www. fi gma.com/@marekszmyt Marek Szmyt
22. https://www. fi gma.com/community/ fi le/1006458029662147883 https://www. fi gma.com/@marekszmyt Marek Szmyt https://www.linkedin.com/in/lukaszokonski/ Łukasz Okoński
23. https://www. fi gma.com/community/ fi le/1006458029662147883 https://www. fi gma.com/@marekszmyt Marek Szmyt
24. https://www. fi gma.com/community/ fi le/1006458029662147883 https://www. fi gma.com/@marekszmyt Marek Szmyt
25. https://www. fi gma.com/community/ fi le/1006458029662147883 https://www. fi gma.com/@marekszmyt Marek Szmyt
27. Design system = Single source of truth
29. Figma demo
30. Jak to przenieść do Fluttera?
31. Atoms Molecules Organisms Templates
32. Widgets Widgets Widgets Widgets Atoms Molecules Organisms Templates
33. Basics
34. Basics Material Base Custom Base
35. Material Base • Ograniczona ilość kolorów i styli textu* • Inne nazewnictwo parametrów • Nie wszystko da się zmienić • Większość widgetów współpracuje z material theme • Prosty i szybki w ustawieniu • Animacje • Accessibility Minusy Plusy
36. Material Base
37. Basics Material Base Custom Base
38. Custom Base • Wymaga więcej czasu na implementacje • Dodatkowe utrzymanie związane z zmianami w core fl uttera • Wprowadza pewien próg wejścia w projekt • Pełna customizacja • Możemy zachować spójność nazewnictwa Minusy Plusy
39. Custom Base class MyAppThemeData { final Color tertiaryColor; final Color inputColor; final TextStyle titleBig; class MyAppTheme extends InheritedWidget { final MyAppThemeData data; const MyAppTheme({ super.key, required super.child, required this.data, });
40. A może ThemeExtensions?
41. ThemeExtensions @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light().copyWith( extensions: <ThemeExtension<dynamic>>[ const MyColors( brandColor: Color(0xFF1E88E5), danger: Color(0xFFE53935), ), ], ), darkTheme: ThemeData.dark().copyWith( extensions: <ThemeExtension<dynamic>>[ const MyColors( brandColor: Color(0xFF90CAF9), danger: Color(0xFFEF9A9A), ), ], ), Flutter 3.0+
42. ThemeExtensions @immutable class MyColors extends ThemeExtension<MyColors> { const MyColors({ required this.brandColor, required this.danger, }); final Color? brandColor; final Color? danger; @override MyColors copyWith({Color? brandColor, Color? danger}) { return MyColors( brandColor: brandColor ?? this.brandColor, danger: danger ?? this.danger, ); } @override MyColors lerp(ThemeExtension<MyColors>? other, double t) { if (other is! MyColors) { return this; } return MyColors( brandColor: Color.lerp(brandColor, other.brandColor, t), danger: Color.lerp(danger, other.danger, t), ); } 😱 final MyColors myColors = Theme.of(context) .extension<MyColors>()!;
43. ThemeExtensions https://pub.dev/packages/theme_tailor fi nal myTheme = context.myTheme; fi nal _lightThemeData = ThemeData( brightness: Brightness.light, extensions: [SimpleTheme.light], ); fi nal _darkThemeData = ThemeData( brightness: Brightness.dark, extensions: [SimpleTheme.dark], );
44. Jak pracować z design systemem?
45. Storybook!
46. Story Widgetbook! https://pub.dev/packages/widgetbook/versions/3.0.0-beta.14
47. https://pub.dev/packages/widgetbook/versions/3.0.0-beta.14
48. https://pub.dev/packages/widgetbook/versions/3.0.0-beta.14
49. Widgetbook! return Widgetbook.material( addons: [ TextScaleAddon( setting: TextScaleSetting( textScales: [ 1.0, 1.5, 2.0, 3.0, ], activeTextScale: 1.0, ), ), FrameAddon( setting: FrameSetting( frames: [ NoFrame(), DefaultDeviceFrame( setting: DeviceSetting( devices: [ Apple.iPhone13, Apple.proDisplayXDR, Samsung.s21ultra, ], activeDevice: Apple.iPhone13, ), ), ], activeFrame: NoFrame(), ), ), ], .. ); directories: [ WidgetbookCategory( name: 'widgets', children: [ WidgetbookComponent( name: 'Custom widget', useCases: [ WidgetbookUseCase( name: 'Default', builder: (context) => CustomWidget(), ), ], ), WidgetbookFolder( name: 'Texts', children: [ WidgetbookComponent( name: 'Normal Text', useCases: [ WidgetbookUseCase( name: 'Default', builder: (context) => Text( 'The brown fox ...', ), ), ], ), ], ), ], ), ],
50. Widgetbook!
51. Widgetbook! @WidgetbookApp.material( devices: [Apple.iPhone13, Apple.proDisplayXDR, Samsung.s21ultra], textScaleFactors: [1.0, 1.5, 2.0, 3.0], foldersExpanded: true, widgetsExpanded: true, ) class MyApp extends StatelessWidget { @WidgetbookTheme(name: 'Main theme', isDefault: true) ThemeData mainTheme() => ThemeData.light().copyWith( primaryColor: Colors.blue, ); @WidgetbookTheme(name: 'Dark theme') ThemeData darkTheme() => ThemeData.dark().copyWith( primaryColor: Colors.green, ); +build_runner
52. Widgetbook! @WidgetbookUseCase(name: 'Test widget', type: Buttons) Widget testWidget(BuildContext context) { return TestButton( text: context.knobs.text(label: 'Text', initialValue: 'Test'), ); } @WidgetbookUseCase(name: 'App text styles', type: TextStyles) Widget textStyles(BuildContext context) { return ListView( padding: const EdgeInsets.all(16), children: const [ TextStyleTile(name: 'Action', style: TextStyle(fontSize: 18)), Gap(16), TextStyleTile(name: 'Text', style: TextStyle(fontSize: 14)), +build_runner
53. Wspólne nazewnictwo z design
55. Android JS middleware / in app iOS JS middleware / in app React Native Storybook.js przez Expo Flutter Full desktop/web catalog Web Storybook.js Inne platformy
56. Android JS middleware / in app iOS JS middleware / in app React Native Storybook.js przez Expo Flutter Full desktop/web catalog Web Storybook.js Inne platformy 😩 😒 😩 👍 👍
57. Widgetbook
58. Widgetbook + macOS(M1+) = ⚡
59. Jest jeszcze cloud!
60. Linki w pull requestach
61. Branche z poziomu Widgetbook
62. Side by side z Figma
63. Quick Demo
64. Wrap up • Design system to skalowalność, oszczędność czasu i spójność • Wykorzystuj wieloplatformowość! • Flutter jest stworzony do pracy z komponentami i stylami • Przyspiesz jeszcze bardziej z Widgetbookiem! • Design system to ściśle ramy ale nie tylko dla developerów - przestrzegaj ich! • Wypracuj własny styl współpracy z zespołem design per fi rma/projekt
65. Wrap up • Design system to skalowalność, oszczędność czasu i spójność • Wykorzystuj wieloplatformowość! • Flutter jest stworzony do pracy z komponentami i stylami • Przyspiesz jeszcze bardziej z Widgetbookiem! • Design system to ściśle ramy ale nie tylko dla developerów - przestrzegaj ich! • Wypracuj własny styl współpracy z zespołem design per fi rma/projekt Design System zapewnia oszczędność około 30% na każdym z etapów tworzenia produktu.
66. QA
67. Thanks! Łukasz Okoński Lucas Jose fi ak https://twitter.com/LucasJose fi ak https://www.linkedin.com/in/lukaszokonski/
68. Linki https://www.widgetbook.io/ https://api. fl utter.dev/ fl utter/material/ThemeExtension-class.html https://pub.dev/packages/theme_tailor https://storybook.js https://atomicdesign.bradfrost.com/ https://youtu.be/aK4A9145xOI
69. The OpenSource Brothers