Design Inspiration

In-depth review of 3 top alternatives to Zeplin app for design teams in 2020

Matous RoskovecMatous Roskovec

Whatever your current workflow looks like, just the fact that you opened up this article means that you want to improve it… or that you didn’t find all you need to make an informed decision on Stackshare, Slant, Alternativeto.net, Product Hunt, G2, or Capterra (at least that’s what I check when I’m looking for a new tool).

So, do you work with design source files?

Is your team working across various design tools or operating systems?

Have you tried some tools to speed up the process of turn design to code in the past but still looking for something else?

You’ve come to the right place.

This article compares the four most popular tools for design collaboration and hand-off.

Before we get into it, I feel like I owe you a little disclaimer: Though our team is building a tool that is widely perceived as a Zeplin alternative, I didn’t want to sound biased. To give you a fair comparison, I researched and tried all of the tools mentioned in this article in one day. This article reflects their current state and feature set (November 2019).

Ok, let’s start from the beginning.

What is the Zeplin app?

Are you browsing for Zeplin.io pricing or looking to download the Zeplin app?

Then you probably know the yellow zeppelin app logo that represents a suite of plugins - the popular Zeplin Sketch plugin as well as one for Photoshop, Adobe XD, and Figma - along with a lightweight app for handing off designs and style guides with specs, assets, and code.

Zeplin released the first Beta in September 2014, following by a 1.0 version in 2015, which included a Sketch plugin for exporting artboards with exportable assets. Later on, it added support for Adobe XD & Figma and recently also style guide generation.

Workflow with the Zeplin app

Once you sign up, you need to create a project and set its platform (Web, iOS, Android, macOS), which predefines code language, measurement units, and color format.

Note: Project settings cannot be changed once you import designs.

Then you need to download a desktop app that installs plugins to your design tools. To import a design file, open it in the graphics editor (Sketch, XD, Photoshop, or Figma) select screens and import them to Zeplin via their plugin.

Note: This is the only way to import designs.

Zeplin is counting on the traditional workflow: “first, designers need to set layers as assets in the design file,” so developers could export assets. Zeplin then generates all the necessary images with different scales and formats depending on the project platform you’re syncing the design to. It’s a nice addition to your process if your designers don’t mind going through all images in the file and pre-exporting them for developers so they could work with them.

Note: Images that were not adequately grouped and set as Exportable in the graphics editor cannot be exported from Zeplin.

Once your screens are synced to Zeplin, you can share them, open in the browser, comment, inspect, and generate style guides from symbols.

Note: Zeplin imports a bitmap preview of your design screens in the fixed resolution from the design tool. Zooming and scaling the design beyond its original scale will pixelate it.

What can you do with the Zeplin app?

  • import artboards (only with design tools and Zeplin desktop app)
  • export image assets that were previously marked as Exportable
  • generate code from layers (CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, React Native and more if you install add-ons from the Zeplin extension library)
  • measure sizes and distances between single layers or layers that were previously grouped (in points, pixels, and density-independent pixels)
  • handpick colors in HEX, RGBa, HEX8, HSL, and UIColor
  • share designs for review
  • comment
  • play prototypes
  • access artboards version history
  • view, share, and inspect symbols
  • generate style guides from symbols
  • integrate it with Trello & Slack

What will you need to work with Zeplin?

It depends on what design tool you use or which files you receive for implementation.

  • Sketch - you will need someone with a MacBook and the Sketch app to prepare and import design files
  • Adobe XD - you will need someone with the Adobe XD app to prepare and import design files
  • Adobe Photoshop - you will also have to run Photoshop to prepare and import design files
  • Figma - you’re good to go with just a browser

To be able to export designs to Zeplin, for all design formats apart from Figma, you need to download the Zeplin desktop app, which installs respective graphics editor plugins.

Once you import screens to Zeplin, you can inspect them also in the browser.

How much does Zeplin cost?

If you want to try Zeplin on one project, you can do so for free. Subscription starts at $17 per month if billed annually ($204) or $19 monthly for three projects and unlimited collaborators.

The first alternative: Zeplin vs Avocode

Avocode first version kicked off in 2015. The initial idea was also to speed up design hand-off by providing one UI where the developer could inspect Sketch & Photoshop designs.

We have continuously talked to our users to find out whether the plugin-based workflow is suitable. Soon, we discovered that it works only for linear workflows where the designer is always at the beginning - he/she finishes the file and hands it over to development. In real life, things are more complicated - files don’t travel one way only, but different stakeholders need to work with them (open them, hand them over, download them, etc.) - and all these people don’t have design tools. In other words, the plugin-based workflow often limits them from participating in the process.

So we made a big bet on the inclusive design process: let’s build an importing (parsing) technology that allows people to work with design files completely independently of graphics editors. Eventually, we managed to develop it not just for Sketch & Photoshop, but also for Adobe XD, Adobe Illustrator, and Figma.

Workflow with Avocode

Once you sign up, you can invite your colleagues and stakeholders. Then you drag & drop any design file or sync it via Dropbox.

Note: You can import designs also via plugins. All importing ways are to be found here.

Avocode creates a project for your file with a preferred platform (Web, iOS, or Android). Each platform predefines code language, measurement units, and color format.

Note: You can change project settings at any time. You can also change the code language, color format, and measurement units for each design.

Once your file is uploaded, you can inspect, comment, and share it with anyone. This applies to all people invited to your project - on all operating systems. To add new design files, create a new project.

The cross-platform design import and custom rendering cuts away preparing assets and allows anyone to export any asset in whatever resolution or format.

Note: You can also multi-select layers (even across groups) and export the selection as an image asset.

Thanks to the Avocode rendering engine, you can fully work with layers. Avocode parses the whole design format data structure and renders the entire file, layer by layer, pixel by pixel.

Note: Vector shapes & fonts are scalable up to 4x in Avocode so that you can see your design just as bright as in the design tool.

Avocode also comes with advanced version history. With every update of the design file, Avocode creates a new version where you can describe the changes. All team members can navigate between versions and download any design source file back in time. Version Control with conflict resolution for Sketch design is coming soon.

What can you do with Avocode?

  • import & backup design source files
  • export any image asset in any resolution and format without preparations
  • generate code from layers (CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, and React Native)
  • customize code output and define variables
  • measure sizes and distances between any selection of single or grouped layers (in points, pixels, and density-independent pixels)
  • handpick colors in HEX, RGBa, HEX8, HSL, and UIColor
  • see a design overview of styles that multiple layers have in common
  • view, share, and inspect Symbols
  • access Symbol’s master instances
  • share designs for review
  • comment with mentions and color tags
  • create clickable prototypes from Sketch, XD, and Figma files (currently in Beta)
  • access design file version history
  • download source files
  • integrate it with Slack, Jira, Confluence, Dropbox, Visual Studio Code, and Atom

What will you need to work with Avocode?

All you need is just a source file and a browser.

*Tip: If you wish to sync files via plugins or work offline, the desktop app works on macOS, Windows, and Linux.*

How much does Avocode cost?

If you want to try Avocode, there is a free 14-day trial. Subscription starts at $17 per month if billed annually ($204) or $19 monthly for three projects and unlimited collaborators.

The second alternative: Abstract vs Zeplin

What is Abstract?

While Zeplin or Avocode started improving design collaboration with tackling design hand-off, the Abstract started with design consistency when it comes to collaboration on the same design files. Abstract was founded in 2015 and pioneered Git-inspired version control for Sketch design files. Later on, it also added a few design inspecting features.

If your team uses Figma or Adobe XD (which recently introduced coediting), you can work on the same design files in real-time. But if you use Sketch and need to collaborate on the same file, Abstract comes in handy. Abstract only supports working with Sketch files and, therefore, is tied to the macOS platform. According to their website, Adobe XD support is coming soon.

TIP: Avocode and Sketch (currently in Beta) both offer version history so you can roll-back in time. Zeplin offers version history only on screens, but not entire files. Version control with conflict resolution is coming to Avocode soon, first for Sketch, and then for Adobe XD.

Workflow with Abstract

Once you sign up, you need to download Abstract desktop app. After installing the app, you need to create a project and then import a Sketch file. You can do so by drag & drop. The first file becomes your Master - source of truth document. Every time you want to edit the Sketch file and track changes, you need to have the Abstract app open. Also, to edit a Sketch file, you are asked to create a Branch which will make a copy of the master file. Each branch becomes a workplace for one designer. You can also create a branch on top of someone else's branch. To commit your changes, you’ll need to sync the design revision back to Abstract.

Once the file is in Abstract, you can open screens from any branch and inspect them.

Abstract, quite like Zeplin, counts on the traditional workflow where the designers need to mark the image layers as Exportable in Sketch so that the developer could export them from Abstract.

Note: Images that were not properly grouped and set as Exportable in the graphics editor cannot be exported from Abstract.

What can you do with Abstract?

  • control versions of Sketch design files (branch, commit, compare, and merge)
  • import artboards (only with Sketch and Abstract desktop app fro macOS
  • export image assets that were previously marked as Exportable in Sketch
  • generate CSS code from layers
  • measure sizes and distances between single layers or layers that were previously grouped (in points, pixels, and density-independent pixels)
  • copy colors in Hex (RGB), Hex (ARGB), RGB, UIColor, HEX8
  • share designs for review
  • comment
  • play prototypes
  • access artboards version history
  • view, share, and inspect symbols
  • generate style guides from symbols
  • integrate it with Slack

Note: Abstract is not the only tool that enables version control of Sketch designs. Same capability is possible also with tools like Plant, Kactus, and starting with the 4.2 update also Avocode.

What will you need to work with Abstract?

  • Sketch - you will need someone with a MacBook and the Sketch app to prepare and import design files
  • Abstract desktop app for macOS which installs a Sketch plugin

How much does Abstract cost?

If you want to try Abstract, there is a 14-day free trial. Subscription starts at $9 per month per user (limited by 10 contributors) if billed annually. Considering you need at least 2 people to collaborate on design files, the price will be $18 per month if billed annually ($216) or $20 monthly.

The third app alternative: Zeplin vs InVision

What is Avocode?

It’s an all-in-one tool for teams that want to code and collaborate on UI design files 2x faster.

What is InVision?

InVision probably doesn’t need much introduction, but it would not be fair if we didn’t include them here. InVision entered the design collaboration market quite early - already in 2011. Sketch was getting traction back then, and "mobile-first" was growing like crazy. InVision saw an opportunity in prototyping screens and built a simple solution to do so on top of Sketch with their plugin Craft.

Later InVision added support for Photoshop and built other tools for inspecting, visual mood boards, aka InVision Boards, Freehand sketching, and last year also their own design tool called InVision Studio.

Workflow with InVision

Once you signup for InVision, you download their own design tool InVision Studio or their Craft plugin for syncing artboards from Sketch and Photoshop.

Until today, prototyping remains at the core of the work with InVision. So instead of creating a project like in the case of Zeplin, Avocode, and Abstract, you need to start with a prototype.

Then you need to switch to Sketch or Photoshop and “Publish selected screens” to a certain prototype in InVision via the Craft plugin.

So Zeplin or InVision?

InVision, quite like Zeplin and Abstract, counts on the traditional workflow where the designers need to mark the image layers as Exportable in Sketch so that the developer could export them from InVision.

Note: Images that were not properly grouped and set as Exportable in the graphics editor cannot be exported from InVision.

What can you do with InVision?

  • create prototypes from Photoshop & Sketch screens
  • import artboards (only with Sketch & Photoshop apps)
  • export image assets that were previously marked as Exportable in Sketch or renamed in Photoshop
  • generate CSS code from layers
  • measure sizes and distances between single layers or layers that were previously grouped
  • copy colors in Hex, RGB, UIColor, HEX8
  • share designs for review
  • comment
  • access artboards version history
  • view, share, and inspect symbols
  • integrate it with Slack, Dropbox Paper, Jira, Trello, Confluence, MS Teams

What will you need to work with InVision?

  • Sketch - you will need someone with a MacBook and the Sketch app to prepare and import design files
  • Adobe Photoshop - you will also have to run Photoshop to prepare and import design files
  • Craft plugin for Sketch or Photoshop
  • InVision Studio

How much does InVision cost?

If you want to try InVision on one project, you can do so for free. Subscription starts at $13 per month if billed annually ($156) or $15 monthly for three prototypes (aka projects) and unlimited collaborators.

So what’s the best Zeplin app alternative?

The choice is solely yours. It really comes down to your workflow and the flexibility your team needs. If you still have any questions that remained unanswered, just hit us up on Twitter.

If your favorite tool is on the list, I would love to hear what you love about it. And if you feel like I’ve missed something and you’d like to update the information of this article, please let me know at matous@avocode.com. Cheers.

Did you like this article? Spread the word!