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
   

   View Slide

2. Fenrir Inc.
   @griffin-stewie
   

   View Slide

3. SymbolNameAutocomplete
   

   View Slide

4. Motive
   

   View Slide

5. Help Designer’s Task
   • Naming Convention
   • Make design work faster
   • Easy to develop
   • We all happy
   

   View Slide

6. Sketch Plugin Basics
   

   View Slide

7. 3 ways to develop
   • JavaScript based Public APIs
   • CocoaScript (almost JS) Undocumented APIs
   • Objective-C Undocumented APIs
   

   View Slide

8. How Sketch executes plugin
   • Plugin Menus
   • Shortcut keys
   • Action APIs
   

   View Slide

9. What I wanna do
   

   View Slide

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)
    

    View Slide

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
    

    View Slide

12. View Slide

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
    

    View Slide

14. How to get Symbols
    const doc = context.actionContext.document;
    const docData = doc.documentData();
    const allMasterSymbols = docData.allSymbols();
    

    View Slide

15. How to hook TextField
    • Search `symbol` or `create` in class-dumped Headers
    • Found a class named `MSCreateSymbolNamingSheet`
    • It has a `symbolNameField` property
    

    View Slide

16. But how I can get this instance?
    

    View Slide

17. Way to get instance
    • Find method which returns it and Use Method Swizzling
    • Find Notification
    • Find Cocoa way
    

    View Slide

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
    

    View Slide

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`
    

    View Slide

20. View Slide

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
    

    View Slide

22. Finally I could get a instance!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide