Image for post
Image for post

Sketch Workflow

Design Hand-Off Tools in Comparison: Zeplin, InVision, Avocode and Sketch Measure

Christine Vallaure
Jan 17, 2019 · 5 min read
Image for post
Image for post
Quick Comparison Overview

1. Zeplin

official Zeplin demo

Pros

  • Automated style guide generation, including text styles (yeyyy)
  • Component overview that can be organized into sections
  • Upload directly from Sketch (plug-in)
  • Team collaboration and commenting
  • Organize screens with tags, very useful for larger projects or mixing different screen sizes
  • Allows PNG download of single screens, very handy for presentations
  • Very good code snippets (e.g. class names = layer names)
  • Nice web preview which can also be used as pixel overlay (if you still believe in pixel perfect design…)
  • Grid overlay
  • Great extensions and very active community

Cons

  • No prototyping. In my opinion it’s a good thing to concentrate only on the handover with one tool and build a prototype in another. But it depends on your project and your workflow

Cost

Free of charge for one project! Then 17$ to 122$ per month, depending on the number of projects you need.

Use if:

You are looking for a very solid technical handover tool and would like to include a style guide. Perfect for small and large projects alike.


2. InVision (Inspect Mode)

official InVision demo

Pros

  • Includes prototyping for presentation and testing
  • Ideal for mobile mockups due to the available mobile app
  • Nice mobile preview also on the desktop (if project is set to “mobile”)
  • Upload directly from Sketch (plug-in)
  • Team collaboration and commenting
  • Also a great live chat for remote teams
  • Check out InVision Studio and Design System Manager for exciting new tools
  • Grid overlay

Cons

  • The overview page is is a bit messy and does not allow proper organization of screens
  • Using the same project for prototyping and technical specifications can be practical, but it also tends to get messy. Besides, do you really always update both at the same time?
  • Generally better for preview, discussion and mockups than for technical hand-off. Especially for larger projects
  • Confuses by trying to be an universal-all-in-one-super-duper-everything gadget

Cost

Free of charge for one project!! Then 15$ to 99$ per month, depending on the number of projects you need

Use if:

You are looking for a great tool to quickly and efficiently present, test and discuss your designs with other team members. A tool I wouldn’t want to miss during the design (!!) process. Also suitable for the technical handover of smaller projects for a one-stop solution


3. Sketch Measure

Image for post
Image for post

Pros

  • Instead of using an online platform, Sketch Measure creates a separate HTML file with all design details, including assets, distances, and CSS styles
  • Creates a separate folder with all assets and preview pngs at the same time as the specs. Very handy, because anyone who has access to the server can use icons and images for presentations hassle-free
  • Specs can be viewed online and offline and stored on the server along with all other files
  • Toolbar inside Sketch, with which you can quickly mark distances “the old fashioned way” in your design file. I find it super handy to simply describe something in detail or to define a general rule, e.g. for symbols or distances. Of course always alongside proper specs
  • No additional tools or logins are required. I love it!
  • The ability to create a new file for new features and split projects helps to avoid getting lost on many screens of an online platform
  • Grid overlay
  • Keeping things simple

Cons

  • No team collaboration and commenting
  • No integrated style guide (except colors)
  • The overview page is is a bit messy and does not allow proper organization of screens

Cost

Absolutely FREE!!!!

Use if:

You’re a little tired of thousands of logins and fancy features that nobody really uses. So if you think less is more and you just want to hand over a file and well-structured assets, this is the tool for you. Oh, and it’s free!


4. Avocode

official Advocode demo

Pros

  • Developers can export assets from any layer in any format. Really great feature because it eliminates the need to set up assets. Note, however, that your file structure and naming must be super neat for this to work well!
  • Project subfolders, really nice to keep your work tidy!
  • Very good overview page with search box. Useful if you have a lot of screens and icons
  • Separate tab and nice overview for icons
  • Upload directly from Sketch (plug-in)
  • Commenting and team collaboration features
  • Sketch file download available, very handy
  • Great web preview available
  • Pixel-Checker (if you believe in pixel-precise design….)
  • Fantastic clean and functional user interface design

Cons

  • The file structure must be absolutely tidy for the asset export to work well
  • No free project plans available
  • Limited guest users for projects

Cost

14 days free trial then 14$ p/m for one user up to 90$ p/m for teams.

Use if

You’re very neat with your files, then it’s a real joy to hand over. Definitely one of the best user interfaces and usability in the field. Worth discovering.


Conclusion

So as with most tools, it depends very much on your situation, your project and your team which hand-off tool you should use, as they all have their advantages and limitations. I hope this article gives you a good overview to discuss in your teams what works best for you.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Christine Vallaure

Written by

Berlin-based UX/UI Designer with a passion for code www.christinevallaure.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Christine Vallaure

Written by

Berlin-based UX/UI Designer with a passion for code www.christinevallaure.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store