A Variant is any visual state specified for a component. With Variants, components can be given unique states to which they can animate when an event is happening or has occurred.

Types of Variants

Components can be given as many states as you want. After creating a new component from the Toolbar or by double-clicking an existing component, you will arrive in the Component Canvas.

By selecting the Primary component on the Component Canvas you will initially have three main Variants at your disposal:

1. A Pressed Variant

2. A Hover Variant

3. A regular Variant

Temporary Variants

Pressed and Hover Variants are temporary and only active while a pressing or hovering gesture is happening.

Contrary to this, a regular Variant is a new state that can be picked or activated and does not require an active ongoing event like pressing or hovering.

Any new Variant can also have its own Hover and Pressed Variant, as we are dealing with a whole new version of our component.

Regular Variants

After selecting your Primary component within the Component Canvas, you can create as many variations of your component by creating a new Variant on the horizontal axis.

Toggling between Variants

Variants can be connected to each other to create interactions between them. Just click and drag the interaction connector and you are able to link it to any of the other created Variants.

Using Variants as different versions

You can also use Variants to simply specify different versions of the same component.

A good example is a regular button, which can have many different variations such as Disabled, CTA, Loading, Focused, and more.

When designing each version as their own Variant in the Component Canvas, you save your main canvas from becoming filled with lots of different versions of a single component.

Back on the main canvas, you can then simply drag a single component to your prototype and from the Properties Panel, select which Variant you want to display.

Animations

Variants such as Hover and Pressed are interactive by nature, and regular Variants can also be made interactive by connecting them together.

These transitions can then be fully fine-tuned with the Animation Editor, where you can specify your favorite Bézier or physics-based Spring curve.

All animations used for Variants are powered by our own production-ready animation library Framer Motion.