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 projects or styleguides.

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.

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 with 3 states: Hover, Pressed, and Default.

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

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