simple guide

The simple guide to getting user input for your Sketch plugin – Part I

The simple guide to getting user input for your Sketch plugin – Part I

 

When we worked on our Sketch plugin confetti, I realized how difficult it was to find good documentation to help us build something basic as a dialog box for the plugin. The lack of documentation seemed more difficult when I was constructing a dialog window. The idea was to create a dialog box with plugin options that are displayed when the user has executed the plugin. However, I wasted a lot of time to figure out how I could create the dialog box I had in mind. I had to dig into the code for another Sketch plug-in to get a basic idea of how the dialogs work in the sketch. If you read this, you’re probably in the same position as I was when I spent hours online looking for a way to create sketch dialog windows. But he’s lucky, his fight ends here.
I have documented my findings and simplified the process of creating a dialog box for your Sketch plugin. As this article has proved to be quite long, we decided to split it into 2 parts. Enjoy Part 1 and stay tuned to Part 2 in the near future.
Index
The developer dialog box
Javascript
Cocoascript
AppKit apple frame
Simple dialog window
View Post
information
Advanced dialog
Configuration dialog
Elements (labels, text boxes, images …) in the dialog box
Create tags
Creating Entries
– Enter text
– Navigation menu
– Checkbox
– Option Button
View the dialog box
… (part 2)
What we need
JavaScript
That’s right, it’s familiar face in the world of programming languages joined the party! You can use all your skills to create superb JavaScript plugins.
CocoaScript
Sketch CocoaScript defines as “a bridge that allows you to use the Objective-C / Cocoa code from an external script written in JavaScript. The bridge handles the translation between JavaScript and Cocoa.” By using CocoaScript, we can simply use JavaScript and access to Apple’s Cocoa framework, which opens up many possibilities.
AppKit
You can use AppKit Apple Frame to create a dialog window as desired. The possibilities are pretty unlimited. This can be a bit tricky trying to create a dialog box for your Sketch plugin when you are not familiar with AppKit (or even Cocoascript in general). However, no fear. A core competency, JavaScript is enough to create a fancy dialogue window when following this guide

About the author

scalasbeef

View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *