Zeplin's CSS and HTML extensions generate code snippets from layers, colors, and text styles if your selected platform is Web.
💁♀️ You can learn more about switching platforms to access specific assets and specs here.
The CSS and HTML extensions are added by default to your projects and styleguides. If you have removed them, you can re-add them from the extensions.zeplin.io page.
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 "Colors" and "Typography" pages of a styleguide under the "Foundations" section, 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>