Exporting assets in Zeplin

Hey folks, we launched Zeplin 1.0 last week with the most requested (by far!) “Asset Export” feature! Here’s a guide on how to use this feature more efficiently:

For the ones that are not familiar with Zeplin, a quick introduction: Zeplin is a desktop app that helps UI designers and front-end developers to work together efficiently and save time. It takes a design file, then generates style guides, assets and specs that developers need. To learn more, check out zeplin.io.

Thanks to the new asset export feature, you don’t need to prepare image assets manually anymore, you don’t even need to think about which sizes you should export them at. Developers can access all the assets they need in Zeplin, with just one click.

Here’s how it works:

“Make Exportable”

After selecting a layer in your Sketch file, select “Make Exportable” from the right bottom of the screen:

Setting the layer as “exportable”.

…and actually, that’s it! You don’t even need to select the sizes or the suffixes. Zeplin will figure those out for you depending on your project type & density. Now, you can just export the artboard to Zeplin like you always do. Cmd + E, or from the menu up top “Plugins > Zeplin > Export Selected Artboards…”.

When the export is complete, Zeplin will display the assets you set up. Here’s how it looks like:

Assets in Zeplin!

Feel free to use “Make Exportable” if you want your assets to be the same size as their corresponding layers, it’s very easy to use and works well.

Assets with Transparent Backgrounds

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

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

1. Draw a slice around the icon.
2. Group the slice and the icon together.
3. Here’s the cool part: Select the slice and check “Export Group Contents Only”:

Selecting “Export Group Contents Only”.

Now, this slice is exported as a 48x48 px image (with a transparent background). Here’s how it looks like in Zeplin:

Assets with paddings!

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. With 1.0, you can! Just write “-g-” in front of your layer name or Zeplin has a small plugin that helps you to do this:

“Plugins > Zeplin > Utilities > Exclude Sublayers” or directly use the shortcut “Cmd + Shift + X”.

“Exclude Sublayers” plugin.

Let’s try this with the Zeplin icon, it has 8 different layers in it.

Zeplin icon in Sketch.

Let’s apply “Exclude Sublayers”. It automatically adds “-g-” in front of the layer name:

-g-!

Now here is how this looks like exported to Zeplin, as a single layer:

Hope this helps, let us know if you have any questions! support@zeplin.io

👋