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

Boost your App Dev using Sketch

Boost your App Dev using Sketch

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

griffin-stewie

February 16, 2018
Tweet

More Decks by griffin-stewie

Other Decks in Technology

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