Frameworks are a powerful tool for sharing code between applications and extensions. Playgrounds are an awesome tool for quickly trying out code in Swift. Keeping a tight feedback loop with designers can be difficult. So, how can you combine the powerful and the awesome to help keep your feedback loop with design as tight as possible? Use UI Frameworks in Playgrounds! Learn how to build a UI-only framework, and then use it in a Playground. See how you can tempt your designers to the dark side of installing Xcode and tweaking values themselves. Ellen Shapiro discusses how she used this technique at SpotHero to speed up their 2017 redesign. Leave with tools to build a powerful framework, knowledge of how to make Playgrounds play nice with frameworks, and ideas for how your development and design teams can use these tools and techniques to power up your iOS app's UI.

1. T1
Session - Mobile Development
4/27/17 10:00 AM
UI Framework Prototyping with
Playgrounds for iOS Apps
Presented by:
Ellen Shapiro
SpotHero
Brought to you by:
350 Corporate Way, Suite 400, Orange Park, FL 32073
888---268---8770 ·· 904---278---0524 - info@techwell.com - https://www.techwell.com/

2. Ellen Shapiro
SpotHero
Ellen Shapiro is the former Director of iOS Engineering at Chicago-based agency
Vokal, which helps companies develop and build their vision for taking advantage
of a mobile world. When not working, Ellen partners with designer and fellow
singer-songwriter Aaron Shekey of Github to create the leading songwriting app
Hum. Ellen also writes tutorials for leading iOS tutorial site RayWenderlich.com
and will talk your virtual ear off on Twitter as @DesignatedNerd

3. UI Prototyping With
PlaygroundsEllen Shapiro | Mobile Dev + Test, San Diego | April 2017
@designatednerd | spothero.com | justhum.com

6. via Kara Brugman at https://www.instagram.com/p/pvqUXsmBS5/

7. app.psd

8. app.psd
app_ios_v2.psd
app.psd
app_ios_v2.psd
designs_v2.5.psd

9. app.psd
app_ios_v2.psd
designs_v2.5.psd
app_designs_final.psd
app.psd
app_ios_v2.psd
designs_v2.5.psd
app_designs_final.psd
app_designs_final(2).psd

10. app.psd
app_ios_v2.psd
designs_v2.5.psd
app_designs_final.psd
app_designs_final(2).psd
app_designs_final_revised.psd
app.psd
app_ios_v2.psd
designs_v2.5.psd
app_designs_final.psd
app_designs_final(2).psd
app_designs_final_revised.psd
i_quit.psd

11. via twitter.com/DigitalSynopsis

12. via https://www.smashingmagazine.com/2011/05/two-cats-in-a-sack-designer-developer-discord/

14. Allow Designers To Express Their Intent
In A Way Which Shows Up In Code
Naming Things Consistently

15. Thing iOS Thing Android Thing
Color UIColor R.color
Non-editable Text UILabel TextView
Short Text Input UITextField EditText
Long Text Input UITextView EditText
Button UIButton Button
Top Navigation UINavigationBar Toolbar
Thing iOS Thing Android Thing
Color UIColor R.color
Non-editable Text UILabel TextView
Short Text Input UITextField EditText
Long Text Input UITextView EditText
Button UIButton Button
Top Navigation UINavigationBar Toolbar

16. Thing iOS Thing Android Thing
Color UIColor R.color
Non-editable Text UILabel TextView
Short Text Input UITextField EditText
Long Text Input UITextView EditText
Button UIButton Button
Top Navigation UINavigationBar Toolbar
Name From Designer
Corvette
Tangerine
Canary
Palm Tree
Ocean
Violet

17. Name From Designer iOS Var Name Android Name
Corvette exm_darkRed R.color.red
Tangerine exm_orange R.color.orange
Canary exm_mutedYellow R.color.pee
Palm Tree exm_green R.color.lt_green
Ocean exm_navyBlue R.color.ocean
Violet exm_purpleDrank R.color.go_u_nu
Name From Designer iOS Var Name Android Name
Corvette exm_corvette R.color.corvette
Tangerine exm_tangerine R.color.tangerine
Canary exm_canary R.color.canary
Palm Tree exm_palmTree R.color.palm_tree
Ocean exm_ocean R.color.ocean
Violet exm_violet R.color.violet

18. Name From Designer iOS Class Name Android Style Name
Headline Text EXMHeadlineLabel HeadlineTextStyle
Sub-Head Text EXMSubHeadLabel SubHeadTextStyle
Body Text EXMBodyLabel BodyTextStyle
Caption Text EXMCaptionLabel CaptionTextStyle
Warning Text EXMWarningText WarningTextStyle
Fine Print Text EXMFinePrintText FinePrintTextStyle
Name From Designer iOS Class Name Android Style Name
Primary Call To Action Button EXMPrimaryCTAButton PrimaryCTAButtonStyle
Secondary Call To Action Button EXMSecondaryCTAButton SecondaryCTAButtonStyle
Transactional Button EXMTransactionalButton TransactionalButtonStyle
DestructiveButton EXMDestructiveButton DestructiveButtonStyle
Edit Button EXMEditButton EditButtonStyle
Checkbox Button EXMCheckboxButton CheckboxButtonStyle
Radio Button EXMRadioButton RadioButtonStyle
Giant Button EXMGiantButton GiantButtonStyle
Super-Giant Button EXMSuperGiantButton SuperGiantButtonStyle

19. via https://www.flickr.com/photos/designmilk/8552219138

20. Automatically Generate Code
Based on the Designer's Intentions
Get designers to use a
specified format

21. Get designers to use a
specified format*
*
This is a lot easier said than done

23. Underlying values change
seamlessly

24. Name changes break
obviously

31. Selling Your Designers
on this cockamamie brilliant idea

32. via http://www.cultofmac.com/388474/apple-pencil-versus-wacom-cintiq/

35. Distributing playgrounds
• Git
• Email
• AirDrop
• Dropbox
• Continuous Integration uploading to S3 or an internal site

36. Re-incorporating
design changes

37. Working collaboratively
vs.
Working asynchronously
Building a Framework

38. Advantages
of UI Frameworks

39. Separation
of concerns
Reusability
across multiple apps

40. Reusability
across multiple extensions

41. Snapshot Testing
Limitations
of UI Frameworks

42. @IBDesignable?

43. Separation
of concerns
Separation
⚔
of concerns

44. Con rency cur
Concurrency

46. Playgrounds With Designers: Easy Mode
• Hand off via email, AirDrop, or synced folder
• Use a single, ginormous playground file**
• Create basic elements but don't include anything complicated
• Copy and paste files into the sources folder
**
May be REAL slow
Playgrounds With Designers: Advanced Mode
• Automatically generate every time there's a build of the
application
• Copy source files of framework into Sources folder in playground
using a script
• Use a multi-page playground to separate things
• Let designers download from a consistent place

47. Playgrounds With Designers: Expert Mode
• #SquadGoals
• Automatically generate only when changes have taken place in
the UI framework
• Create a Playground Book that allows designers to muck about
with stuff on their iPad
• Automatically upload so the designers can get it on their iPad
(iCloud? Dropbox?)
A Few Parting Recommendations
• Start small.

48. A Few Parting Recommendations
• Start small.
• Colors, fonts, UILabel subclasses
A Few Parting Recommendations
• Start small.
• Colors, fonts, UILabel subclasses
• Margins, font sizes, padding

49. A Few Parting Recommendations
• Start small.
• Colors, fonts, UILabel subclasses
• Margins, font sizes, padding,
• UIButtons, UITextFields, and other state-driven UI
A Few Parting Recommendations
• Start small.
• Colors, fonts, UILabel subclasses
• Margins, font sizes, padding,
• UIButtons, UITextFields, and other state-driven UI
• Custom Views And Animations

50. Build the
Building Blocks
via https://www.flickr.com/photos/designmilk/8552219138
Links!
• TrueColors app and the CyndiLauper parser: https://
github.com/vokal/TrueColors-macOS
• Sourcery: https://github.com/krzysztofzablocki/Sourcery
• Embedding frameworks in an .xcworkspace: https://
useyourloaf.com/blog/adding-playgrounds-to-xcode-projects/