$30 off During Our Annual Pro Sale. View Details »

How I develop a Sketch Native Plugin

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

griffin-stewie

February 15, 2019
Tweet

More Decks by griffin-stewie

Other Decks in Technology

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