large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="http://ift.tt/2oKTZIA">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div>
<p>Sketch Plugins and iOS UX Engineer. Opensource projects contributor, share on Twitter. @jamztang</p>
<p>Apr 25</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="http://ift.tt/2p3cafh" alt="1*eSRR5AET8iun5s8mWerVdw.jpeg"></div>
</div>
</div>
<div>
<p>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.</p>
<p>Because of that, I previously covered <a href="http://ift.tt/2jYuvG1">essentials on how we can get started</a>. 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.</p>
<p>For this sake, I created this <a href="http://ift.tt/2p38bzr">Xcode template</a> for you, so that you can get ready on the most important thing to build as easy as possible.</p>
<h3>Install The Xcode Templates</h3>
<p>In Terminal, enter this command to install the templates to your Xcode user library folder.</p>
<pre>git clone <a href="http://ift.tt/2oIH4Gj">http://ift.tt/2oIH4Gj</a> ~/Library/Developer/Xcode/Templates/Sketch\ Plugin</pre>
<h4>Compiling Your First Sketch Plugin</h4>
<p>1. Xcode &gt; New Project &gt; Choose the <strong>Sketch Plugin Bundle</strong> Template, you should see a few new templates ready.</p>
<div>
<div><img src="http://ift.tt/2p39tup" alt="1*7P7F1AMsHKytPCMBUU_HYA.png"></div>
</div>
<p>2. Give it a great name, save to a safe place</p>
<div>
<div><img src="http://ift.tt/2oIxUtx" alt="1*J7QLvU7DWOrYdPdVstIw2Q.png"></div>
</div>
<div>
<div><img src="http://ift.tt/2p3cbjl" alt="1*IGrWLYbOjzlS3tTsayL2mw.png"></div>
</div>
<p>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 <code>~/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins</code></p>
<p>3. Lastly, configure the <em>Executable</em> so that it works with your debugger.</p>
<div>
<div><img src="http://ift.tt/2oIw9MQ" alt="1*7YPVr3G6cfNjBjbqU2CIPw.gif"></div>
</div>
<p>4. Finally, double check the onRun and onSelection method gets called 🙂</p>
<div>
<div><img src="http://ift.tt/2p36DoQ" alt="1*cgonmvXmJcQppdSeskHIbQ.gif"></div>
</div>
<h3>Adding Controls To Your Sketch Inpector Panel</h3>
<div>
<div><img src="http://ift.tt/2oID3Sa" alt="1*EU4Hikt9dtQCwJq-Bz8uWA.png"></div>
</div>
<p>The framework default panel simply shows what you have selected</p>
<ol>
<li>Add the Framework Target</li>
</ol>
<div>
<div><img src="http://ift.tt/2p33Ps7" alt="1*gFYaX9DomVuGrZ_mkqNONw.gif"></div>
</div>
<p>2. Set target membership of Mocha/CocoaScript.framework to Optional</p>
<div>
<div><img src="http://ift.tt/2oID0Wu" alt="1*ON3lLaiXpcHbYj2KX281mQ.gif"></div>
</div>
<p>3. Add Target Dependancy in Your Plugin Bundle</p>
<div>
<div><img src="http://ift.tt/2p2Qi3Q" alt="1*QdzsonQUglC0MKKDwtPmIQ.gif"></div>
</div>
<p>4. Update your manifest, instructions are generated in your framework.js file</p>
<div>
<div><img src="http://ift.tt/2oIxOSE" alt="1*dPuFdSxmcNRkOd2O41T-nQ.gif"></div>
</div>
<p>5. Test it out!</p>
<div>
<div><img src="http://ift.tt/2p39azw" alt="1*JlUg2K_eTKqLceiw3NuC-g.gif"></div>
</div>
<h3>Customize Your Panel UI</h3>
<div>
<div><img src="http://ift.tt/2oIv47N" alt="1*ntaJDEqN42uV-BIDB3xjIg.png"></div>
</div>
<p>Files in the ? Red group are libraries, you should not change unless you know what you’re doing.</p>
<p>Files in the ? Blue group are supposed to be edited and customised.</p>
<p>You should always almost start with the <strong>SketchPanelController.m</strong> file.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<p>Sketch Panel UI framework works like how UITableView works in iOS.</p>
<h4>For Reference:</h4>
<ol>
<li>SketchPanelDataSource = UITableViewDataSource (for reference)</li>
<li>SketchPanel = UITableView (do not edit this, unless you know)</li>
<li>SketchPanelCell = UITableViewCell (do not edit this, but subclass this, i.e. SketchPanelCellDefault, SketchPanelCellHeader)</li>
</ol>
<h4>For You To Edit:</h4>
<ol>
<li>SketchPanelController = UITableViewController (edit this, or subclass this)</li>
<li>SketchPanelCellDefault, SketchPanelCellHeader (customize this anything you like)</li>
<li>SketchPanelCell*.xib are the interface files (change it whatever you like).</li>
</ol>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<h3>Things To Consider</h3>
<p>By using <strong>Sketch Panel UI Framework</strong>, you have injected your code directly into the Sketch runtime, so<strong> if your UI crash, Sketch crash</strong>. So, make as a best practice, try create another background helper (e.g. XPC service) to communicate with your UI to maximise error tolerance.</p>
<p>Again, there’re more usage <a href="http://ift.tt/2p38bzr">info in the repository</a>, and please feel free to submit bug reports and contributions.</p>
<p>There’re a number of links that I referred when creating Xcode templates:</p>
<p>Hit Recommend ? to build a better world for Sketch designers and developers 🙂</p>
</div>
</div>
</div>
</div>
<div><a href="http://ift.tt/2oKTZIA">http://ift.tt/2oKTZIA</a></div>


Sketch Plugin Xcode Template How You Can Build Native Inspector Panel UI like Magic Mirror 3

Sketch Plugin Xcode Template How You Can Build Native Inspector Panel UI like Magic Mirror 3

Top Stories