Sketch Your UI

Introduction Sketch and Export assets to Xcode

Transcript

1. Sketch Your UI iOS Dev Club @visioncan
2. Design > Flash AS > php > Javascript > Objective C @visioncan fb, twitter, gmail, www
3. Let’s Talk About… • Sketch • Vector Image in Xcode • Automatically Export Assets into Xcode • Resources
4. Sketch 3
5. Who use Sketch?
6. http://www.google.com/design/spec/resources/sticker-sheets.html Google Material Design
7. https://developer.apple.com/watchkit/ Apple WatchKit
8. https://medium.com/@sambrown/designing-the-new-foursquare-8f8788d366f0 Foursquare
9. Sketch features • Pages & Artboards & Smart Guides • Symbols , Layer Styles, Multiple Styling • Export • Plugins • iOS Preview
10. Pages & Artboards
11. Symbols , Layer Styles, Multiple Styling
12. Export • Drag out Layers • Slice Layers • Export 1x, 2x , 3x! • Export PNG, PDF!
13. Plugins Sketch Toolbox
14. Plugins Content-generator-sketch-plugin sketch-measure http://www.sketchappsources.com/plugins-for-sketch.html https://github.com/sketchplugins/plugin-directory RESOURCES: RECOMMEND:
15. Preview on iDevice Skala View Sketch Mirror Skala Preview $4.99 Free (Sketch-preview plugin require!)
16. Vector Image in Xcode
17. Vector Image in Xcode 1.Export .pdf @1x size 2.Create a Image Set. in Images.xcassets 3.Set the Types to Vectors in the attributes inspector 4.Drag pdf file into All, Universal 2014 WWDC Session 411 - "What's New in Interface Builder" 44:13
18. build-time • iOS is not full vector support! • Cann’t scale to new size • Assets.car only supports iOS 7 and later @1x @2x @3x Assets.car Vector Image in Xcode
19. > sketchtool http://bohemiancoding.com/sketch/tool/ sketchtool export artboards <doc.sketch> \ --output=<folder> \ --items=<names-or-ids> \ --scales="1.0, 2.0" \ --formats="png,pdf,eps,jpg" sketchtool list artboards <doc.sketch> sketchtool help
20. Automatically Export Assets into Xcode
21. Automatically Export Assets into Xcode /usr/local/bin/sketchtool export artboards "$PROJECT_DIR"/"Resource/AppIcon.sketch" -- output="$PROJECT_DIR"/"$PROJECT_NAME"/ Images.xcassets/AppIcon.appiconset --formats="png" Targets > New Run Script Phase http://mdznr.roon.io/automatically-exporting-assets-from-sketch-into-xcode
22. Automatically Export Assets into Xcode
23. Resources SketchAppSources LearnSketch.com sketchtips sketch-resources from ustwo sketch icons to Xcode (from Cocoaheads Taipei Liyao Chen) iOS8 App icon template SketchApp.tw FB Groups