Invision To Zeplin

Posted : admin On 1/2/2022

Zeplin or InVision? Don’t know which one is right for your team? Check the differences, pros and cons of each in designing, prototyping, collaboration, plugins, integration and design system management, and make the right decision for your team.

Zeplin and InVision are prototyping tools used to enhance the user’s experience of a website or desktop application. To make it possible, one must choose a tool for prototyping, and for that, he should have complete knowledge of the features, drawbacks of each tool. With InVision's LiveShare tool, you can present designs to stakeholders, whiteboard with collaborators, and gather feedback via voice chat or comments. Get InVision Starter for free Just enter the name and email you used to buy Sketch to start your free year of the InVision Starter plan. Zeplin provides capabilities much needed by developers including clarity on “finalized” designs, an accessible design workspace friendly to non-designers, added structure to design screens and of course tailored technical specs built by developers for developers. InVision’s robust comments functionality should also pair well with Inspect, but teams will need to learn how to effectively organize comments around prototype iteration vs. Final executional specs. If you design on a PC or work for an agency with multiple clients, Zeplin is your best bet today.

When talking about website or mobile app design and collaboration, design tools like Zeplin and InVision often come in mind and have attracted numerous fans around the world.

But, this doesn’t mean that you can randomly select one of them for your team since they are both unique in their own ways. Zeplin focuses more on the design collaboration and handoff process while InVision connects your entire design workflow from prototyping to design handoff. They do have their own pros and cons. This makes the debate about Zeplin vs InVision keep on raging.

To help you choose the right one for your team, in this article, we’ll walk you through the differences between them in designing, prototyping, collaborating, handoff, plugins, integration, design system management and other aspects, and check their unique strengths and features together.

What Zeplin and InVision can do for you?

InVision is a digital product design platform that connects your entire design workflow from prototyping to design handoff. It consists of three smaller design parts as follows:

1).InVision Cloud

InVision Cloud allows you to design and collaborate apps, collect feedback and handoff with your team online with powerful tools like:

  • Freehand — sketch and wireframe projects with a whiteboard at the brainstorming stage.
  • Craft — a plugin to import designs and resources from Sketch or Photoshop, and get started in this online platform quickly.
  • Prototype — create website or mobile app prototypes with simple interactions and animations online based on your designs imported, share with your team and collect feedback.
  • Inspect — enable developers to inspect or download design specs, assets and code snippets for faster development.

2). InVision Studio

InVision Studio is a desktop design tool that can help you design, prototype and animate your projects from scratch. If the online Prototype tool above cannot bring all your details to life, InVision Studio would be a good alternative for your team to create a live website or mobile app prototype together.

3). InVision DSM

InVision DSM is the design system manager that can help you build and maintain design systems for brand consistency.

In short, InVision provides users with great design power and bring your entire design workflow into one platform.

Zeplin is a design tool that provides a full set of features to bridge the gap between designers and developers, such as the auto-generated design specs, assets and code snippets, easy-to-share projects, rich design tool integrations and powerful global style guides, etc.

It is a good design collaboration and handoff tool to help you hand over designs, measures, prototypes and other resources to developers.

Zeplin vs InVision, what’re the differences?

Designing & Prototyping

  • Zeplin — no designing and prototyping power

Zeplin doesn’t give any tool or mode for designers or product teams to design or prototype their projects from scratch. To start your design collaboration and handoff process quickly, you are supposed to first download and install its plugins for Sketch, Adobe XD, Figma and Photoshop, and import designs and assets from the widely-used design tools.

  • InVision —rich tools to design and prototype from brainstorming

InVision, firstly described as “a prototyping and collaboration tool for design teams” by designers and developers, provides powerful tools like Freehand, Prototype, and InVision Studio to help them visualize ideas from brainstorming, wireframing to prototyping.

Commonly-used project types, intelligent layouts, interactions and animations and more features give you and your team great power to create brilliant app designs from scratch.

Alt: InVision Supports Popular Project Types, Like iPhone, iPad, Web and Blank

Collaboration & Team Management

Both Zeplin and InVision allow your team to work on the same project, invite new members by emails and manage them with different roles and permissions.

  • Zeplin offers four different roles and permissions

You get four different roles and permissions to manage your team:

  • Admins — manage team members and process billing things.
  • Editors — create content, export designs and edit them
  • Developers — access or download design specs and assets
  • Reviewers — review designs and leave comments

Only the reviewers are free of charge and do not take up a paid seat.

  • InVision offers four different roles and permissions

There are also four different roles and permissions:

  • Owner — have full access to create, edit, and delete prototypes and invite members.
  • Members — have access to edit and inspect prototypes, edit screens, leave comments and other features. Different payment plans have different member seats.
  • Collaborators — have the same ability as team members but get no right to create or delete prototypes.
  • Share link viewers — the ones that receive a share and get abilities to view and interact with prototypes as well as leaving comments.

When trying to invite a new member, the owner can even choose to send the invitation message via SMS.

Commenting

Both Zeplin and InVision allows users to leave comments directly on designs and manage comments with ease. Also enter “@” to mention someone in your team and add cute emojis to better communicate with your team.

But, differently, Zeplin provides three comment statuses like Open, Mentioned and Resolved and allows you to group them by colors.

InVision provides two comment statuses like Open and Resolved, and allows you to manage your feedback in different types:

Developer Handoff

After finalizing your website or mobile app project, the next step is to hand over the final design version, prototypes, assets, specs and other design resources to developers. So your development team can start coding as soon as possible.

When it comes to this design handoff step, Zeplin wins over InVision.

  • Zeplin — download assets for different platforms in one click

Once your designs have been imported into Zeplin, all design specs, assets and style code snippets are auto-generated. Developers can easily click or hover on any layers to view the related measurements, color and text styles.

When inspecting the design specs, developers can aslo download desired assets or code snippets with simple clicks.

Assets in different pixel densities or tailored for different platforms (like iOS, Android and Web platforms) can be downloaded in one click. Several image formats like PNG and SVG are supported.

  • InVision — only download assets that have been manually added

InVision also allows you to import designs with its Craft plugin and the related design specs and code snippets are also automatically generated.

However, as with the design assets, they are only available for prototypes and you need to manually add it to your prototypes directly or using its Craft plugin.

When downloading, you are only allowed to download what has been added. No any related assets in different formats or for different devices and platforms will be auto-generated and downloaded.

Plugins

Both Zeplin and InVision offers users plugins to import designs and assets. But, the actual features vary:

Zeplin — offer plugins for Sketch, Photoshop, Figma and Adobe XD

Zeplin does not only offers plugins for famous design tools to import artboards, designs and assets. It also allows users to mark desired layers or images as assets, and offer three pixel density options like:

You can also choose to “Replace screens with the same name” or not before the export.

Note that you are highly recommended to download and install the desktop app of Zeplin if you need to delete or manage your designs and assets imported. The online platform is better to share design specs, assets and code snippets with developers.

InVision — offer plugins for Sketch and Photoshop only

InVision provides users with Sketch and Photoshop plugins only. These plugins tend to help users export designs and assets into InVision. There are no as many extra features as the plugins of Zeplin have.

Design System Management

Both Zeplin and InVision provides features for product teams to gather, manage and share design system for brand consistency. They also get their own strengths:

  • Zeplin — Global Styleguide to gather, share and link design assets

Zeplin provides users with a special “Global Styleguide” mode to gather, share and link different design assets. Here are the main features you can try:

Invision zeplin sketch
  • Gather, share and manage assets, like colors, text styles and components online.
  • Offer plugins for Adobe XD, Figma and Sketch to import colors and other assets.
  • Manage design colors, text styles and components with drag-and-drop.
  • Link your design systems with projects so that you can find the right design system of a certain project quickly.
  • Link your components to a code repository, making it easy for developers to check the related codes and sart coding quickly.
  • InVision — InVision DSM to unify, manage and share design systems
Invision zeplin sketch

InVision provides the InVision DSM- an independent online design system manager — for product teas to unify, manage and share design systems. In comparison with Zeplin, it supports more design asset types like colors, typography, icons and components, but offers only Sketch plugin to import or resuse them.

It also does not allow users to link components with codes and projects.

Other Tool Integrations

Apart from the popular design tools, both Zeplin and InVision support other tool integrations. Zeplin supports four team collaboration tools, including Slack, Trello and Jira, up to now. However, InVision integrates with more office or team collaboration tools, such as Jira, Confluence, Trello, Microsoft, Slack, Dropbox and Teamwork, etc.

Pricing

Both Zeplin and InVision provide a free plan with limited but different features.

Let’s check their price plans first:

Zeplin Price Plans:

InVision Price Plans

Obviously, the price of InVision is much lower than Zeplin. With one account, you can freely explore all the tools and features of InVision, including prototyping, commenting, collaborating and handoff. In this aspect, you and your team can enjoy more features than Zeplin with the same money.

However, this does not mean that you and your team can go for InVision without hesitation. All decisions should be made according to your team’s needs and purposes.

Never forget to test and evaluate all their features completely by trying the free plan before making any purchase.

Is There Any Better Alternative to Zeplin and InVision?

Yes. Mockplus, which combines all merits of Zeplin and InVision, is a perfect alternative that you should give a try. Most users describe it as a huge upgrade to InVison and a more complete version to Zeplin.

Zeplin vs Mockplus

Zeplin makes itself stand out from other design tools for streamlining the design collaboration and handoff process with great features. However, some users stop using it since it gives no features to design or prototype projects in the same platform.

In comparison with Zeplin, Mockplus not only offers product teams a great online prototyping tool to create live hi-fi website or mobile app prototypes from scratch, and also allows them to collaborate, review, comment and handoff projects with one single link. Assets, specs, and code snippets are also automatically generated.

InVision vs Mockplus

InVision attracts fans thanks to its powerful designing and prototyping features, however, the design collaboration and handoff features seem to be relatively limited.

In comparison with InVision, Mockplus provides more detailed and user-friendly features at the design collaboration and handoff process.

Take the asset features as an example, after importing assets from Adobe XD, Sketch, Photoshop and Figma, developers can freely view the asset specs and download the selected or all assets for all popular devices and platforms like Web, iOS and Android in one click. They can choose the desired development platform and customize the asset size.

If necessary, they can one click to compress and download assets at a smaller size (up to 50% smaller) when the download package is too large. Asset quality will not be affected.

Conclusion

So, if you are looking for a tool to collaborate and handoff designs with your team, and don’t care much about its designing and prototyping power, both Mockplus and Zeplin would never let you down.

If you are searching around for a powerful prototyping tool that can also allow you to collaborate, discuss and handoff designs, both Mockplus and InVision would help you out.

However, if you get a remote team, need to bring all developers, product managers, developers, clients and stakeholders to the same project, customize design workflow, collaborate, comment and handoff designs in one online shareable platform, Mockplus is what you are looking for. You and your team can have a wonderful experience there.

Zeplin vs InVision, Which One Is Right for Your Team? was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Источник: UX Planet

Наш сайт является информационным посредником. Сообщить о нарушении авторских прав.

invisionzeplinzeplin-vs-invisionwhats-the-differencezeplin-comparison

You can invite users to collaborate on a project with you. All you need are their emails or usernames tied to their Zeplin accounts.

When you add a user to a project, they will receive an invitation link via email inviting them to access the project. On Zeplin, the project will also automatically appear in their workspace.

☝️ You can resend an email containing a project invitation link to specific user by removing them then re-adding them to the project.

There are two places where you can invite users to a project: the project dashboard and your project workspace.

Adding a user from the project dashboard

You can invite a user to a project from the project dashboard. Open your project and click “Share” in the right panel. Enter in the email or username associated with the user’s Zeplin account then click the “+” button.

Adding a user from your project workspace

You can invite users from the Projects list, by hovering over the project thumbnail. There, click on the settings icon and select “Invite…”:

Invision Zeplin Sketch

Adding a user who does not have a Zeplin account

Invision Studio To Zeplin

Anyone invited to a project must have a Zeplin account in order to access the project. In other words, it’s not possible for someone to view a project without having an account on Zeplin.

If you’re looking to invite someone who does not have a Zeplin account to a project, you will need to add them to the project using their email, as you would for an existing user.

Sketch

Once you add their email address, Zeplin will email them a project invitation link. The invitation link will redirect them to creating a free account first before accessing the project.

Related Articles: