Sketch And Zeplin

Posted on  by



Desktop apps

Zeplin's desktop apps are available on the following operating systems:

Mac

Zeplin is a collaboration tool for UI designers and front end developers. It allows designers to upload their wireframes or visual designs straight from Sketch and add them to project folders in Zeplin. So developers can take it over with all the information they need at a glimpse. Get started with Zeplin+ Download the Zeplin desktop app for Mac or Windows. You can use the app.

Zeplin is a collaboration tool for UI designers and front end developers. It goes beyond the design workflow and helps teams with the design hand-off. It allows designers to upload their wireframes or visual designs straight from Sketch and add them to project folders in Zeplin.

  • Zeplin Zeplin is a tool that helps your team collaborate and organize a project seamlessly. Unlike the two aforementioned, Zeplin is not an independent UI design tool, which means you have to create and edit the design in other standalone tools like Sketch and Figma and then import the draft into Zeplin.
  • With the Sketch plugin, you can publish text styles from Sketch to your projects and styleguides on Zeplin. Defining text styles in your Sketch file. In order to export text styles, you will need to define them in your Sketch file. Zeplin only recognizes text layers you have set up in your text styles.

  • macOS 11.0 Big Sur

  • macOS 10.15 Catalina

  • macOS 10.14 Mojave

  • macOS 10.13 High Sierra

Windows

  • Windows 7+

☝️ If you're on an unsupported macOS/Windows version or an operating system such as Linux, you can use Zeplin's Web app. It offers the same functionality as the desktop apps, except for uploading designs.

Web app

Difference Between Sketch And Zeplin

Sketch And Zeplin

Zeplin’s Web app works on Windows, macOS and Linux devices and supports most modern browsers to provide the best experience:

  • Chrome 62+

  • Firefox 59+

  • Safari 11+

  • Edge 15+

Sketch Zeplin Plugin

Sketch

Plugins

  • Photoshop CC 2015+

  • Sketch 44.1+

Related articles:

Exporting assets from a Sketch design in Zeplin is quite straightforward. After selecting a layer in your Sketch file, select “Make Exportable” from the bottom-right of the screen.

After this is selected, Zeplin will generate all the necessary images with different scales and formats automatically, tailored to the platform you’re designing for; Web, iOS, Android, or macOS.

Zeplin Sketch Plugin

Assets with transparent padding

In a lot of cases, you might need to export your icons with padding around them, to keep everything neat. Let’s say you have 36px ⨉ 36px icon but you want to export it as a 48px ⨉ 48px image with a transparent background.

This is where Sketch’s “Slice” feature comes in:

  • Draw a slice around the icon.

  • Group the slice and the layer(s) together.

  • Here’s the cool part, select the slice and check “Export Group Contents Only”:

Keeping Groups Together

Zeplin normally displays all the layers in your Sketch file, even if they’re grouped. At some point, you might want to keep some groups together, as a single layer. After selecting the layer, use the shortcut “Cmd + Shift + X”. You can also do this through the menu: “Plugins > Zeplin > Utilities > Exclude Sublayers”.

Sketch Zeplin Plugin

☝️You can also add “-g-” in front of your layer names, which is what the Exclude Sublayers option does automatically.

Related articles: