Screen Variants allow you to combine variations of the same screen, reducing clutter and enabling developers to quickly toggle between them.
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.
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.
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!