Zeplin automatically generates resources, including measurements, assets, and code snippets tailored to the selected platform's needs. When working on web projects, select Web as your platform while inspecting a screen or component to get the appropriate formats.
💁♀️ You can learn more about switching platforms to access specific assets and specs here.
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: Exporting grid layouts from design tools.
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).
You can learn more about CSS and HTML code snippets in Zeplin here: Exporting CSS and HTML.