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’ll have the option to ignore its sublayers to avoid exporting unnecessary layer data and keep your Zeplin screens less cluttered. This basically adds “-g-” in front of your layer group.
Assets with transparent backgrounds
In a lot of cases, you might need to add paddings around your icons. Let’s say you have 500px ⨉ 500px Bulbasaur, but you want to export it as 600px ⨉ 600px, 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 selected artboards to Zeplin” button.
Here’s how this should look like when exported to Zeplin:
Next up: Downloading assets