Engineering Design Systems (360iDev)

Slide 1

Slide 1 text

Mark Pospesel, 28 August 2022 Engineering Design Systems Slack: #sunday-engineering-design-sytems

Slide 2

Slide 2 text

About Me iOS Chapter Lead   Y Media Labs

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

YML.co 4 We tackle our clients’ biggest challenges

Slide 5

Slide 5 text

Overview Slack: #sunday-engineering-design-sytems • Introduction • Final Product • Design Systems (general) • Base Design System • Starter Project • Open-Source frameworks • Start building

Slide 6

Slide 6 text

What we’re building 1. Card

Slide 7

Slide 7 text

What we’re building 1. Card

Slide 8

Slide 8 text

What we’re building 2. Form

Slide 9

Slide 9 text

What we’re building 2. Form

Slide 10

Slide 10 text

Plus Slack: #sunday-engineering-design-sytems • Foundations: Color, Spacing, Images, Typography • Elements: Button, Input, Text • Components: Form Field Our building blocks

Slide 11

Slide 11 text

Accessibility Features Slack: #sunday-engineering-design-sytems • Dynamic Type • Accessibility Bold Text • Dark Mode • Increased Contrast Mode • Landscape Support • Breakpoints (Time permitting)

Slide 12

Slide 12 text

Design System vs Style Guide Bene fi ts of Design Systems

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Open Source: YCoreUI github.com/yml-org/YCoreUI • Auto Layout helpers • WCAG 2.0 color contrast • ScrollView helpers

Slide 16

Slide 16 text

Q: Why include scroll view helpers? A: When you build for accessibility, everything is a scroll view!

Slide 17

Slide 17 text

Open Source: YMatterType github.com/yml-org/YMatterType • Typography • Extensions for registering custom fonts • UI elements that support Typography • Button • Label • TextField • TextView

Slide 18

Slide 18 text

Start Building! github.com/mpospese/DSTutorial • main branch • Each individual step can be found at branch: in_progress/step_1, etc

Slide 19

Slide 19 text

Thumb drives • Figma.app • Tutorial zip • This keynote Please return them!

Slide 20

Slide 20 text

🚥 Let’s Go!

Slide 21

Slide 21 text

🧱 Foundations

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Step 2: Increased Contrast mode in_progress/step_2 • Add high contrast colors for primaryA & primaryB

Slide 24

Slide 24 text

Step 3: Images in_progress/step_3 • Add enum to load images from Asset catalog • Unit tests to con fi rm image load

Slide 25

Slide 25 text

Step 4: Spacing in_progress/step_4 • Add Spacing • Unit tests

Slide 26

Slide 26 text

Step 5: Register custom font in_progress/step_5 • Add register/unregister fonts to DSKit • Unit tests • Register fonts in app

Slide 27

Slide 27 text

Step 6: Typography.Heading in_progress/step_6 • Add Typography.Heading • XCTestCase subclass to register/unregister fonts on setUp/tearDown • Unit tests

Slide 28

Slide 28 text

Step 7: Typography.Label in_progress/step_7 • Add Typography.Label.Medium • Unit tests

Slide 29

Slide 29 text

Step 8: Typography.Paragraph in_progress/step_8 • Add Typography.Paragraph.Medium & Small • Unit tests

Slide 30

Slide 30 text

🔥 Elements

Slide 31

Slide 31 text

Step 9: Heading in_progress/step_9 • Add Heading Element • Expand XCTestCase subclass with helpers for comparing typography & color • Unit tests

Slide 32

Slide 32 text

Step 10: Label in_progress/step_10 • Add Label Element • Unit tests

Slide 33

Slide 33 text

Step 11: Paragraph in_progress/step_11 • Add Paragraph Element • Unit tests

Slide 34

Slide 34 text

Step 12: Button in_progress/step_12 • Add Button Element • Unit tests

Slide 35

Slide 35 text

⚙ Components

Slide 36

Slide 36 text

Step 13: Card in_progress/step_13 • Add CardView Component • Unit tests

Slide 37

Slide 37 text

Step 14: Input in_progress/step_14 • Add Input Element • Unit tests

Slide 38

Slide 38 text

Step 15: Form Field in_progress/step_15 • Assemble FormField Component • Unit tests

Slide 39

Slide 39 text

⏱ Module

Slide 40

Slide 40 text

Step 16: Form in_progress/step_16 • Assemble Form Module • Unit tests • Add Form to app

Slide 41

Slide 41 text

Step 17: Increased Contrast, revisited in_progress/step_17 • Add increased contrast colors for backgroundTertiary / contentTertiary

Slide 42

Slide 42 text

🙆 Stretch goals

Slide 43

Slide 43 text

Step 1: More Typography sizes stretch/step_1 • Add Typography.Label.Large & Small • Add Typography.Paragraph.Large • Unit tests

Slide 44

Slide 44 text

Step 2: Breakpoint stretch/step_2 • Add Foundation Breakpoint • Unit tests

Slide 45

Slide 45 text

Step 3: Typography + Breakpoint stretch/step_3 • Add breakpoint support to Tyopgraphy.Label & Paragraph

Slide 46

Slide 46 text

Step 4: Breakpoint unit tests stretch/step_4 • Add stubs to be able to change current Breakpoint • Unit tests for Typography+Breakpoint

Slide 47

Slide 47 text

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.)

Slide 48

Slide 48 text

Step 6: Button/Input + Size stretch/step_6 • Adjust DSButton & DSTextField to update insets • Add Large/Medium/Small variants of Button & Input • Unit tests

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Step 8: Button/Input + Breakpoint stretch/step_8 • Add size-adjusting Breakpoint subclasses of DSButton & DSTextField • Update BreakpointElementTestCase to use generics • Unit tests

Slide 51

Slide 51 text

💯 Mission Accomplished!

Slide 52

Slide 52 text

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