Implementing Design Systems in Swift

Transcript

1. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Implementing Design Systems in Swift*
2. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 *An Opinionated Guide
3. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN What’s a Design System?
4. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 — Andrew Couldwell, Laying the Foundations Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how. “ ”
5. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 — Andrew Couldwell, Laying the Foundations Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how. “ ”
6. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 — Andrew Couldwell, Laying the Foundations Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how. “ ”
7. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 — Andrew Couldwell, Laying the Foundations Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how. “ ”
8. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Do you really have a Design System? Or, is it just a style guide?
9. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 — Andrew Couldwell, Laying the Foundations Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how. “ ”
10. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
11. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
12. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
13. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Still not a design system.
14. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Popular Design Systems
15. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN  Human Interface Guidelines
16. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Google Material Design
17. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Shopify Polaris Design System
18. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Getcontact Style Guide
19. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Where do we begin?
20. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 — Andrew Couldwell, Laying the Foundations Design systems bring order and consistency to digital products. They help to protect the brand, elevate the user experience, and increase the speed and efficiency of how we design and build products. They are a source of truth and a system of record for our design decisions. They hold us to high standards, keep teams on the same page, and help to onboard new team members. They document the why, when, where, and how. “ ”
21. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Three Principles Speedy Development Developer Experience Documentation
22. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN File > New Framework
23. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN GTCUI.framework
24. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
25. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Our first component?
26. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
27. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
28. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN No.
29. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
30. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Ask developers. Begin with the most needed component.
31. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
32. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Implementing Primitives
33. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Colors
34. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Colors
35. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Icons
36. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Icons
37. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Icons
38. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Icons
39. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
40. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
41. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
42. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
43. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
44. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
45. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
46. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Fonts
47. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Spacing
48. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Radius
49. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Ready for our first component, Chat Card
50. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Three Principles Speedy Development Developer Experience Documentation
51. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 SwiftUI Previews 􀒊
52. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode Previews 􀇻
53. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode 15 - iOS 17 Only
54. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 GTCUI Target -> iOS 12
55. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Dummy Target
56. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024
57. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Custom Flags
58. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode Previews for UIKit
59. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Code Structure
60. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Three Principles Speedy Development Developer Experience Documentation
61. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 View Presentation Previews
62. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 View - UIView subclass - Programmatic UI - Auto Layout (w/ SnapKit)
63. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024
64. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 - Model agnostic, only primitive Swift types - Struct - Calls configureUI on didSet Presentation
65. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024
66. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024
67. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024
68. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Previews
69. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode Previews Demo
70. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Debugging Previews
71. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Reveal.app
72. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Three Principles Speedy Development Developer Experience Documentation
73. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode File Templates
74. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode File Templates
75. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode File Templates
76. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Xcode File Templates
77. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Three Principles Speedy Development? Developer Experience Documentation
78. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Design Tokens
79. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 􀒊
80. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 .blue500
81. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 .blue500 .primaryColor
82. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 .blue500 .primaryColor .primaryButtonBackgroundColor
83. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024
84. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Modularization
85. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN .xcframework
86. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Swift Package / Carthage Support
87. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Three Principles Speedy Development? Developer Experience Documentation
88. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Apple DocC
89. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
90. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
91. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
92. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN .doccarchive
93. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
94. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
95. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
96. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Web Documentation
97. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
98. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN CI/CD
99. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN
100. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN One more thing…
101. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Snapshotting
102. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Snapshot Testing
103. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN pointfree/swift-snapshot-testing
104. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Snapshotable
105. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN GTCUITest
106. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Scheme Test Post-Actions
107. SEYFEDDIN BASSARAC DEVNOT MOBILE 2024 APR 2024 @SEYFOYUN SEYFEDD.IN Referencing Images
108. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Where to go from here?
109. SEYFEDDIN BASSARAC @SEYFOYUN SEYFEDD.IN DEVNOT MOBILE 2024 APR 2024 Thank you