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.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
PaintCode Sketch Plugin Tutorial
25 mins
- Getting Started
- Preparing the Sketch File
- Prep the icon
- Prep the color palette
- Using the Plugin to Generate Swift Code
- Working with the Objective-Tea Starter Project
- Import the StyleKit File to Xcode
- Working with Colors
- Set the tab bar color
- Set the flavor colors
- Canvas Drawings
- Create a custom view
- Canvas Images
- Set the map marker icon
- Set the tab bar icon
- Using different image sizes
- Draw the image based on beverage size
- Wire up the segmented control
- Changing the tea color at runtime
- Pass in a parameter to change the color
- Wire up the custom view
- Wire up the collection view
- Hold the bubbles
- Pass in a parameter to change the color
- Wire up the custom view
- Wire up the switch
- Where To Go From Here?
Wire up the switch
All that’s left is to wire up the UISwitch
in the order form.
Open OrderViewController.swift and replace the toggleBubbles
@IBAction method with the following:
@IBAction func toggleBubbles(sender: UISwitch) {
bubbleTeaCup.bubbles = sender.on
}
This updates the bubbles
flag whenever the UISwitch
is toggled.
Build and run. Now when you toggle the switch, the bubbles in the order preview image should disappear.
Pretty cool! Play around a bit and think back on all you’ve accomplished:
- You’ve taken a cool illustration designed in Sketch…
- …used the new PaintCode Sketch plugin to auto-generate Core Graphics code for that illustration…
- …which results in smaller binary size, scalability, and the ability to dynamically customize the image at runtime!
Where To Go From Here?
You can download the final project which includes the Xcode project and Sketch file here.
To learn more about the PaintCode plugin, check out the tutorials on the official site.
If you need to dig deeper into Core Graphics, this tutorial is a good place to start. And if you don’t use Sketch but still like what the PaintCode plugin can do, consider whether PaintCode 2 is right for you.
We hope you enjoyed this tutorial, and if you have any questions or comments, please join the discussion below!