Starting a Mobile Design System

https://www.youtube.com/watch?v=xB36hr7FQis

Transcript

1. SAM SOFFES AUGUST 15, 2018 Starting a mobile design system
2. Hi, I’m @soffes
3. Agenda • Mobile design system
 • Why
 • What we built • Tooling
4. Inspiration
5. Mobile design system
6. Our needs
9. Scalable
10. Goals
11. Consistent & flexible
12. Native
13. Lyft Product Language
14. Attributes Components Templates Principles
15. C O L O R E L E V AT I O N I C O N O G R A P H Y T Y P O G R A P H Y I L L U S T R AT I O N A N I M AT I O N Yellow Red Indigo Purple Pink Rose Mint Green Lime Citron Amber Sunset Orange Teal Cyan Blue Ly 3 D C O P Y Attributes
16. B U T T O N S S E L E C T I O N C O N T R O L S T E X T F I E L D S Components
17. Templates A L E R T S S H E E T S
18. Single source of truth
19. Repo with JSON
20. { "identifier": "typography", "title": "Typography", "comment": "Definitions for typography.", "documentation_url": "https://go.lyft.com/lpl-typography", "fontFamilies": [ { "identifier": "primary", "name": "ProximaNova", "weights": [ "regular", "medium", "bold" ] }, { "identifier": "secondary", "name": "LyftProUI", "weights": [ "bold" ]
21. Protocol buffers
22. syntax = "proto3"; // Lyft Product Language typography attribute message TypographyAttribute { // Font weights enum Weight { // Regular weight regular = 0; // Medium weight medium = 1; // Bold weight bold = 2; } message FontFamily { // Identifier (primary, secondary) string identifier = 1;
23. lpltool
24. Code generation
25. // ⚠ This file is generated. Do not edit. import UIKit /// Definitions for color. /// /// {{ documentation_url }} public struct Color { /// Underlying UIColor public let underlyingColor: UIColor /// Initialize a color /// /// - parameter red: P3 red component
26. {% for group in spectrum %} /// {{ group.title }} extension Color { {% for color in group.colors %} /// {{ color|hex }} public static let {{ color.identifier }} = Color(red: {{ color.red|tff }}, green: {{ color.green|tff }}, blue: {{ color.blue|tff }}) {% endfor %}}{% endfor %}
27. Enables other tooling
28. $ lpltool Commands: + generate - Generate code from an attribute and template + generate-icon-asset-catalog - Generate icons from SVG to an asset catalog + nearest-color - Find the nearest spectrum color for a given color + lint-ib-colors - Lint all colors found in Interface Builder files + snap-ib-colors - Snap all colors found in Interface Builder files to defined color spectrum
29. Closer look
30. Color
31. public struct Color { public let underlyingColor: UIColor private init(red: CGFloat, green: CGFloat, blue: CGFloat) { self.underlyingColor = UIColor( displayP3Red: red, green: green, blue: blue, alpha: 1) } }
32. /// Brand extension Color { /// #FF00BF public static let lyftPink = Color(red: 1, green: 0, blue: 0.749) } /// Red extension Color { /// #FFFAFB public static let red0 = Color(red: 1, green: 0.98, blue: 0.984) /// #FFE5E9
33. Control
34. Accessibility
35. var traits = self.baseAccessibilityTraits if self.isSelected { traits = traits | UIAccessibilityTraitSelected } if !self.isEnabled || self.isLoading { traits = traits | UIAccessibilityTraitNotEnable } self.accessibilityTraits = traits
36. var accessibilityPathCornerRadius: CGFloat?
38. Greedy touch handling
39. func point(inside point: CGPoint, with event: UIEvent?) -> Bool
40. func gestureRecognizerShouldBegin( _ gestureRecognizer: UIGestureRecognizer) -> Bool
41. Button
42. Control instead of UIButton
45. Two view models
46. extension Button { public struct Size { public var font: UIFont public var height: CGFloat public var activityIndicatorSize: ActivityIndicatorView.Size } }
47. extension Button { public struct Style { public var text: Color public var disabledText: Color public var background: Color public var touchDownBackground: Color public var disabledBackground: Color public var border: Border? public var loadingIndicator: Color public var hasRoundedCorners: Bool public var isElevated: Bool } }
48. extension Button.Style { public static let primary = Button.Style( text: .white, background: .purple60, touchDownBackground: .purple80, disabledBackground: .purple30) public static let primaryElevated: Button.Style = { var style = Button.Style.primary style.isElevated = true return style }()
49. Composable
50. Button(size: .small, style: .primary)
51. Consistency & flexibility
52. private extension Button.Size { static let verySmall = Button.Size( font: .primaryFont(ofSize: 15, weight: .bold), height: 40, activityIndicatorSize: .small) }
53. State Animator
54. public protocol StateAnimator { associatedtype State: Hashable var pacing: Pacing { get } var curve: Curve { get } func set(_ state: State, animated isAnimated: Bool) }
55. let animator = ViewStateAnimator(view: self) animator.set(.identity, for: \.transform, when: .normal) animator.set(.elevatedTouchDownScale, for: \.transform, when: .touchDown)
56. let animator = LayerStateAnimator(layer: self.backgroundLayer) animator.set(fillColor: .purple60, when: .normal) animator.set(fillColor: .purple80, when: .touchDown) animator.set(shadow: .level2, when: .normal) animator.set(shadow: nil, when: .touchDown, .loading)
57. self.animator.set(self.componentState, animated: true)
58. Paradigm
60. Easier than we thought
61. Just UIKit
62. Tools are just apps
63. Start small
64. Thank you AUGUST 15, 2018