When you select an individual layer or a group in Photoshop, you’ll notice an additional button on the Zeplin panel that lets you mark this selected layer/group as an asset.
After marking it as an asset and exporting your artboard to Zeplin, Zeplin will automatically generate all the necessary images with different scales and formats tailored to the platform you're designing for. You don’t even need to think about which sizes you should export them at; just clicking the layer inside Zeplin will show all the necessary assets to developers.
For layer groups, you can add “-g-” to the beginning of the group name to ignore its sublayers during export. This helps avoid exporting unnecessary layer data and keeps your Zeplin screens less cluttered.
Assets with transparent backgrounds
In a lot of cases, you might need to add padding around your icons. Let’s say you have a rectangular logo, but you want to export it as a 360px ⨉ 360px square, with a transparent background. Here’s the quickest way to accomplish this using a layer mask:
Draw a rectangle with the rectangle tool (U) — this is the transparent part.
Set its color to “None” from the properties panel.
Group these two layers and mark the group as an asset.
Then, click the “Export” button.
Here’s how this should look like when exported to Zeplin:
Next up: Downloading assets