Slide 1
Slide 1 text
How I develop
Sketch Native Plugin
@griffin-stewie
Slide 2
Slide 2 text
Fenrir Inc.
@griffin-stewie
Slide 3
Slide 3 text
SymbolNameAutocomplete
Slide 4
Slide 4 text
Motive
Slide 5
Slide 5 text
Help Designer’s Task
• Naming Convention
• Make design work faster
• Easy to develop
• We all happy
Slide 6
Slide 6 text
Sketch Plugin Basics
Slide 7
Slide 7 text
3 ways to develop
• JavaScript based Public APIs
• CocoaScript (almost JS) Undocumented APIs
• Objective-C Undocumented APIs
Slide 8
Slide 8 text
How Sketch executes plugin
• Plugin Menus
• Shortcut keys
• Action APIs
Slide 9
Slide 9 text
What I wanna do
Slide 10
Slide 10 text
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)
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
How to get Symbols
const doc = context.actionContext.document;
const docData = doc.documentData();
const allMasterSymbols = docData.allSymbols();
Slide 15
Slide 15 text
How to hook TextField
• Search `symbol` or `create` in class-dumped Headers
• Found a class named `MSCreateSymbolNamingSheet`
• It has a `symbolNameField` property
Slide 16
Slide 16 text
But how I can get this instance?
Slide 17
Slide 17 text
Way to get instance
• Find method which returns it and Use Method Swizzling
• Find Notification
• Find Cocoa way
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Action API helps me
• Sketch has proper API `Action API`
• Event driven just like NSNotification
• `CreateSymbol` aciton (event) exists
• It has `begin` and `finish`
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
• `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
Slide 22
Slide 22 text
Finally I could get a instance!
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
griffin-stewie/SymbolNameAutocomplete
https://github.com/griffin-stewie/
SymbolNameAutocomplete