Approaching Design System in iOS Environment

Approaching Design System

in iOS Environment

Karolina Samorek

Senior iOS Developer @lakecoloring

Handle edge cases

iPhone SE 1st gen vs iPad Pro 12.9 size comparition

Handle edge cases

If you take a look on `SizeVariants` is's a simple, generic struct. It should define variants in a way that fits to the product you are building. For example, Lake is iPad-first, ⏭ and we use regular as our default variant. It handles all iPads in portrait orientation (excluding split view). ⏭ In our case it's common that iPads in landscape orientation have their dedicated layout, so we have a variant called wide. ⏭ Compact is basically iPhone in Portrait (as we don't support landscape for iPhone in our app). To handle edge cases for smaller iPhones we introduced two more types ⏭ short which takes care of iPhones with screen smaller than 4.7 inches. ⏭ And small for the smallest iPhones with 4 inches screen size. ⏭ You can see that variant, if not defined, fallbacks to larger one. And at the end to regular, which has to be always provided. ✋✋✋🚰

Tokens

						
							/// All DesignSystem Tokens namespace.
							public enum DSTokens {
								/// All DesignSystem Fonts namespace.
								public enum Fonts {}
								/// All DesignSystem Colors namespace.
								public enum Colors {}
								/// All DesignSystem Icons namespace.
								public enum Icons {}
								/// All DesignSystem Spaces namespace.
								public enum Spaces {}
								
								// ..
							}

							extension DSTokens.Colors {
								/// Background/Primary color
								public static let backgroundPrimary = DSColor(
									light: CGColor.from(hex: "#F5F5F5")!,
									dark: CGColor.from(hex: "#222222")!
								)
								
								// ...
								
								/// Text/OnColor color
								public static let textOnColor = DSColor(CGColor.from(hex: "#FAFAFA")!)

								/// Accent/Primary/Default
								public static let accentPrimaryDefault = DSColor(CGColor.from(hex: "#AA49D8")!)
								
								// ...
							}

Control states

						
							/// State of UI control.
							///
							/// Possible options: ``normal``, ``highlighted`` and ``disabled``.
							public struct ControlState: OptionSet, Hashable {
								/// Normal UI control's state.
								/// Applicable when no user action is being performed and control is enabled.
								public static let normal = ControlState(rawValue: 1)
								/// Highlighted UI control's state.
								/// Applicable when user taps/presses and control is enabled.
								public static let highlighted = ControlState(rawValue: 2)
								/// Disabled UI control's state.
								/// Applicable when control isn't enabled.
								public static let disabled = ControlState(rawValue: 4)

								// ...
							}

Style Components

Components Attributes

						
							/// UI Attributes that can be applied on a view to change it visually.
							public struct ViewAttributes: Equatable, Hashable {
								/// View's Background Color. Wont't be set if ``nil``.
								public var backgroundColor: DSColor?
								/// View's Tint Color. Wont't be set if ``nil``.
								public var tintColor: DSColor?
								/// Attributes applied to view's border. Wont't be set if ``nil``.
								public var borderAttributes: BorderAttributes?
								/// View's corner radius. Wont't be set if ``nil``.
								public var cornerRadius: CGFloat?
								/// Attributes related to view's shadow. Wont't be set if ``nil``.
								public var shadowAttributes: ShadowAttributes?

								// ...
							}

Feature level of Styles

Feature level of Styles

							
								struct WWDCBannerView: View {
									@EnvironmentObject var layout: Layout
								
									var body: some View {
										Image(
											SizeVariants(
												compact: "background.compact",
												regular: "background.regular"
											).for(screen: layout.screen)
										)
										.resizable()
										.aspectRatio(contentMode: .fit)
										.frame(maxWidth: 500)
										.padding(DSTokens.Spaces.l)
									}
								}

							
								struct WWDCBannerView: View {
									@EnvironmentObject var layout: Layout
								
									var body: some View {
										Image(
											SizeVariants(
												compact: "background.compact",
												regular: "background.regular"
											).for(screen: layout.screen)
										)
										.resizable()
										.apply(viewAttributes: WWDCBannerStyle.container.for(
											screen: layout.screen
										))
										.aspectRatio(contentMode: .fit)
										.frame(maxWidth: 500)
										.padding(DSTokens.Spaces.l)
									}
								}

							
								struct WWDCBannerView: View {
									@EnvironmentObject var layout: Layout
								
									var body: some View {
										Image(
											SizeVariants(
												compact: "background.compact",
												regular: "background.regular"
											).for(screen: layout.screen)
										)
										.resizable()
										.apply(viewAttributes: WWDCBannerStyle.container.for(
											screen: layout.screen
										))
										.aspectRatio(contentMode: .fit)
										.frame(maxWidth: 500)
										.padding(DSTokens.Spaces.l)
									}

									@ViewBuilder private var foreground: some View {
										HStack {
											Spacer()
											VStack(alignment: .trailing, spacing: DSTokens.Spaces.s) {
												Text("WWDC22")
												Text("Community Event")
												Spacer()
												Button("Join Now") { /* ... */ }
											}
											.padding(DSTokens.Spaces.l)
										}
									}
								}

							
								struct WWDCBannerView: View {
									@EnvironmentObject var layout: Layout
								
									var body: some View {
										Image(
											SizeVariants(
												compact: "background.compact",
												regular: "background.regular"
											).for(screen: layout.screen)
										)
										.resizable()
										.apply(viewAttributes: WWDCBannerStyle.container.for(
											screen: layout.screen
										))
										.aspectRatio(contentMode: .fit)
										.overlay(foreground)
										.frame(maxWidth: 500)
										.padding(DSTokens.Spaces.l)
									}

									@ViewBuilder private var foreground: some View {
										HStack {
											Spacer()
											VStack(alignment: .trailing, spacing: DSTokens.Spaces.s) {
												Text("WWDC22")
												Text("Community Event")
												Spacer()
												Button("Join Now") { /* ... */ }
											}
											.padding(DSTokens.Spaces.l)
										}
									}
								}

							
								struct WWDCBannerView: View {
									@EnvironmentObject var layout: Layout
								
									var body: some View {
										Image(
											SizeVariants(
												compact: "background.compact",
												regular: "background.regular"
											).for(screen: layout.screen)
										)
										.resizable()
										.apply(viewAttributes: WWDCBannerStyle.container.for(
											screen: layout.screen
										))
										.aspectRatio(contentMode: .fit)
										.overlay(foreground)
										.frame(maxWidth: 500)
										.padding(DSTokens.Spaces.l)
									}

									@ViewBuilder private var foreground: some View {
										HStack {
											Spacer()
											VStack(alignment: .trailing, spacing: DSTokens.Spaces.s) {
												Text("WWDC22")
													.apply(textAttributes: WWDCBannerStyle.header.for(
														screen: layout.screen
													))
												Text("Community Event")
													.apply(textAttributes: WWDCBannerStyle.body.for(
														screen: layout.screen
													))
												Spacer()
												Button("Join Now") { /* ... */ }
													.buttonStyle(DSButtonStyle(
														attributes: WWDCBannerStyle.button.for(screen: layout.screen)
													))
											}
											.padding(DSTokens.Spaces.l)
										}
									}
								}