Improve your workflow with Sketch plugin

by Kohei Tabata

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

$ 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 workﬂow. Said Studio LLC Kohei Tabata Next! Remote quick-zip plus

Slide 3

Slide 3 text

Do you communicate with your teammate appropriately?

Slide 4

Slide 4 text

Communication is difﬁcult. PM(Project Manager) PO(Product Owner) Designer iOS developer

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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 conﬁrm layout for each device sizes, font, color and so on) If communication is too much ɹɾDesigner may be exhausted to conﬁrm implementation and other tasks

Slide 7

Slide 7 text

Can we solve these problems using Sketch plugins?

Slide 8

Slide 8 text

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 ﬁnd Sketch Plugin ɹɾHow to manage Sketch Plugin ɾSummary

Slide 9

Slide 9 text

InVision Craft

Slide 10

Slide 10 text

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 ﬁle 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…

Slide 11

Slide 11 text

InVision Craft

Slide 12

Slide 12 text

InVision Craft

Slide 13

Slide 13 text

Fluid for Sketch

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Fluid for Sketch

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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 ﬁnd best practices for managing fonts and colors, so I have to ɹcontinue to struggle with these things.

Slide 19

Slide 19 text

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