Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Help Designer’s Task • Naming Convention • Make design work

    faster • Easy to develop • We all happy
  2. 3 ways to develop • JavaScript based Public APIs •

    CocoaScript (almost JS) Undocumented APIs • Objective-C Undocumented APIs
  3. 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)
  4. 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
  5. 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
  6. How to get Symbols const doc = context.actionContext.document; const docData

    = doc.documentData(); const allMasterSymbols = docData.allSymbols();
  7. How to hook TextField • Search `symbol` or `create` in

    class-dumped Headers • Found a class named `MSCreateSymbolNamingSheet` • It has a `symbolNameField` property
  8. Way to get instance • Find method which returns it

    and Use Method Swizzling • Find Notification • Find Cocoa way
  9. 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
  10. Action API helps me • Sketch has proper API `Action

    API` • Event driven just like NSNotification • `CreateSymbol` aciton (event) exists • It has `begin` and `finish`
  11. • `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
  12. 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
  13. 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