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. $ 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
  2. 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
  3. 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
  4. 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
  5. 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…
  6. 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
  7. How to find Sketch Plugin ɾYou can find Sketch plugin

    in Sketch web site, or also find in GitHub.
  8. How to manage Sketch Plugin ɾIt it good way to

    use Sketch Toolbox(It is plugin manager like Alcatraz).
  9. 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.
  10. 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/)