[DevUx] Zeplin vs InVision? The best tool for design handoff

Zeplin vs InVision: I work for a service company as a lead developer and we have been using these tools on different projects for mockup integration. I teamed up with France Wang, lead designer at BAM, to list the pros and cons and give you our combined point of view on these design handoff tools.

To clarify the need we have on our projects and what we use these platforms for, here is our development workflow:

  1. Designers make the mockups on Sketch
  2. They import the mockup on Zeplin or InVision along with the assets
  3. (They add comments for developers to explain specific behaviours)
  4. Devs use the platform to inspect mockups and integrate them

Usually there are back-and forth between devs and designers during the mockup integration phase (4). Choosing the best tool helps limiting these wastes and frustrations. We focus on these goals for the benchmark. We’ll also share tips on how we use these tools for better collaboration.

Disclaimer: this content is not sponsored by either mentioned parties

And the best tool for mockup integration is…

Zeplin combined with sketch, best tool for mockup integration

After benchmarking the two solutions, our recommendation would be to use Zeplin, as it is more advanced and more convenient for design handoff.

If you have the budget (17$-26$/month) do not hesitate! The time you’ll save is worth it. The platform eases knowledge sharing between designers and developer. Consequently the production workflow will be faster and less painful. Happier collaboration yay \o/! #DevUx

If you need prototyping and do user testing, use InVision in addition. Designers can use the same Sketch file for both platforms. Separate tools for separate purposes!

Detailed Benchmark of Zeplin vs Invision

Here is a recap of the comparison we made:

Zeplin InVision

Zeplin’s Pros:

  • Killer features:
    • Automatically-generated styleguide linked to the mockups
    • Commenting tool
    • Pixel perfect comparison
  • Most complete tool for mockup integration

InVision’s Pros:

  • Interesting free plan (as many collaborators as you want)
  • More complete offer if you need prototyping
  • Will get the job done

Zeplin’s Cons:

  • Plans are more expensive and free plan less interesting if your want several collaborators

InVision’s Cons

  • Overall less efficient because the platform is multipurpose and the UX is not focused on mockup integration.

Killer feature: Semi-automatically generated styleguide

Why should you use a styleguide?

Using a styleguide helps us save time and limit rework. To both designers and developers, the styleguide defines a design reference (for both UI and UX).

For the designers, it helps with

  • keeping the product consistent
  • summarising all colors, font styles, components used throughout the app along as their states (idle, disabled, active, loading, success, error…) and variations (primary, secondary, icon only etc…)
  • explaining to the devs each component behaviour without having to repeat it on each mock up

For developers, it serves as

  • a reference of standard color codes, font sizes, font weights to use in the code
  • a library of components with the variations and states they can have
  • a compilation of components behaviour so as not to forget any cases

Styleguides on Zeplin vs Invision: why Zeplin wins

Zeplin integrates an interface to create a styleguide from imported mockups. The platform detects font properties and colors so the designers can add them to the styleguide easily.

Auto-generated styleguide in Zeplin

Designers can add colors to the styleguide in one click from the mockup and define a name for each

Designers can also export individual Sketch Symbols, which will then appear in the styleguide Components section.

Components styleguide on Zeplin

These components are reused by the designer on several mockups. You can see how the navigation looks like with 2 and 3 tabs.

Components and mockup are linked: on the styleguide, the developer can see which mockups use which components. Reciprocally, the developer can also see on each mockup which components are used and can click the link to see different component states.

Component link from a mockup in Zeplin

A link to the component styleguide from a mockup on Zeplin

Designers can also share their styleguide publicly to get visibility and reactions.

On InVision,  if you want a styleguide you will need to create one from scratch in Sketch. Consequently, there are no links between the styleguide and the mockups, so it is less maintainable (or takes too much time to maintain) and is less visible for the team.

Commenting the mockup to clarify integration

Comments are an essential feature to hand over extra informations not visible on the mockup or the inspector. They also allow to cover edge cases. Is it scrollable? Vertically centered? Is the size proportional? These pieces of information should be left by the designers for the developer to use on integration.

Comments feature on Zeplin

Comments on Zeplin are visible when the developer inspects elements

What makes it best on Zeplin is that comments are visible by default on the inspector’s page. On InVision they are on a separate page, and the users need to switch between modes. So they can forget they exist. What a pity :(

Comments on InVision

Comments on InVision are on a separate page as the Inspector

Small plus, Zeplin lets you to categorise your comments. However the links you attach are not always clickable (is it a bug?)

Another killer feature for pixel perfect integration

(Only on Mac) With Zeplin desktop app, you can generate a transparent overlay of the design to compare to the actual development. Of course if you don’t need this level of accuracy it’s just a wow feature 😉

This helps the dev checking that their integration matches exactly the mockup, for the desired screen sizes.

Zeplin feature to compare the mockup and the integration made by designer

Pop out the mockup in a transparent window and move it over your app to check for differences

Css properties inspection

This is a basic feature that both platforms allow, but here is what makes Zeplin slightly better:

  • The inspector’s panel is more condensed because null properties are hidden. So you can check properties more easily without having to scroll down
  • CSS has syntaxic coloration

Zeplin inspector

Zeplin inspector

InVision inspector

InVision inspector: opacity and left alignment are not useful to have here as these are default values

Padding/margin inspect

In this battle of Zeplin vs Invision, this is the only round where Zeplin looses!

Designers create groups of elements in Sketch to have blocks containing a label and its value for instance, or an input with its submit button – just like developers might build their app. Designers use these groups to place blocks on the mockup and build a screen.
We tried a little experiment on both platforms. The designer made a table with header and values on Sketch.

Sketch groups on InVision

Here is what you can see on InVision’s inspector tab

We uploaded the Sketch file on InVision. Above is what we could see in the inspector: we were able to select the ‘Group 5′ containing the invoice number and its value ’01_000001’. So by hovering the adjacent block, we could see the margin in between (48px).

Zeplin does not keep Sketch groups

Zeplin’s mockup inspection panel

Then we uploaded the same sketch file on Zeplin: the Sketch groups are not replicated on the inspector platform: you cannot select the container blocks, only the text elements. Therefore, devs cannot see spacing between blocks easily. They loose the designer’s previous reflection on block cutting and spacing. It’s too bad to have two people do the same work twice!

The downside of using groups on the other hand is that it makes small details inspection harder. By experience, InVision’s inspector cursor is less accurate because you hover the groups before the element. You need to zoom in for more accuracy.

Managing Assets

Managing assets is equivalent on both platforms. Once the designer has set the export options in Sketch, the developer can download it from the inspect page when inspecting an element.

Icon inspector on Zeplin

Zeplin vs Invision: on both, developers can pick the file format they want from the available list

You can find the list of downloadable assets in a specific section.

On InVision, you can see the downloadable assets in the group panel.

Icon inspection on Invision

Icon inspection on Invision: on the left panel you can see that the Icon/User is downloadable.

Prototyping

Why many choose InVision is because you can make clickable mockups to navigate from a screen to another. You can test the prototype with the targeted users. Very handy to get feedback before development starts!

The downside of using InVision both for prototyping and integration comes when several version of the same mockup conflict. This can occur when mockups include features under testing phase. It gets confusing for the developers.

Pricing (updated 27/11/18)

Zeplin

Free tier: 1 project, no collaboration

If you are a service company with several clients, your clients cannot create an account and invite you on their project, you’ll need to disconnect and connect to the same account.

Starter: 17$/mo 3 projects – unlimited collaborators
Growing business: 26$/mo – 17 projects – unlimited collaborators
Organization: from 122$/mo with only 16 collaborators, +7$/mo per extra collaborator

InVision

Free tier: 1 project – unlimited collaborators
Starter: 15$/mo – 3 prototypes
Growing business: 25$/mo – unlimited prototypes
Team: 99$/mo unlimited prototypes but only 5 members
Custom: on demand

To go further into benchmarking

Some other tools like Avocode would also need our attention, notably because of their powerful assets export feature. Framer’s new FramerX tool is also an important player we should pay attention too. Their Beta version is not collaborative yet like Invision or Zeplin, but their prototyping tool based on React components is promising.

We at Theodo are building our custom Sketch plugin in order to make it even faster to integrate a component.
With Overlay, we can export components from Sketch and get prod ready React/VueJs code.

Overlay overview

Generate React.js/Vue.js components with full design from Sketch files with Overlay plugin

Conclusion

All in all, these tools will increase your mockup integration process. Nonetheless, the difference lies in subtle details and better user experience. That’s what gives Zeplin the edge over InVision.

Having developers and designers working together is not easy. Indeed, each profile has their own stakes and think differently. We have a lot to learn from each other to deliver the best products. Integrating the right tool in our process will make the collaboration much smoother.

France and I have been working together to spread the DevUx culture (yes, DevOps is not the only one). This goes from understanding each other, defining mutual expectations and design collaboratively. More articles are coming!

Don’t hesitate to share your experience and tips using these tools and more generally on your mockup integration processes :)

Credits and Resources

Cover pic (more sumo battles there, thank you Tomoshi Shiiba for your art work)
Zeplin/Sketch gif (from an article on how The Create Labs implemented Sketch & Zeplin in their workflow)


You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.

Join Us