All Collections
Projects & Screens
Screens
Getting started with Screen Variants
Getting started with Screen Variants

Learn how to combine variations of the same screen

Okan avatar
Written by Okan
Updated this week

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:

  • Themes: Light/Dark Mode

  • Device sizes: Desktop, Tablet, Mobile

  • States: Loading, Error, Empty

Defining Screen Variants

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

Post-publish: Drag and drop

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.

Post-publish: Right-click menu

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

Pre-publish: -v keyword

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

  • Login -v Desktop

  • Login -v Tablet

  • Login -v Mobile

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:

  • Login -v Desktop - Light

  • Login -v Tablet - Light

  • Login -v Mobile - Light

  • Login -v Desktop - Dark

  • Login -v Tablet - Dark

  • Login -v Mobile - Dark

Viewing Screen Variants

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.

Managing Screen Variants

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:

☝️ Removing a screen variant will move it to the project dashboard as an individual screen. If you need to delete the variant entirely, you can choose the “Delete Variant” button.

To dig deeper into this or any other topics related to Zeplin, reach out to our Customer Success crew at success@zeplin.io to schedule a 30-minute call.


Related articles

Did this answer your question?