Exporting assets from a Sketch design in Zeplin is quite straightforward. After selecting a layer in your Sketch file, select “Make Exportable” from the right bottom of the screen. Then, 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 paddings
In a lot of cases, you might need to export your icons with paddings 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”.
☝️This basically adds “-g-” in front of your layer names.