Boost your App Dev using Sketch

Talked at Mobile Act NAGOYA #9
https://mobileact.connpass.com/event/77509/

Transcript

1. Boost your App Dev using
   Sketch
   @griffin_stewie
   

   View Slide

2. @griffin_stewie
   from Osaka
   

   View Slide

3. View Slide

4. Have you tried?
   

   View Slide

5. Trigger
   • To make efficient collaboration between
   Engineers and Designers.
   • Less mistakes (human errors)
   • To systemize
   

   View Slide

6. What’s going on?
   

   View Slide

7. Sketch Plugin
   • Bundle
   • It includes codes and manifest.json
   

   View Slide

8. manifest.json
   • Describes plugin details
   • Information about plugin
   • Menu contents
   • Action triggers
   

   View Slide

9. Code
   • CocoaScript
   • Looks like a JavaScript, but you can call
   Cocoa’s API
   • You can use Obj-C style 

   `[[NSArray alloc] init]`
   

   View Slide

10. Code
    • You can use Transcompiler
    • JavaScript ES6
    • Coffee Script
    

    View Slide

11. Framework
    • You can use your Framework
    • You can write most part of plugin useing Obj-
    C
    • Use CocoaScript to load your framework as
    entry point
    • I don’t recommend Swift, suite Dynamic Lang
    

    View Slide

12. Recommends
    • “skpm” helps us to scaffold contents
    • Sketch gives us `Run Script…` feature, it is
    like a PlayGround
    

    View Slide

13. Easy to do / Hard to do
    

    View Slide

14. Easy to do
    • Simply run from Menu
    • Without Input UI
    • Just write manifest.json
    • Supported by Public API
    • Easily imagine how it work on https://
    github.com/abynim/Sketch-Headers
    

    View Slide

15. ΍Δͷ͕େมͳ͜ͱ
    • GUI ͕ඞཁͳ΋ͷ
    • Craft ϓϥάΠϯ͕ఏڙ͍ͯ͠ΔΠϯεϖΫλ
    ͷԣͷॎπʔϧόʔΈ͍ͨͳͷͱ͔
    • طଘ UI ʹհೖ͢Δ΋ͷ
    

    View Slide

16. What I learned
    

    View Slide

17. What I learned
    • Can’t read references without how to use
    Sketch
    • Common pattern
    • Easy to develop plugins if I could imagine how
    it works
    

    View Slide

18. Wrap up
    

    View Slide

19. Wrap up
    • Little bit wired
    • Like a hacking
    • Hacking is fun
    

    View Slide

20. Wanted!
    • Story about how collaborate Engineer and
    Designer
    • Useful Sketch Plugins
    

    View Slide

21. Links
    • Sketch Developer — Extending Sketch
    • http://developer.sketchapp.com/
    • Sketch Developers
    • A discussion area for developers working with
    the Sketch Platform
    • http://sketchplugins.com/
    

    View Slide