Component Variants
Variants are different variations of your components. You can also use them for visual transitions.
The Hover Variant
In the isolation view, select the component and click on the ‘Hover’ placeholder below. You’ll see a new variant gets created that look exactly the same. Changing its properties (e.g. the color) will define how that component looks when hovered. Additionally, you can tweak its transition to the hovered state in the properties panel.
Other Variants
A part from the hover variant, you might need different states and sizes, as well as light and dark modes. Variants allow you to add those within a single component. After selecting the default variant, click on the variant placeholder on its right to add one, then proceed customizing it as you wish (e.g. by changing the corner radius property). When you’re back to the canvas, you can switch the variant of a component from the property panel on the right, in the section with your component name.
Interactive Components
In addition to set hover states, you can do much more with components interactivity. For instance, you can create fully interactive UI elements like toggles, checkmarks, radio buttons and even component with auto-playing animations, like loaders. All this can be done linking component variants with each other.
Linking Variants
Let’s consider a toggle, for example. After creating an ‘on’ and ‘off’ variants, you can link each other via the bolt connector to change their state on click. Then quickly preview to test out your component interaction.
Tweaking Transitions
After linking 2 or more variants, you can tweak the animation between them by clicking on ‘Transition’, in the properties panel. You can then choose between spring and ease curves, and tweak the parameters to your liking.
Animation Triggers and Autoplay
You can set the variant of a component to change on tap, but also on other events like 'Mouse Enter', 'Mouse Leave', or even set the animation to auto-trigger on 'Appear'.
Setting a transition to autoplay after a certain delay it’s useful in creating looping animations. You can make small components like spinners and loaders, or even looping animated illustrations.
Related Articles
Component Creation
Component Variables
Component Transitions
Component Sharing
