Improve your workflow with Sketch plugin

Transcript

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

   2017 Aftershow@CyberAgent

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

3. Do you communicate with your teammate appropriately?

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

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

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

7. Can we solve these problems using Sketch plugins?

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

9. InVision Craft

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…

11. InVision Craft

12. InVision Craft

13. Fluid for Sketch

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

15. Fluid for Sketch

16. How to find Sketch Plugin ɾYou can find Sketch plugin

    in Sketch web site, or also find in GitHub.

17. How to manage Sketch Plugin ɾIt it good way to

    use Sketch Toolbox(It is plugin manager like Alcatraz).

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.

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