Today, with tools like Zeplin, Avocode & InVision Inspect, a designer should not be allowed to waste any time redlining their designs with specs, measurements, and style guides.
According to the above survey done by uxtools.co Zeplin and InVsion are the most commonly used tools in the industry. Hence, I decided to compare the two to see which one gives the best process flow for handing off specs.
Zeplin is an independent desktop app (requiring a free account) that allows simple exporting/sharing designs from Sketch, Photoshop, AdobeXd, and/or Figma. Designers will need the desktop app to upload designs, but developers can access everything they need via the Zeplin web app. The Free plan lets your account to have 1 “active” project for free, without a trial period. The app also provides excellent tools for generating a style guide, exporting visual assets, and adding notes right on the designs. You can invite teammates to collaborate. After everyone has an account, sharing design specs is as simple as sending a link. All invited teammates will be able to view specs/code snippets, download assets, add notes and invite other teammates to the project. (Only the project owners can upload designs on the Free plan.) The Free plan is ideal for students and designers who are working on one project at a time.
While Zeplin’s export process is extremely easy and generates many baseline specs automatically, I personally prefer InVision Inspect for its ability to keep my design prototypes and final design specs all in one place. With Zeplin, archiving is only available to paid subscribers. With that said, if you are on a Free plan, you have to permanently delete your existing project to be able to upload a new one. While InVision’s Free plan gives project owners the option to archive their existing project for a new upload.
Furthermore, Inspect has a “Download All Assets” feature that gives developers the ability to pull down all icon and image files at one time instead of on a screen by screen basis. This feature ensures no files are missing, and it simplifies the struggle to consistently host and deliver images to each site page or app view. Therefore, InVision Inspect becomes a natural extension for my current workflow.
And oh...
When handing off your specs, don’t forget to communicate with your developers to find out how they prefer the screens to be delivered. In my case, I use the 8-point grid system considering almost all the existing screen sizes in the market are divisible by 8. Here is how to create a Responsive Grid in Sketch.
Looking forward…
In the near future, I expect the market will consolidate into a few fully-featured apps. Adding handoff capabilities into a prototyping app shouldn’t be an option, it’s a necessity. Once we bypass this phase of design innovation, I’m excited to see what comes next.
