Sample repository to export the icons in Sletch file to iOS/Android projects.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs
import_app_icon/AppIcon.appiconset
ios/SketchExportSample
scripts
.gitignore
.travis.yml
README.md
images.sketch

README.md

sketch-export-sample Build Status

This exports the icons in Sketch files to Android/iOS projects.

Overview

  • Easy to manage both Android and iOS icons.
  • All the engineer needs to do are only checking Pull Request which is created by CI.
  • Good bye human error.

overview

1. Push Sketch file to GitHub

  • When the designer add or modify the icons, s/he pushes Sketch file to GitHubRepository.
  • Sketch file has the images and icons which are used in Android/iOS app.
  • Basically the icons' color is white. Simple icons are tinted programmatically.
  • There is simple naming rule to export the image files automatically.
Type Rule Example
Image img_{name} img_quiz_result, img_tutorial_1
Icon ic_{name}_{size} ic_quiz_24, ic_star_48
  • If the designer is not familiar with Git, git-sketch-plugin might help. This tool provides Git menu and we can commit and push on Sketch. Plus, it generates the preview image file per Art board. We can check the image diff on Pull Request.

2. Export icons by Sketch tool

% sketchtool export slices images.sketch --output=out/images
Exported ic_todo_schedule_24.png
Exported ic_todo_schedule_24@1.5x.png
Exported ic_todo_schedule_24@2x.png
Exported ic_todo_schedule_24@3x.png
…

3. Apply images to iOS/Android project.

iOS

  • import_to_ios.sh creates Asset catalog.
  • Sketch tool supports to export the pdf file too. (But this repository doesn't support. Welcome your contribution!)
  • Actually, the structure of Asset catalog is so simple.

File structure

Assets.xcassets
├ ic_shopping_cart_24.imageset
  ├ Contents.json
  ├ ic_shopping_cart_24.png
  ├ ic_shopping_cart_24@2x.png
  ├ ic_shopping_cart_24@3x.png

Contents.json

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "ic_shopping_cart_24.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "ic_shopping_cart_24@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "ic_shopping_cart_24@3x.png",
      "scale" : "3x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Android

Will update soon.

4. Send Pull Request to iOS/Android repository.