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

Sketch Your UI

Visioncan Chen
December 19, 2014

Sketch Your UI

Introduction Sketch and Export assets to Xcode

Visioncan Chen

December 19, 2014
Tweet

Other Decks in Design

Transcript

  1. Design > Flash AS > php > Javascript > Objective

    C @visioncan fb, twitter, gmail, www
  2. Let’s Talk About… • Sketch • Vector Image in Xcode

    • Automatically Export Assets into Xcode • Resources
  3. Sketch features • Pages & Artboards & Smart Guides •

    Symbols , Layer Styles, Multiple Styling • Export • Plugins • iOS Preview
  4. Export • Drag out Layers • Slice Layers • Export

    1x, 2x , 3x! • Export PNG, PDF!
  5. 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
  6. 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
  7. > 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
  8. 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
  9. 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