Zeplin currently supports four project types; iOS, Android, Web and macOS.
All the resources (including measurements, assets and code snippets) within projects are automatically generated while exporting designs, based on its type.
We collected all the different features and resources that Zeplin offers for different project types under separate articles:
- Developing iOS projects using Zeplin
- Developing Web projects using Zeplin
- Developing Android projects using Zeplin
On top of these, Zeplin also generates React Native code snippets for iOS and Android projects. You can enable it for each project separately from the Styleguide.
☝️As these resources are generated while exporting the designs, it's not possible to change the type later on.
Project density only needs to be selected once by the designers, so that they can pick the resolution of the design that they are working on.
Zeplin will mostly determine the correct density based on the sizes of the designs you. In certain cases though, you might be prompted to set it manually. You can also change the density manually from the project Dashboard, from the right panel.
Most common artboard sizes are listed in the density selection window, which you can use as a guide.
Based on this density setting, Zeplin calculates and displays the correct measurements to developers.
For example, let's say your arboard size is 720×1280px and you're working on an Android project. In this case, your project density should be xhdpi. Then, if a measurement is 20px in Sketch, Zeplin would show it as 10dp.