Zeplin generates asset formats and scales based on your project type and density. When creating a new project, you can choose the project type and density that best suits your needs.
Project type
Zeplin supports four project types: iOS, Android, Web, and macOS. When exporting designs to a project, all resources (including measurements, assets, and code snippets) are generated automatically based on the project type.
☝️ Since Zeplin generates all resources during the export process, it's sadly not possible to change the project type after it has been selected. If you need to change a project’s type, you will need to create a brand new project and re-export your designs into the new one.
Here are some key differences among project types:
Measurements are in points on iOS projects while they're in dp/sp on Android projects.
Assets are downloadable as PNG and SVG on Android projects and PNG, SVG, and PDF on iOS projects.
For iOS and Android projects, Zeplin can generate React Native code snippets. You can enable it for each project separately from the styleguide.
You can find more details about features and resources based on project types here:
Project density
Zeplin supports the following densities:
iOS: 1x, 2x, 3x
Android: mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
Web: 1x, 2x
macOS: 1x, 2x
When exporting designs to a project, Zeplin calculates and displays the correct measurements to developers based on this density setting. Zeplin normally determines the correct density based on the size of your designs, but in some cases, you may be prompted to set it manually.
Your project density depends on the project type (target platform/device) you're working on and the original dimensions of your design. For example, if you're working on a 750px × 1136px iOS screen, you will need to select "2x" as your project density. After that, if a measurement is 20px in your original design file, Zeplin will display it as 10pt to help developers out since they use "1x" values while coding.
To select or change the project density, click on the blue label that indicates the project type and density next to the project name in the project dashboard.
☝️ The density only needs to be selected once by the designer(s), but they can change the project density anytime.
💁♀️ If you're on a version before Zeplin's Summer Breeze release, you'll see the density information on the right panel of your project dashboard. Click on the pencil icon to change it.
When selecting a density from the selection window, you'll see a list of commonly used artboard sizes below each density. You can use this list as a reference to decide which density to select.
☝️ If you change your project density after exporting your designs, you'll need to re-export them, as Zeplin generates all the assets based on this setting during the export process.