Zeplin automatically generates CSS and HTML code snippets from layers, colors, and text styles on Web projects only.
☝️ CSS and HTML code snippets are generated by extensions in Zeplin for Web type projects and styleguides. It is sadly not possible to generate CSS and HTML code snippets on macOS, iOS, and Android projects and styleguides at this time.
CSS code snippets
CSS code snippets are automatically displayed in the right details panel when:
- Selecting a layer
- Viewing text styles and colors in the styleguide
HTML code snippets
HTML code snippets are automatically displayed in the right details panel for:
- Exportable assets
- Or layers whose names match HTML tags for text such as h1, h2, p, and so on
Here are some screenshots:
Exporting the whole page as HTML/CSS is a popular request, but it might be quite difficult to understand the overall layout of elements in a design, at least for now, and put that into code. We also don't want to enforce a layout option or coding decision to developers!