Screen Variants allow you to combine variations of the same screen, reducing clutter and enabling developers to toggle between them quickly.

Teams rely on Zeplin to translate the “wall of screens” from a design tool into a structured workspace that the team can collaborate within—using Sections, Tags, and the Jira integration.

Screen Variants help communicate variations of screens such as:

You can define Screen Variants once designs are published to Zeplin or in the design tool before publishing them.

In the project dashboard, simply drag and drop screens onto each other to combine them as variants.

Zeplin analyzes the names of the screens and automatically generates names for each variant.

Drag your mouse to select multiple screens under the project dashboard, right-click, and choose the “Set as Screen Variants" option to combine them as variants.

Select multiple screens you’d like to set as variants and click the “Combine as variant” button on the footer menu located at the bottom of your project dashboard.

Name frames/artboards in your design file using the -v keyword to publish them to Zeplin as variants. Here’s an example:

Once you publish designs after adding the -v keyword, they will automatically be added to your project as variants.

If you have multiple dimensions of variants, like device sizes and themes, you can still use the -v keyword like so:

In addition to a structured workspace, the team can easily review a screen's various states. Developers can quickly toggle between variants as they implement a screen.

When you view a screen with variants, you’ll notice a bar above that lists all the variants:

You can use the keyboard shortcuts Option/Alt + → and Option/Alt + ← to select the next and the previous variant. You can also navigate between your screen variants by using the Option/Alt + number keys.

Once you define variants, either before or after publishing to Zeplin, if you need to rename, reorder, or remove variants, you can do so from the "…" options button: