KalyanChakravarthy.net

Thoughts, stories and ideas.

Sketch Plugin to resize iOS app icon to all resolutions

Most common use-case of designing an iOS App Icon, simply involves designing the main [email protected] and then resizing it to all other resolutions. Since the default template does not come with a smart symbol available across all artboards, you have to create one and copy it over and resize it manually.

Since I am too lazy to do it, I wrote a sketch plugin in javascript.

Steps:

  1. Open Sketch
    • Create New From Template
    • iOS App Icon
  2. Design in [email protected] Artboard
  3. Make sure all design happens inside one single layer group in the art board.
  4. Open Plugins menu option and select Custom Plugin
  5. Copy Paste code from below
  6. Run & Profit!

Code:

:::javascript
var resizeToAllCanvases = function(context) {

    // Current board
    var artboards = context.document.artboards();
    var mainBoard;

    for( i=0; i<artboards.count(); i++) {
        if( artboards[i].name().containsString("iTunesArtwork") )
            mainBoard = artboards[i];
    }

    var mainShape = mainBoard.layers().firstObject();
    var mainName= mainBoard.name();

    // Go through all the art boards
    // and copy the layer group
    for( i=0; i<artboards.count(); i++) {
        if( artboards[i].name() != mainBoard.name() )  {
            var targetBoard = artboards[i]

            // Resize
            mainRect = mainShape.rect()
            mainSize = mainRect.size;
            newRect = CGRectZero;
            newRect.size = targetBoard.rect().size;
            newSize = newRect.size;

            // Copy the Layer item
            mainShapeCopy = mainShape.copy()
            mainShapeCopy.frame().width = newSize.width;
            mainShapeCopy.frame().height = newSize.height;

            // Clear out the art board and paste layer
            targetBoard.layers().removeAllObjects()
            targetBoard.layers().addObject( mainShapeCopy )
        }
    }
};

resizeToAllCanvases(context);