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.
💁♀️ Learn more about switching platforms to access specific assets and specs.
☝️ 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. You can 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 them 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.
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 when the platform is selected as Android. Learn more about switching platforms to access specific assets and specs.
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 from your 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 selected platform; camelCase for iOS, snake_case for Android, kebab-case for Web.
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. When the platform is selected as Android, Zeplin generates assets by default with the "snake_case" naming convention.