Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
Sketch Plugins and iOS UX Engineer. Opensource projects contributor, share on Twitter. @jamztang
Apr 25
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.
In Terminal, enter this command to install the templates to your Xcode user library folder.
git clone http://ift.tt/2oIH4Gj ~/Library/Developer/Xcode/Templates/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 🙂
The framework default panel simply shows what you have selected
2. Set target membership of Mocha/CocoaScript.framework to Optional
3. Add Target Dependancy in Your Plugin Bundle
4. Update your manifest, instructions are generated in your framework.js file
5. Test it out!
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.
By using Sketch Panel UI Framework, you have injected your code directly into the Sketch runtime, so if your UI crash, Sketch crash. So, make 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:
Hit Recommend ? to build a better world for Sketch designers and developers 🙂
AI-driven updates, curated by humans and hand-edited for the Prototypr community