What we've learnt building a Design System in SwiftUI

This is not a talk about SwiftUI or any particular technology.
This is a story of our journey. A journey, that is packed with twists and turns; tests, allies, and enums.
I will talk about how we navigated this large project, what helped us succeed, what held us back and how our approach kept on evolving as we progressed.

Lucy Galik is a Software Engineer at Monzo working in growth.
Previously she worked at Delli and Farmdrop where she built delightful apps focusing on first class user experience. She likes learning new technologies, solving problems and helping others.
Outside of work, Lucy enjoys cold water swimming. She is also an avid operagoer.

Transcript

1. What we've learnt building a DESIGN SYSTEM Lucy Galik in SwiftUI
2. PROPOSAL
3. WORKING GROUP
4. USER RESEARCH
5. GUIDING PRINCIPLES
6. GUIDING PRINCIPLES • Discoverability
7. GUIDING PRINCIPLES • Discoverability • Keep the good stu f
8. GUIDING PRINCIPLES • Discoverability • Keep the good stu ff • no UIKit
9. GUIDING PRINCIPLES • Discoverability • Keep the good stu ff • no UIKit • Accessibility fi rst
10. GUIDING PRINCIPLES • Discoverability • Keep the good stu ff • no UIKit • Accessibility fi rst • Keep it simple
11. GUIDING PRINCIPLES • Discoverability • Keep the good stu ff • no UIKit • Accessibility fi rst • Keep it simple • Limited API
12. Discoverability
13. Discoverability
14. Discoverability • Documentation
15. Discoverability • Documentation • Naming
16. Discoverability • Documentation • Naming • Demo app
17. Discoverability • Documentation • Naming • Demo app • Previews
18. Discoverability • Documentation • Naming • Demo app • Previews • Snapshot Tests
19. Discoverability • Documentation • Naming • Demo app • Previews • Snapshot Tests • Structure
20. Keep the good stuff
21. Keep the good stuff
22. Keep the good stuff @_exported import DesignSystemFoundation
23. Keep the good stuff Theme
24. Keep the good stuff Theme class HostingController: UIHostingController { init( rootView: Content, theme: Theme ) { super.init( rootView: HostingView( content: rootView, theme: theme ) ) } } struct HostingView: View { let theme: Theme let content: Content var body: some View { content .environment(\.theme, theme) } }
25. no UIKit
26. no UIKit
27. no UIKit
28. no UIKit struct CustomButton: View { let title: String let isEnabled: Bool let isLoading: Bool let action: () -> Void init( title: String, isEnabled: Bool, isLoading: Bool, action: @escaping () -> Void ) { // ... } }
29. no UIKit @Environment struct CustomButton: View { let title: String let isEnabled: Bool let isLoading: Bool let action: () -> Void init( title: String, isEnabled: Bool, isLoading: Bool, action: @escaping () -> Void ) { // ... } } struct CustomButton: View { let title: String @Environment(\.isEnabled) var isEnabled @Environment(\.isLoading) var isLoading let action: () -> Void init( title: String, action: @escaping () -> Void ) { // … } }
30. no UIKit ViewModel struct CardViewModel { let icon: String let title: String let subtitle: String let action: () -> Void } struct Card: View { let viewModel: CardViewModel var body: some View { // ... } }
31. no UIKit ViewModel struct CardViewModel { let icon: String let title: String let subtitle: String let action: () -> Void } struct Card: View { let viewModel: CardViewModel var body: some View { // ... } } struct CardViewModel { let icon: String let title: String let subtitle: String let action: () -> Void } extension CardViewModel: View { var body: some View { // ... } }
32. no UIKit ViewModel struct CardViewModel { let icon: String let title: String let subtitle: String let action: () -> Void } struct Card: View { let viewModel: CardViewModel var body: some View { // ... } } struct Card: View { let icon: String let title: String let subtitle: String let action: () -> Void var body: some View { // ... } }
33. no UIKit Styles struct AnotherButton: View { enum Style { case primary case secondary case destructive } let style: Style // ... var body: some View { // ... } var foregroundColor: Color { switch style { // ... } } var backgroundColor: Color { switch style { // ... } }
34. no UIKit Styles struct AnotherButton: View { enum Style { case primary case secondary case destructive } let style: Style // ... var body: some View { // ... } var foregroundColor: Color { switch style { // ... } } var backgroundColor: Color { switch style { // ... } } struct AnotherButton: View { let style: AnotherButtonStyle // ... var body: some View { Button( // ... ) .buttonStyle(style) } } struct AnotherButtonStyle: ButtonStyle { let foregroundColor: Color let backgroundColor: Color func makeBody( configuration: Configuration ) -> some View { // ... } }
35. no UIKit Styles struct AnotherButton: View { let style: AnotherButtonStyle // ... var body: some View { Button( // ... ) .buttonStyle(style) } } struct AnotherButtonStyle: ButtonStyle { let foregroundColor: Color let backgroundColor: Color func makeBody( configuration: Configuration ) -> some View { // ... } }
36. no UIKit Styles struct AnotherButton: View { let style: AnotherButtonStyle // ... var body: some View { Button( // ... ) .buttonStyle(style) } } struct AnotherButtonStyle: ButtonStyle { let foregroundColor: Color let backgroundColor: Color func makeBody( configuration: Configuration ) -> some View { // ... } }
37. no UIKit Styles struct AnotherButton: View { let style: AnotherButtonStyle // ... var body: some View { Button( // ... ) .buttonStyle(style) } } struct AnotherButtonStyle: ButtonStyle { let foregroundColor: Color let backgroundColor: Color func makeBody( configuration: Configuration ) -> some View { // ... } } extension AnotherButtonStyle { static let primary = AnotherButtonStyle( // ...) static let secondary = AnotherButtonStyle( // ... ) static let destructive = AnotherButtonStyle( // ... ) }
38. Accessibility
39. Accessibility
40. Accessibility
41. Accessibility accessibilityRepresentation struct CustomSlider: View { // ... var body: some View { slider() .accessibilityRepresentation { Slider(value: $value, in: range, step: step) } } }
42. Accessibility
43. Accessibility var body: some View { HStack { Image(illustration) Text(title) Text(subtitle) } .accessibilityLabel(accessibilityLabel) }
44. Accessibility var body: some View { HStack { Image(illustration) .accessibilityLabel(illustrationAccessibilityLabel) Text(title) Text(subtitle) } }
45. Accessibility var body: some View { HStack { Image(illustration) .accessibilityHidden(true) Text(title) Text(subtitle) } }
46. Accessibility var body: some View { Button( action: action, label: { title } ) .accessibilityLabel(title) }
47. Accessibility var body: some View { Button( action: action, label: { title } ) .accessibilityLabel(title) }
48. Keep it simple
49. Keep it simple
50. Keep it simple struct Footer: View { let prompt: Text? let callout: Callout? let primary: LargeButton let secondary: LargeButton? let axis: Axis var body: some View { // ... } public init( button: LargeButton ) { // ... } public init( prompt: Text, top: LargeButton, bottom: LargeButton ) { // ... } }
51. Keep it simple struct Footer: View { let prompt: Text? let callout: Callout? let primary: LargeButton let secondary: LargeButton? let axis: Axis var body: some View { // ... } public init( button: LargeButton ) { // ... } public init( prompt: Text, top: LargeButton, bottom: LargeButton ) { // ... } }
52. Limited API
53. Limited API struct Footer: View { // ... init( prompt: Text, top: LargeButton, bottom: LargeButton ) { // ... } }
54. Limited API struct Footer: View { // ... init( prompt: Text, top: LargeButton, bottom: LargeButton ) { // ... } } struct Footer<Primary: View, Secondary: View>: View { // ... init( prompt: Text, @ViewBuilder top: () -> Primary, @ViewBuilder bottom: () -> Secondary ) { // ... } }
56. and write it down Have a plan
57. Create a team
58. Know your user*
59. but be ready to adjust them Have Guidelines
60. Don’t fight the framework