How I develop a Sketch Native Plugin

My talk at Mobile Act OSAKA #8
https://mobileact.connpass.com/event/114158/

I talk about how I find a way to develop my plugin called "SymbolNameAutocomplete" Sketch Native Plugin using Sketch-Headers and official APIs and their open sources.

griffin-stewie/SymbolNameAutocomplete
https://github.com/griffin-stewie/SymbolNameAutocomplete

Transcript

1. How I develop Sketch Native Plugin @griffin-stewie
2. Fenrir Inc. @griffin-stewie
3. SymbolNameAutocomplete
4. Motive
5. Help Designer’s Task • Naming Convention • Make design work faster • Easy to develop • We all happy
6. Sketch Plugin Basics
7. 3 ways to develop • JavaScript based Public APIs • CocoaScript (almost JS) Undocumented APIs • Objective-C Undocumented APIs
8. How Sketch executes plugin • Plugin Menus • Shortcut keys • Action APIs
9. What I wanna do
10. What I wanna do • Show autocomplete list just like Safari.app’s address input • Show autocomplete list each hierarchy • Auto completes up to `/` if sub hierarchy exists • Support 2 types of how separate hierarchy `/` or ` / `(surrounded spaces)
11. What I need • Existing Symbol names • Hook every single input events from text field • Hook modal sheet presenting event for Creating Symbol • Present autocompletion words list • Present autocompleted text in a text field
13. Informations • abynim/Sketch-Headers: Headers from Sketch app exported using class-dump • https://github.com/abynim/Sketch-Headers • Sketch Developer — Action API • https://developer.sketchapp.com/guides/action-api/ • Sketch Developer — Actions Reference • https://developer.sketchapp.com/reference/action/ • BohemianCoding/SketchAPI: Javascript API for working with Sketch • https://github.com/BohemianCoding/SketchAPI
14. How to get Symbols const doc = context.actionContext.document; const docData = doc.documentData(); const allMasterSymbols = docData.allSymbols();
15. How to hook TextField • Search `symbol` or `create` in class-dumped Headers • Found a class named `MSCreateSymbolNamingSheet` • It has a `symbolNameField` property
16. But how I can get this instance?
17. Way to get instance • Find method which returns it and Use Method Swizzling • Find Notification • Find Cocoa way
18. Way to get instance • Modal Sheet is presented from a Window • NSWindow has `attachedSheet` property • But I need a best timing to access `attachedSheet` property
19. Action API helps me • Sketch has proper API `Action API` • Event driven just like NSNotification • `CreateSymbol` aciton (event) exists • It has `begin` and `finish`
21. • `attacheSheet` is instance of NSWindow • `MSCreateSymbolNamingSheet` is not window, it’s `NSWindowController` • NSWindow has a property to get its windowController Not easy as I expect
22. Finally I could get a instance!
23. How to present a list • @dy4_268 found a sample code to present a autocompletion list just like Safari • zeplin publish a plugin “zeplin/emoji-autocomplete-sketch-plugin” • Combine two samples
24. Conclusion • Sketch.app is developer friendly • It provides Public APIs and hackable way to develop a plugin • Fun to play around hack with Sketch • I hope you’ll love it
25. griffin-stewie/SymbolNameAutocomplete https://github.com/griffin-stewie/ SymbolNameAutocomplete