Variants

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.

The mechanics of animating between Variants

When you set up different Variants for your components and animate between them, e.g. with a Hover variant, Framer looks at the properties that changed and animate these along the animation curve that you specified.

This means that you can leverage all the different style and layout properties to create unique animations. By leveraging properties like overflow and position, you can introduce even more creative animations where elements move in and out of view.

Get inspired with five different unique component animations

Can I sequence animations of different properties?

All animations are fired at the same time, which means you can not chain animations in this manner. Let us know that this is important to you by voting for feature requests.

Is state preserved when animating between Variants?

When you are changing properties between Variants, the current Variant’s state will remain preserved except when the component is unmounted from the preview.

This means that the element is literally removed from the architecture of your component, useful for example when using auto-sized layout.

To preserve state and hide an element, we recommend using the opacity property.

To reset state and completely ‘remove’ an element, use the visible property.