Sketch Plugin Xcode Template

How You Can Build Native Inspector Panel UI like Magic Mirror 3

There is no standard way building Sketch plugins, not even to mention setting up a Xcode project for Sketch plugin development. Documentation on this sector is not readily available.

Because of that, I previously covered essentials on how we can get started. However, after having to follow it over and over myself, I realized it was nothing but pain lengthy manual process to setup all those configurations and dependancies. Most of us just needed a quick way to experiment some APIs or prove of an immediate concept.

For this sake, I created this Xcode template for you, so that you can get ready on the most important thing to build as easy as possible.

Install The Xcode Templates

In Terminal, enter this command to install the templates to your Xcode user library folder.

git clone https://github.com/MagicSketch/XcodeTemplate-SketchPlugin.git ~/Library/Developer/Xcode/Templates/Sketch\ Plugin

Compiling Your First Sketch Plugin

1. Xcode > New Project > Choose the Sketch Plugin Bundle Template, you should see a few new templates ready.

2. Give it a great name, save to a safe place

At this point, necessary manifest and script files are already setup for you. When you build it, it also gets installed to your Sketch plugins folder in ~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins

3. Lastly, configure the Executable so that it works with your debugger.

4. Finally, double check the onRun and onSelection method gets called :)

Adding Controls To Your Sketch Inpector Panel

The framework default panel simply shows what you have selected

1. Add a target using Sketch Panel UI Framework Template

2. Set target membership of Mocha/CocoaScript.framework to Optional

3. Add the framework as Dependancy and Copy Files Phase in main bundle.

4. Update your manifest, instructions are generated in your framework.js file

5. Test it out!

Customize Your Panel UI

Files in the 🔴 Red group are libraries, you should not change unless you know what you’re doing.

Files in the 🔵 Blue group are supposed to be edited and customised.

You should always almost start with the SketchPanelController.m file.

Sketch Panel UI framework works like how UITableView works in iOS.

For Reference (usually you don’t edit these files)

1. SketchPanelDataSource = UITableViewDataSource
2. SketchPanel = UITableView
3. SketchPanelCell = UITableViewCell (subclass this, see SketchPanelCellDefault, SketchPanelCellHeader)

For You To Edit:

1. SketchPanelController = UITableViewController (edit this, or subclass this)
2. SketchPanelCellDefault, SketchPanelCellHeader (customize this anything you like)
3. SketchPanelCell*.xib are the interface files (change it whatever you like).

Things To Consider

By using Sketch Panel UI Framework, you have injected your code directly into the Sketch runtime, so if your UI crash, Sketch crash. So, as a best practice, try create another background helper (e.g. XPC service) to communicate with your UI to maximise error tolerance.

Again, there’re more usage info in the repository, and please feel free to submit bug reports and contributions.

There’re a number of links that I referred when creating Xcode templates:

NSBoilerplate/Xcode-Project-Templates

How to add a build phase in a project template?

Hit Recommend 💚 to build a better world for Sketch designers and developers :)