All Collections
Developing with Zeplin
Extensions
Exporting CSS and HTML
Exporting CSS and HTML

Learn how to export CSS/HTML code snippets on Web projects and styleguides

Didem avatar
Written by Didem
Updated over a week ago

Zeplin’s CSS and HTML extensions generate code snippets from layers, colors, and text styles if you’re on a Web project or styleguide.

The CSS and HTML extensions are added to the Web projects and styleguides by default. If you have removed them, you can re-add them from: extensions.zeplin.io.

💁‍♀️ As Zeplin generates the technical resources tailored to the platform needs, it’s not possible to use the CSS and HTML extensions on macOS, iOS, and Android projects/styleguides. You can learn more about choosing a correct project/styleguide type from the articles below:

☝️ Exporting the whole page as HTML/CSS files from Zeplin is sadly not possible at the moment. This is a very popular request, but it’s currently quite difficult to understand the overall layout of elements in a design and put that into code. We also don't want to enforce a layout option or coding decision on developers. That’s why the extensions generate snippets only from individual layers, colors, and text styles.

CSS code snippets

When you select a layer on a screen or component, CSS code snippets are automatically displayed on the right panel.

On the “Color Palette” and “Text Style Catalog” tabs of a styleguide, the CSS extension generates the code snippets for your design tokens.

HTML code snippets

For exportable layers (assets), the HTML extension generates code snippets with the img tag.

For text layers, it generates HTML tags with the text content.

While generating the code snippets for text layers, the extension uses both the layer name and text style name, if possible, to decide the tag and class name.

  • When the layer name is "Small":

<small>This is a text</small>

  • When the layer name is "Zeplin" and the text style name is "H1":

<h1 class="Zeplin">This is a text</h1>

  • When the layer name is "Small" and the text style name is "H1":

<h1><small>This is a text</small></h1>

  • When the layer name is "Zeplin" and the text style name is "Primary Text":

<span class="Zeplin Primary-Text">This is a text</span>

For other layers, generates HTML tags by using layer names.

  • When the layer name is "Zeplin":

<div class="Zeplin"></div>

  • When the layer name is "Form":

<form></form>

Related articles:

Did this answer your question?