If you have your Component Variants setup in Zeplin, you can make use of the generated stylesheet snippets (CSS, Sass, Stylus et al.) from Component Variants in Web styleguides.

A friendly reminder: At Zeplin, we try to generate code snippets that make sense—we’re not here to hand you the complete front-end code, we just want to help out with the repetitive stuff. These code snippets in Zeplin are open source extensions built by the community.

☝️ Zeplin currently generates snippets from variants only in Web projects or styleguides.

Where to find snippets for components

Similar to selecting an individual layer in a design, Zeplin generates a stylesheet snippet when you select a component in the styleguide—the snippet will be located at the bottom of the right panel. If necessary, you can click and drag the divider to enlarge the snippet area.

Compared to a snippet from an individual layer, component snippets contain styles for all the layers and layer groups within the component.

What makes snippets for Component Variants special

With the introduction of Component Variants, Zeplin now generates stylesheet snippets that are smarter. Under the hood, Zeplin compares the layers that make up these variants and generates the CSS based on the differences.

Let's look at an example—here are some sample variants for a button. Note that we have 2 types (Primary, Secondary) and 3 states for each (Default, Pressed, Disabled).

Now let's compare the snippets generated for two of the variants:

All styles that are common across all the variants are collected under the button selector. For example, all our variants have a 6px corner radius, so you'll find the border-radius property in there.
Styles that are specific to the primary variants are listed under the primary class. All primary buttons have a pink background (or flamingo as we call it), so you'll find the background-color property in there.
If you look at the difference between our default variant and the pressed variant, you'll notice that the pressed variant has a border. Zeplin does the same comparison as well while generating the snippet, so you'll find the border property under the button:active selector.

Note that Zeplin also converts the name “Pressed” to the active pseudo-class, since that's the naming used in CSS.

Related articles: