Smart Components
February 2, 2021
Introducing Smart Components—interactive components that have their own interactions, animations, and properties. And require no code to build.
To create a Smart Component use the shortcut command + K or go to the Component section of the top toolbar. Once your component is created you’ll arrive in the Component Canvas and you can start building. The key ingredients in creating Smart Components are Variants and Variables.
Variants are different visual states of a component, such as disabled, error, or hover. You can add as many Variants as you need to your components in the Component Canvas. You can easily add hover and pressed states to your components with infinite visual Variants then, add Variables to customize even further. Variables are custom properties you can expose in your components. Anything can be a Variable from text to color to border radius making it easy to customize any property you need in any component instance.
To unlock even more advanced layouts, you can even nest Smart Components, each with their own Variants and Variables, then compose them to create the most realistic interactive experiences.
