To be able to download assets, designers need to set layers as "exportable” before publishing them to Zeplin. Then, Zeplin will automatically generate resources, including assets, tailored to the platform's needs.
Designers can follow the instructions from the articles below to learn more about how to export assets:
You can download a layer's assets from your screen. Click on the layer on the screen, and you’ll see the available assets on the right panel.
☝️ You will need a Developer or a higher role to access technical specs and download assets if your project is in a workspace on the Team, Organization, or Enterprise plan.
Downloading all available assets on a screen
To download all of the available assets of a screen at once, click on the Assets section at the bottom right of the screen. Then, you'll see the download button at the bottom of the asset list. Select the asset format from the dropdown next to the "Download all assets" button.
If you don't need to download all assets on a screen, you can select multiple assets to download the selected assets at once.
Downloading the assets of a component
You can view and download a component's available assets from your styleguide. To do that, go to the component detail view first. Check this article to learn more about the component detail view: Inspecting a component in the detail view.
💁♀️ If you're using an older version of the Mac app before the Summer Breeze release, you'll need to click on a component under your styleguide, and then, you'll see the download button near the asset formats under the Assets section on the right panel of the styleguide. You can download the latest Zeplin app here.
☝️ If your components are located in a base styleguide, you can download their assets from a linked project or platform-specific child styleguide.
Bitmap scales
Zeplin generates multiple scales for your bitmap images. You can download 1x, 2x, and 3x scales of your PNG, JPG, and WebP assets.
💁♀️ Available PNG scales are mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi in Android projects.
If you don't need all the scales of your bitmap assets, you can disable them from the Assets settings menu under the "Bitmap Scales" option.
Naming convention
You can also change the naming convention of your assets before downloading them in Web, iOS, and macOS projects/styleguides. You'll see the Naming option under the Assets settings menu on the right panel.
💁♀️ When you change the naming convention for your assets, this change will only be visible to you.
Default: Asset names are generated based on your project type.
camelCase: Generally used for iOS projects.
snake_case: Generally used for Android projects.
kebab-case: Generally used for Web projects.
Original: Asset names are generated as you name them in your design tool.
☝️ Due to the Android platform's strict structure, it is sadly not possible to change the naming convention in Android projects/styleguides for now. Zeplin generates assets in Android projects/styleguides with the"snake_case" naming convention by default.