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!

Related Articles:

Did this answer your question?