Zeplin automatically generates resources, including measurements, assets, and code snippets tailored to the platform needs.
Here's a list of features that will help you develop Web projects:
Measurements are in pixels.
Assets are available as:
PNGs and optimized PNGs (1x, 2x, 3x)
SVGs and optimized SVGs (with SVGO)
JPGs and optimized JPGs (1x, 2x, 3x) (for Bitmap images only)
WebPs (1x, 2x, 3x).
For responsive designs, you can measure the distances as percentages or you can enable rem unit to inspect them in
em
/rem
.
Generating CSS, Sass, SCSS, Less, Stylus snippets from layers, colors, and text styles.
Grids from layouts in Sketch, Figma, and Photoshop are accessible.
Generating HTML snippets from assets as
img
tag.Generating HTML snippets from text layers if the text style name matches an HTML tag (such as
h1
,h2
and so on).
Related articles: