Engineering Design Systems (360iDev)

Many companies are coming to realize the many benefits that design systems bring. A good design system (and its accompanying set of engineered components) can improve design quality and consistency and provide significant reduction in production times for both design and development teams. But how do you engineer the components depicted in the design system? In this talk we will learn how to consume design files and then engineer our own mini design system beginning with the foundations of color, spacing, and typography. We will use our foundations to create a few simple elements, and then we will assemble those into a card component, form fields, and finally a form. Along the way we will consider accessibility through the lens of dark mode, increased color contrast, landscape support, Dynamic Type, and bold text support.

Transcript

1. Mark Pospesel, 28 August 2022 Engineering Design Systems Slack: #sunday-engineering-design-sytems
2. About Me iOS Chapter Lead 
 Y Media Labs
3. YML.co 3 A design and technology agency that exports Silicon Valley to the world. We’re YML To us it is a mindset rooted in velocity, innovation and experimentation.
4. YML.co 4 We tackle our clients’ biggest challenges
5. Overview Slack: #sunday-engineering-design-sytems • Introduction • Final Product • Design Systems (general) • Base Design System • Starter Project • Open-Source frameworks • Start building
6. What we’re building 1. Card
7. What we’re building 1. Card
8. What we’re building 2. Form
9. What we’re building 2. Form
10. Plus Slack: #sunday-engineering-design-sytems • Foundations: Color, Spacing, Images, Typography • Elements: Button, Input, Text • Components: Form Field Our building blocks
11. Accessibility Features Slack: #sunday-engineering-design-sytems • Dynamic Type • Accessibility Bold Text • Dark Mode • Increased Contrast Mode • Landscape Support • Breakpoints (Time permitting)
12. Design System vs Style Guide Bene fi ts of Design Systems
13. Base Design System Search for Base in Figma Community ( fi gma.com) Slack: #sunday-engineering-design-sytems (The full URL is in the Slack channel)
14. Starter Project github.com/mpospese/DSTutorial • Swift Package: DSKit • Open Source dependencies (more on these in a moment) • YCoreUI • YMatterType • UIKit Application • With 2 placeholder view controllers for Card and Form • Every step has its own branch
15. Open Source: YCoreUI github.com/yml-org/YCoreUI • Auto Layout helpers • WCAG 2.0 color contrast • ScrollView helpers
16. Q: Why include scroll view helpers? A: When you build for accessibility, everything is a scroll view!
17. Open Source: YMatterType github.com/yml-org/YMatterType • Typography • Extensions for registering custom fonts • UI elements that support Typography • Button • Label • TextField • TextView
18. Start Building! github.com/mpospese/DSTutorial • main branch • Each individual step can be found at branch: in_progress/step_1, etc
19. Thumb drives • Figma.app • Tutorial zip • This keynote Please return them!
20. 🚥 Let’s Go!
21. 🧱 Foundations
22. Step 1: Colors in_progress/step_1 • De fi ne Colors • Unit test WCAG 2.0 contrast for more color pairings (test failure) • Use new DSKit framework colors in DSTutorial app
23. Step 2: Increased Contrast mode in_progress/step_2 • Add high contrast colors for primaryA & primaryB
24. Step 3: Images in_progress/step_3 • Add enum to load images from Asset catalog • Unit tests to con fi rm image load
25. Step 4: Spacing in_progress/step_4 • Add Spacing • Unit tests
26. Step 5: Register custom font in_progress/step_5 • Add register/unregister fonts to DSKit • Unit tests • Register fonts in app
27. Step 6: Typography.Heading in_progress/step_6 • Add Typography.Heading • XCTestCase subclass to register/unregister fonts on setUp/tearDown • Unit tests
28. Step 7: Typography.Label in_progress/step_7 • Add Typography.Label.Medium • Unit tests
29. Step 8: Typography.Paragraph in_progress/step_8 • Add Typography.Paragraph.Medium & Small • Unit tests
30. 🔥 Elements
31. Step 9: Heading in_progress/step_9 • Add Heading Element • Expand XCTestCase subclass with helpers for comparing typography & color • Unit tests
32. Step 10: Label in_progress/step_10 • Add Label Element • Unit tests
33. Step 11: Paragraph in_progress/step_11 • Add Paragraph Element • Unit tests
34. Step 12: Button in_progress/step_12 • Add Button Element • Unit tests
35. ⚙ Components
36. Step 13: Card in_progress/step_13 • Add CardView Component • Unit tests
37. Step 14: Input in_progress/step_14 • Add Input Element • Unit tests
38. Step 15: Form Field in_progress/step_15 • Assemble FormField Component • Unit tests
39. ⏱ Module
40. Step 16: Form in_progress/step_16 • Assemble Form Module • Unit tests • Add Form to app
41. Step 17: Increased Contrast, revisited in_progress/step_17 • Add increased contrast colors for backgroundTertiary / contentTertiary
42. 🙆 Stretch goals
43. Step 1: More Typography sizes stretch/step_1 • Add Typography.Label.Large & Small • Add Typography.Paragraph.Large • Unit tests
44. Step 2: Breakpoint stretch/step_2 • Add Foundation Breakpoint • Unit tests
45. Step 3: Typography + Breakpoint stretch/step_3 • Add breakpoint support to Tyopgraphy.Label & Paragraph
46. Step 4: Breakpoint unit tests stretch/step_4 • Add stubs to be able to change current Breakpoint • Unit tests for Typography+Breakpoint
47. Step 5: Label/Paragraph + Size stretch/step_5 • Add Large/Medium/Small variants of Text/Label & Text/Paragraph • Unit tests • (This could have been earlier. Not dependent upon breakpoints.)
48. Step 6: Button/Input + Size stretch/step_6 • Adjust DSButton & DSTextField to update insets • Add Large/Medium/Small variants of Button & Input • Unit tests
49. Step 7: Label/Paragraph + Breakpoint stretch/step_7 • Add size-adjusting Breakpoint subclasses of DSLabel & DSParagraph • Add XCTestCase subclass for adjusting breakpoints on UI elements • Unit tests
50. Step 8: Button/Input + Breakpoint stretch/step_8 • Add size-adjusting Breakpoint subclasses of DSButton & DSTextField • Update BreakpointElementTestCase to use generics • Unit tests
51. 💯 Mission Accomplished!
52. Engineering Design Systems 28 August 2022 • Mark Pospesel • @mpospese • Feedback appreciated! • Repos: • github.com/mpospese/DSTutorial • github.com/yml-org/YCoreUI • github.com/yml-org/YMatterType