Exporting assets from Sketch into Zeplin is quite straightforward! After selecting a layer in your Sketch file, select “MAKE EXPORTABLE” from the bottom of the right panel.
When you export your designs into Zeplin after this is selected, Zeplin will automatically generate all the necessary images with different scales and formats 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. To do this, select the group layer and use the shortcut Cmd + Shift + X. You can also do this through the menu up top: “Plugins > Zeplin > Utilities > Exclude Sublayers”
💁♀️ You can directly add “-g-” in front of your group layer names, which is what the “Exclude Sublayers” option does automatically.
Next up: Downloading assets