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

Improve your workflow with Sketch plugin

Improve your workflow with Sketch plugin

Kohei Tabata

March 07, 2017
Tweet

More Decks by Kohei Tabata

Other Decks in Programming

Transcript

  1. Improve your workflow
    with Sketch plugin
    2017/03/07
    try! Swift Tokyo 2017 Aftershow@CyberAgent

    View full-size slide

  2. $ whoami
    ɾKohei Tabata(@nerd0geek1)
    ɾSaib Studio LLC
    ɾiOS/MacOS/tvOS app Developer
    ɾI organize a small fastlane meetup in Tokyo.
    ɾI’m interested in creating Sketch Plugin.
    ɾI’m interested in improving workflow.
    Said Studio LLC Kohei Tabata
    Next! Remote quick-zip plus

    View full-size slide

  3. Do you communicate
    with your teammate
    appropriately?

    View full-size slide

  4. Communication is difficult.
    PM(Project Manager)
    PO(Product Owner) Designer
    iOS developer

    View full-size slide

  5. PM/PO㲗Designer
    If communication is too little
    ɹɾDesigner may create a design which doesn’t consider PM/PO intention
    ɹɾPM/PO may notice that gap after iOS developer finish its implementation
    If communication is too much
    ɹɾDesigner may be exhausted to make prototype to make confirm specification
    ɹɾPM/PO may become bottleneck of that project

    View full-size slide

  6. Designer㲗iOS developer
    If communication is too little
    ɹɾiOS developer may implement View which doesn’t consider designer intention
    ɹɾDesigner/iOS developer can’t concentrate deeply during View implementation
    ɹɹ(iOS developer have to confirm layout for each device sizes, font, color and so on)
    If communication is too much
    ɹɾDesigner may be exhausted to confirm implementation and other tasks

    View full-size slide

  7. Can we solve these problems
    using Sketch plugins?

    View full-size slide

  8. Agenda
    ɾTypical Communication problems in project
    ɹɾCommunication problems between PM/PO and designer
    ɹɹɹˠInVision Craft
    ɹɾCommunication problems between designer and iOS developer
    ɹɹHow to adjust layout for each device sizes?
    ɹɹɹˠFluid for Sketch
    ɹɾHow to find Sketch Plugin
    ɹɾHow to manage Sketch Plugin
    ɾSummary

    View full-size slide

  9. InVision Craft

    View full-size slide

  10. InVision Craft
    ɾCraft is a suite of plugins by InVision.
    ɾThey provide several features to accelerate making prototype or design.
    ɹɾsync screen design on Sketch file to Invision project(sync)
    ɹɾGet a dummy data to make screen design from template/web/json
    ɹɹ and apply it(data).
    ɹɾManage color, font family and generate style guide(Library)
    ɹɾetc…

    View full-size slide

  11. InVision Craft

    View full-size slide

  12. InVision Craft

    View full-size slide

  13. Fluid for Sketch

    View full-size slide

  14. Fluid for Sketch
    ɾFluid for Sketch is a plugin to make enable AutoLayout on Sketch file.
    ɾYou can also define constraints with another plugins, but with this plugin,
    ɹyou can add constraints between two sibling elements.
    AnimaApp/Auto-Layout

    View full-size slide

  15. Fluid for Sketch

    View full-size slide

  16. How to find Sketch Plugin
    ɾYou can find Sketch plugin in Sketch web site, or also find in GitHub.

    View full-size slide

  17. How to manage Sketch Plugin
    ɾIt it good way to use Sketch Toolbox(It is plugin manager like Alcatraz).

    View full-size slide

  18. Summary
    ɾWe have to collaborate/communicate with teammate on our project.
    ɾWe can accelerate development cycle and save time by using these tools.
    ɾIn my opinion, InVision Craft is a good tool for accelerate prototyping,
    ɹand Fluid for Sketch is good way to share how to layout components.
    ɾI can’t find best practices for managing fonts and colors, so I have to
    ɹcontinue to struggle with these things.

    View full-size slide

  19. Reference
    ɾCraft by InVision
    ɹ(https://www.invisionapp.com/craft)
    ɾFluid for Sketch
    ɹ(https://github.com/matt-curtis/Fluid-for-Sketch)
    ɾSketch Plugin
    ɹ(https://www.sketchapp.com/extensions/plugins/)
    ɾsketchplugins/plugin-directory
    ɹ(https://github.com/sketchplugins/plugin-directory)
    ɾSketch Toolbox
    ɹ(http://sketchtoolbox.com/)

    View full-size slide