PaintCode Sketch Plugin Tutorial

Learn how to use the new PaintCode Sketch plugin to export your Sketch artwork into Swift code, allowing easy resizing and dynamic customization. By Robert Chen.

Leave a rating/review
Save for later
Share

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!

Paint Code Sketch Swift Comic

Getting Started

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

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.

Note: Alternatively, if you’d prefer to skip exporting the code for the Sketch illustration and jump straight into using it in an app, you can skip to ahead to the Working with the Objective-Tea Starter Project section. I’ve used Sketch and the PaintCode Sketch plugin to export the Sketch illustration to Swift code, and have the pre-generated Swift file waiting for you.

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.

Sketch layer names

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.

Create an Artboard around the bubble tea cup

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.

Create a Library Artboard

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.

RC-gradientShadow

  • 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.
Pro tip: The Library also supports gradients and shadows too. Just create a shape using one of these properties from the right inspector panel:

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.

Select PaintCode from the plugin menu

Sketch will drop down a plugin sheet with different options.

Paint code options sheet

  • 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.

RC-ObjectiveTeaLogos

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.

Starter project screens

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

Note: If you jumped straight to this section, download this zip file and move the StyleKit.swift file to your Desktop.
Robert Chen

Contributors

Robert Chen

Author

Over 300 content creators. Join our team.