Skip to content
Make icon slicing simple for app developers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets 搭建模板 Nov 11, 2019
sketch-assets 搭建模板 Nov 11, 2019
src Support UILabel code generating Dec 10, 2019
.appcast.xml Update .appcast with new tag Dec 10, 2019
.eslintrc.json change: support batch slicing; Nov 22, 2019
.gitignore 搭建模板 Nov 11, 2019 Update Dec 6, 2019
package-lock.json Publish 2.2.4 release 🚀 Dec 10, 2019
package.json Publish 2.2.4 release 🚀 Dec 10, 2019
step1.png add snapshots Nov 16, 2019
step2.png add snapshots Nov 16, 2019



  • Find the latest release of the plugin in Release Page
  • Download and Un-zip
  • Double-click on sketch-flow.sketchplugin


  1. Name your artboard to subject, and name your icon a icon
  2. Select icon layer, and use command "Slice for iOS" or "ctrl shift s"
  3. If it is your first time to use this plugin, you need to input the path of your iOS project Assets.xcassets, for example. /Users/hite/workspace/xxx/Assets.xcassets/ without ~ in path.
  4. If everything is ok, the 2x3x png files will sit under Assets.xcassets directory with sub directory if it has.slice icon done
  5. String subject_subject_ico_post_bg is copied into Pasteboard for you paste it into iOS source codes.
  6. Repeat for another icon.

Development Guide

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.


Install the dependencies

npm install

Once the installation is done, you can run some commands inside the project folder:

npm run build

To watch for changes:

npm run watch

Additionally, if you wish to run the plugin every time it is built:

npm run start

Custom Configuration


To customize Babel, you have two options:

  • You may create a .babelrc file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a "presets" object, it will replace & reset all Babel presets that skpm defaults to.

  • If you'd like to modify or add to the existing Babel config, you must use a webpack.skpm.config.js file. Visit the Webpack section for more info.


To customize webpack create webpack.skpm.config.js file which exports function that will change webpack's config.

 * Function that mutates original webpack config.
 * Supports asynchronous changes when promise is returned.
 * @param {object} config - original webpack config.
 * @param {boolean} isPluginCommand - whether the config is for a plugin command or a resource
module.exports = function(config, isPluginCommand) {
  /** you can change config here **/


To view the output of your console.log, you have a few different options:

  • Use the sketch-dev-tools
  • Run skpm log in your Terminal, with the optional -f argument (skpm log -f) which causes skpm log to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input

Publishing your plugin

skpm publish <bump>

(where bump can be patch, minor or major)

skpm publish will create a new release on your GitHub repository and create an appcast file in order for Sketch users to be notified of the update.

You will need to specify a repository in the package.json:

+ "repository" : {
+   "type": "git",
+   "url": "git+"
+  }
You can’t perform that action at this time.