PaintCode Sketch Plugin Tutorial

Recently, an issue came up on a map clustering library that I support. Someone asked how to change the size and color of custom map markers and clusters. After some Googling, this didn’t look like an easy fix. So I gave a cop out answer and said to just use hard-coded PNGs.

The next day, I found out about the new PaintCode Sketch plugin. This was just what I needed — it’s a plugin that automatically generates Swift code for your Sketch illustrations. I tried it out in my app and was making dynamically sized and colored map markers in no time!

The PaintCode Sketch plugin is great because it helps bridge the gap between design and implementation. Designers can now deliver icons as Swift code instead of littering Slack with PNGs. As a bonus, the PaintCode plugin exports colors as UIColor objects — no more stringly-typed hex values!

In this tutorial, you’ll get hands-on experience with the new PaintCode sketch plugin by exporting a Sketch illustration and using it in an app. You’ll learn how to dynamically size the image and modify its colors and other properties. Let’s dive in!

Getting Started

Here’s what you need to export Swift Core Graphics code from Sketch:

• A copy of Sketch.
• A copy of the PaintCode Sketch plugin.

Note you do not need a copy of PaintCode 2 to do this; the PaintCode Sketch plugin is an independent product that exports the Swift Core Graphics code for Sketch illustrations, without the need for PaintCode 2 itself.

Start by installing Sketch and the PaintCode Sketch plugin.

Then, download this Sketch starter file which you’ll use to generate Swift code. This tutorial does not require any Sketch skills, but check out this Sketch Tutorial for iOS Developers if you want to learn some basics.

Preparing the Sketch File

Open the starter Sketch file and take a look around. Inside the main canvas area, you’ll see an image of a bubble tea cup. Below the image, there’s a color palette with nine colored squares.

On the left, there’s a panel called the Layers List. Each layer has a name like liquid, bubbles, or Mango. PaintCode will convert these names to variables and comments. It’s important to use meaningful names, because this makes the generated code easier to read.

Prep the icon

Before you jump into using the PaintCode plugin, you need to do a little prep work. First, you’ll nest the bubble tea cup image inside an Artboard.

1. Hold down the Space key and drag the canvas to pan around until you see the image.
2. Click Insert\Artboard from the main menu (or use the shortcut key A).
3. Drag your mouse to create a rectangle around the image.
4. In the Layers List, rename the Artboard to BubbleTeaCup.
5. To center the image within the Artboard, select the blue folder icon and drag the image until it snaps to the red line guides.

By organizing layers inside an Artboard, you’re letting PaintCode know that you want to treat them as a single image. So if you have multiple icons, you should place each one inside its own Artboard.

Prep the color palette

Besides images, you can also make a color palette. Just create an Artboard named Library and drop in some shapes with different colors.

1. Type the A key to use the Artboard tool.
2. Drag your mouse to enclose all the colored squares.
3. In the Layers List, rename the Artboard to Library.

PaintCode converts each of these shapes into an UIColor object, using the layer name and fill color. The type of shape doesn’t matter. PaintCode ignores the border color and width as well.

• Gradient: Inside the Fill picker, choose Linear Gradient to produce a CGGradient.
• Shadow: Click the plus sign + next to Shadows to produce an NSShadow. Just make sure you de-select the Fill checkbox so that PaintCode knows your intentions.

Using the Plugin to Generate Swift Code

Now that your layers are properly named and organized into Artboards, it’s time to generate some Swift code. From the Plugins menu, select PaintCode.

Sketch will drop down a plugin sheet with different options.

• PaintCode Plugin: Register a license key or purchase one on the website.
• Choose Drawings: Select which items you wish to export as code.
• Platform & Language: Choose between Swift and Objective-C.
• Settings: Add project meta data to populate the comment block at the top of the generated Swift file. Note that the Class Name defaults to StyleKit.
• Change Code Settings…: Configure code formatting options, like indent using 2 spaces.
• Get Code Files: Export the file to the Desktop, or drag the Swift file icon to a Finder window.

For now, make sure Library and BubbleTeaCup are checked; otherwise, leave the options as their defaults. Then select Export, and PaintCode will save a file named StyleKit.swift to the Desktop.

Working with the Objective-Tea Starter Project

All of the steps related to Sketch are behind you now. From here on out, it’s just Xcode, baby!

Download the starter project for this tutorial here. The zip file contains an Xcode project for a fake bubble tea app, Objective-Tea. In this tutorial, you’ll work on an order page where thirsty iOS developers can choose drinks of different flavors and sizes.

Launch the ObjectiveTea.xcodeproj file, then build and run. You should see a two tabs:

• Order: Customize your bubble tea order.
• Stores: This is a map with store locations.

Your job for the rest of this tutorial is to liven up the app with colors and dynamic images.