Turn a design into a reusable component with variants and states, then override exposed props per instance. The Interact panel’s Dimensions, States, and Instance sections drive this.
Where: Right sidebar → Interact (a component master or instance selected) — Select a component master or instance
Key ideas
- Dimensions (variants): On a master, define variant dimensions (e.g. Size, State) and their options; instances pick a combination.
- States: Bind pseudo-class states (hover/focus/active) per variant, and restrict an element’s presence to specific variants/breakpoints.
- Instance overrides: On an instance, override exposed props (color/text/boolean/variant) per breakpoint, or reset to the master.
Steps
- Select a component master and open Interact → Dimensions to add a variant dimension + options.
- Use States to bind hover/focus etc. per variant.
- Place instances, select one, and override its props in Interact → Instance.
Current state and variant behavior
- Grouped designer-facing state catalog across interaction, form, link, and list position.
- Clicked (toggle) is a sticky state distinct from Pressed.
- Variant-specific hide/delete stays scoped to its cell.
- Canvas chrome remains fixed while inspecting masters and variants.
- The Design System Components tab provides one base tile for every master.
Copy, create, and insert behavior
- Copying a master produces a linked instance; copying an instance preserves its master relationship.
- Creating through the designer can lift the master to the Free Canvas and leave an instance in the original layout.
- The + action inserts inside a selected container, but media/text/SVG leaves, code elements, and instances receive a sibling instead.
Tips
- Name variant properties and options by user-visible meaning, then test the base and every reachable combination.
- Use Clicked for persistent toggles and Pressed only for momentary pointer-down feedback.
Troubleshooting
A pasted component no longer follows master edits
Confirm it was copied through the component-aware editor command and appears as an instance rather than as a frozen element subtree.