Home | About | Apps | Github | Rss

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 iTunesArtwork@2x 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:

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);

More posts