Variants (UI)
Last updated
Last updated
The Variants UI element allows to switch between objects contained within a Variants tool. To use this feature, first, add a Variants tool to the project, then assign it as the source in the Variants UI element settings.
Object switching within Variants group can also be configured using the Variants interaction for automated transitions.
Variants (UI) can be displayed in two styles:
Dropdown — a standard selection menu.
Swatch — a visual selection with customizable thumbnails.
Auto-hide — Hides the UI element when the object is hidden.
Additional settings for Swatch style:
Display name — Show the selected object name.
Alignment — Set thumbnail alignment.
Spacing — Define the spacing between thumbnails.
Swatch size — Set the thumbnail size.
Swatches — Upload a custom design for each variant.
W — Defines the width of the Variants element.
H — Defines the height of the Variants element.
Fixed — Sets a fixed size in pixels.
Fill — Adjusts the size based on the parent element (Floating UI or Container).
Padding — Sets vertical and horizontal padding within the element.
Corner radius — Defines the rounding radius for the dropdown field and swatches.
Thickness — Defines the stroke thickness for the dropdown field.
Default color — Sets the default stroke color (if disabled, the stroke will be transparent).
Hover color — Changes the stroke color on hover.
