Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sketch Your UI

D3ed192380b146ea4286ed60e767840a?s=47 Visioncan Chen
December 19, 2014

Sketch Your UI

Introduction Sketch and Export assets to Xcode

D3ed192380b146ea4286ed60e767840a?s=128

Visioncan Chen

December 19, 2014
Tweet

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