Make Your SwiftUI Design System Portable with Swift Packages
Learn to build your own SwiftUI design system as a Swift package! Apply your own custom fonts and colors to multiple projects with the ease of code modularity and reusability.
to have the same branding / theme - they currently do not! Reuse design elements easily and e ffi ciently Sun fi sh Empire is named after an actual fi sh, called the sun fi sh! linktr.ee/sun fi shgurl
SDK containing custom fonts and colors Apply custom fonts and colors to multiple iOS projects for consistent branding / theming Create / extend ViewModi fi ers to take custom fonts and colors Match Apple’s ViewModi fi er syntax when possible Very useful / important for client facing libraries! For SwiftUI Views linktr.ee/sun fi shgurl
view modi fi ers Building custom components (buttons, controls, etc) Accessibility in design Best design practices Pulling local Swift package into standalone repo linktr.ee/sun fi shgurl
years) 🤯 10+ years as mobile developer, cross platform & native iOS Leadership Fellow for Women Who Code Mobile This talk is the solution to a problem I solved at a previous job (for Fortune 50 company) Two truths and a lie (answer revealed at end of talk!): I am allergic to cats I have been known to sleep walk I once swam with sharks linktr.ee/sun fi shgurl
project workspace to hold local Swift package Xcode ▸ File ▸ New ▸ Package Place Swift package in that new directory Add Swift package to same workspace as iOS project linktr.ee/sun fi shgurl
in same workspace as iOS project to start Add Swift package to frameworks Create two schemas, one for Swift package and one for iOS project Check project layout, ensure that Swift package is inside same workspace as iOS project linktr.ee/sun fi shgurl
license Look for font weights: regular, light, and bold Warning: using fonts that don’t have free license will NOT load in Xcode! Non-free fonts that you’ve paid for might work, but I haven’t tried that yet linktr.ee/sun fi shgurl
fi er method: Create Sun fi shFont enum to represent our custom font Extend Font by overloading Font.custom( ) function to take a Sun fi shFont Create ViewModi fi er to take in overloaded Font.custom( ) function Extend View to take in our custom ViewModi fi er Looks Similar To: linktr.ee/sun fi shgurl
into Swift package Register fonts before use Implement custom (new) .font( ) view modi fi er Warning: if you see Apple’s system fonts instead of your fonts, review last few slides to see if you missed something linktr.ee/sun fi shgurl
import into Swift Package: Find an image with colors you want Add Assets catalog to Swift Package Add a color in Assets catalog - this will change Use dropper in Xcode color panel and tap on a spot in your image to update the color in Assets fi le linktr.ee/sun fi shgurl
Create Sun fi shColor enum to represent our custom color Extend Color to initialize Color from Sun fi shColor Extend ShapeStyle to use custom Color initializer Existing Apple ViewModi fi ers, like .foregroundColor( ), that take a ShapeStyle can now take a Sun fi shColor Looks Similar To: linktr.ee/sun fi shgurl
initializer Color, such as a Sun fi shColor, is a concrete type of the ShapeStyle protocol! See https://developer.apple.com/ documentation/swiftui/shapestyle/ linktr.ee/sun fi shgurl
.foregroundColor( ), that take a ShapeStyle can now take a Sun fi shColor Now .foregroundColor( ) can take ShapeStyle / Color of type Sun fi shColor: linktr.ee/sun fi shgurl
method: Create Sun fi shColor enum to represent our custom color - ✅ Extend Color to initialize Color from Sun fi shColor - ✅ Extend ShapeStyle to use custom Color initializer - ✅ Existing Apple ViewModi fi ers, like .background( ), that take a ShapeStyle can now take a Sun fi shColor - ✅ Looks Similar To: linktr.ee/sun fi shgurl
Colors Import custom colors into Swift Package Extend ShapeStyle to include custom colors Easily extend existing Apple ViewModi fi ers to take custom colors using extended ShapeStyle. This process works for: .foregroundColor( ) .background( ) linktr.ee/sun fi shgurl
fi er method: Create Sun fi shColor enum to represent our custom color - ✅ Extend Color to initialize Color from Sun fi shColor - ✅ Extend ShapeStyle to use custom Color initializer - ✅ ViewModi fi ers, like . fi ll( ), that take a ShapeStyle can now take a Sun fi shColor - ✅ linktr.ee/sun fi shgurl
ll(_:strokeBorder:lineWidth ) method: Create Sun fi shColor enum to represent our custom color - ✅ Extend Color to initialize Color from Sun fi shColor - ✅ Extend ShapeStyle to use custom Color initializer - ✅ Extend Shape class by creating a custom . fi ll( ) method that can take ShapeStyle of type Sun fi shColor - 🙋 linktr.ee/sun fi shgurl Fill circle with sun fi shPink Draw border in sun fi shBrown
custom . fi ll( ) method that can take ShapeStyle of type Sun fi shColor This last step makes it possible to call the custom . fi ll( ) view modi fi er: linktr.ee/sun fi shgurl
fi er methods: Create Sun fi shColor enum to represent our custom color - ✅ Extend Color to initialize Color from Sun fi shColor - ✅ Extend ShapeStyle to use custom Color initializer - ✅ Existing Apple ViewModi fi ers, like .strokeBorder( ) & .background( ), that take a ShapeStyle can now take a Sun fi shColor - ✅ linktr.ee/sun fi shgurl Draw border in sun fi shBlue Color background in sun fi shYellow
/ Find Custom Colors Import custom colors into Swift Package Easily extend existing Apple ViewModi fi ers to take custom colors by extending ShapeStyle. This process works for: . fi ll( ) .strokeBorder( ) .background( ) Implement custom (new) ViewModi fi er that can take custom colors through the extended ShapeStyle. . fi ll(_: strokeBorder: lineWidth)
view-modi fi ers-tutorial-for-ios Hacking With Swift: https://www.hackingwithswift.com/quick-start/swiftui/how-to- fi ll-and-stroke- shapes-at-the-same-time Apple’s guides on view modi fi ers: https://developer.apple.com/documentation/swiftui/reducing-view-modi fi er- maintenance https://developer.apple.com/documentation/swiftui/con fi guring-views linktr.ee/sun fi shgurl
https://fonts.google.com/knowledge/readability_and_accessibility/ introducing_accessibility_in_typography https://www.hackingwithswift.com/quick-start/swiftui/how-to-use-dynamic-type-with-a-custom-font https://www.designsystems.com/ Thanks to @SuzGupta & @terrylatanville for helping me fi nd these design resources! 👏 linktr.ee/sun fi shgurl
vuinguyen
yuhta28
lmi
hirutas
tetsuyaooooo
egmc
kongmingstrap
qsona
yushin_n
inductor
pauli
oracle4engineer
nakamuuu
chrislema
eitanlees
bluesmoon
jponch
mza
gr2m
colly
davidbonilla
schacon
geeforr
tmm1
sferik
