Variants and Variables enable you to build fully interactive components without code. Your components can adapt to any use-case with animatable visual states known as Variants, and custom properties known as Variables.
Note: Variants and Variables are beta features. We strongly urge you to not use these features for production work. If you do want to use it for important work, aim to always keep a copy of your work in a non-beta project.
As the feature is still in Beta, read this article to be aware of what isn't supported yet.
How do I create Variants and Variables
To elevate components with Variants and Variables, you first enter the Component Canvas. This is done either by creating a new Component from the Toolbar or by double-clicking an existing component on your canvas.
From within the Component Canvas, you can now start adding Variants to your component and enabling Variables to increase customizability.
Variants are different interactive states you can give to a component. For any component, you can tell it to animate to a temporary state with Hover and Pressed Variants.
On top of this, you can also set regular Variants. These are entirely new versions of your component, that can be used as different variations of the same component when reusing your component or can be made interactive by linking between two Variants.
Hover and Pressed
Variants allow you to add Hover and Pressed states to temporarily animate to a new state which should only be active while the component is hovered or pressed, respectively.
If your component should animate to a completely new state, e.g. when you tap it, you can create a new Variant to the right of your Hover or Pressed Variant instead.
You can add as many Variants to your component as you want, and they are easily linked to each other with the prototyping connector or from the Interactions section in the top of the Properties Panel.
Variables allow you to create custom controls for your components so that these controls can easily be accessed outside of the Component Canvas.
Custom Variables can be controlled from the Variables overview, enabling you to limit the values that can be entered and how they are added.
To unlock more advanced layouts, you can even nest components, each with its own Variants and Variables, to create uniquely expressive, interactive experiences.
Start by creating the first component, after which it will show up in the Insert Menu or the Components Panel to the bottom-left of your canvas.
When you now start working on your second component, drag the first component to the Component Canvas to create a nested component.