Zeplin's CSS and HTML extensions generate code snippets from layers, colors, and text styles if you're on a Web project or styleguide.
☝️ 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:
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.
💁♀️ 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, HTML tags are generated by using layer names.
When the layer name is "Zeplin":
<div class="Zeplin"></div>
When the layer name is "Form":
<form></form>