Zeplin vs Sketch Cloud for dev handoff?

Sending developers to our full Sketch file still feels very messy, with them having access to every single artboard and symbol in the file. Our Zeplin projects are usually a tiny subset of our Sketch files, and we like to control which screen developers should be able to see or not.

On top of that Zeplin shows device-sizes thumbnails when browsing screens whereas Sketch displays some weird tv-shaped thumbnail (unless you’re using the Pages view which similarly to what I said above feels messy).

The inspector view works well (although I find it a bit slow to load).

Using Zeplin really feels silly at this point (let alone paying for it!) and we’d much rather use Sketch but theses 2 issues are really making it hard to adopt. Are we the only ones feeling this way? Or is there a better way to do dev handoff using Sketch Cloud?

Hey Sam,

we like to control which screen developers should be able to see or not.

This is something that could be useful indeed.

Thanks for sharing I’m curious to hear what others think as well :slight_smile:

1 Like

I had a conversation with our lead dev last Friday about the Sketch-Webapp vs Zeplin.

They were missing the feature of being able to categorise comments in Sketch. In Zeplin it is possible to separate comments for the developers from comments for the stakeholders or customers or the editors who make the content.

It would be enough here if, for example, you could assign colours for different types of comments.

This would make it easy for developers to recognise comments that are relevant to them and distinguish them from those that are irrelevant.

We currently do this using various emojis that we place in front of each comment … as a workaround, so to speak.

1 Like

As I mentioned here: Images changed by override in symbol instances should be exportable I would very much appreciate it if images that I have changed within symbol instances via override were also exportable, provided that I have set the image layer in the symbol to exportable.

We still use Zeplin beside Sketch because:

  1. Downloading single assets is very painful and time-wasting.
  2. The UX for inspecting is awful and slow. for every page, you should switch to inspect mode and it takes several seconds to be ready.
  3. As I mentioned here, Zeplin generates optimized assets automatically in different formats.

I should mention that Zeplin is very expensive in comparison to Sketch. 8 $ monthly for every developer and editor!

2 Likes

To clarify my feedback about the way Sketch displays thumbnails vs Zeplin, here is what the same screen and its variants look like in Sketch vs Zeplin.

Zeplin just feels like it was designed for mobile handoff, whereas Sketch has those weird tiny desktop-shaped previews. Hovering the thumbnails has some zoom effect but that’s not really helpful either.


Hey there!

Our team has released a number of updates that should’ve made this interaction, MUCH MUCH faster. :eyes:

Hey Sam,

Thanks for the update and info!

Would the Copy Link from Position feature work in this case?

Depending on how you have set up your Artboards on the Canvas, you could share that specific position with your devs and they’d always be in context.

  • Open a Document in the web app.
  • Right-click where you’d like to copy the position of
  • Select Copy Link from Position
  • Done!

You can share this URL with whomever you like and it should work!

That’s helpful but… I simply wish devs wouldn’t have access to everything else in the document at all.

I heard some designers do an “External” version of their file that they use for dev handoff, which itself links to their working version. Is that standard practice? If that is the case then we might just do that and start experimenting more with Sketch Cloud so we can stop sending $50,000/y to Zeplin for something that’s baked into Sketch.

Any thoughts on the feedback regarding odd-shaped thumbnails I reported above?

That could be one of the ways you can put in place a workflow right now, yes.

Our team is constantly looking into this experience (sharing), and we have shared these bits of feedback with the team in charge so they can take a look. As you mention, and we agree, there’s room for improvement here and truly appreciate you sharing this with us!

Thumbanils:

  • What you want here is for the thumbnail to fit the Artboard you’re showing (as Zeplin does)
  • This is non-trivial when working with same-sized Artboards, but having a combination of them on the same Page/Document could prove tricky to show on the web app.
  • Maybe we could play around with aspect ratio and adjust the preview like that?

We’ll share this with them as well!

This is non-trivial when working with same-sized Artboards, but having a combination of them on the same Page/Document could prove tricky to show on the web app.

Zeplin deals with this by giving all thumbnails a fixed width of 256pt and then the height varies depending on the artboard content (up to a maximum height of 520pt, at which point content gets clipped). See screenshot below of a bunch of screens in Zeplin that have various dimensions and are not necessarily sized to a mobile device screen.

So the main differences with Sketch are that:

  • Zeplin chose a thumbnail size that’s better suited for mobile, a vertical rectangle instead of an horizontal one like Sketch (which I assume is great for desktop projects/designs on the other hand).
  • When the content doesn’t fit in their thumbnail, they scale to fill, as opposed to scaling to fit like Sketch does. Sketch does make the artboard scale to fill when you hover it, but imo that should really be the default behavior, and hovering the thumbnail scales to fit so you see the entire artboard if it’s not already visible.

I hope this feedback helps make your team reconsider how you do thumbnails!

2 Likes