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

Learn how to combine variations of the same screen

Berk avatar
Written by Berk
Updated over a week ago

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

Define 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

View 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.

Manage 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 … button:

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

If you have any questions or suggestions for Screen Variants, reach out to us from the chat bubble below—we’re happy to help!

Related articles:

Did this answer your question?