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.
Next up: Downloading assets
Related articles: