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

$ 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

Do you communicate with your teammate appropriately?

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

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

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

Can we solve these problems using Sketch plugins?

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

InVision Craft

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…

InVision Craft

InVision Craft

Fluid for Sketch

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

Fluid for Sketch

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

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

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.

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/)