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, as well as 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.

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.

Select multiple screens by dragging your mouse, right-click, and choose the “Set as Screen Variants" option to combine selected screens as variants.

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 be added to your project as variants automatically.

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 now review the various states of a screen easily. Developers can quickly toggle between variants as they’re implementing a screen.

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

☝️ If you have a high number of variants and they don’t fit in the bar above the screen, the … button will list all the remaining variants.

You can also 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 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 … button:

☝️ Removing a screen variant will move it to the project dashboard as an individual screen.

Related articles: