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.