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.

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”.

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

Did this answer your question?