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:
- Designers make the mockups on Sketch
- They import the mockup on Zeplin or InVision along with the assets
- (They add comments for developers to explain specific behaviours)
- 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…
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:
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.
Designers can also export individual Sketch Symbols, which will then appear in the styleguide Components section.
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.
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.
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
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.
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
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.
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).
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 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.
You can find the list of downloadable assets in a specific section.
On InVision, you can see the downloadable assets in the group panel.
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)
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
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.
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
You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.