Add interactions and transitions

Use visual states for appearance changes and interactions for actions such as navigation. Use a Motion clip when you need values to change across several keyframes.

Add a state transition

1. Select one layer or a layer in a main component.
2. Open its interaction controls in Design.
3. Choose a visual state such as Hover, Pressed, Focus or Disabled.
4. Change supported appearance values for that state. For a first test, use a small scale or opacity change.
5. Set Transition to Timed or Spring, and adjust the exposed controls. Timed durations are in milliseconds.
6. Use Replay and Back to base to inspect the effect without changing your project through a live gesture.

A transition needs a difference between states. Setting a duration alone does not invent an effect. Reduced-motion settings are respected.

Connect a button to another page

1. Select the button or appropriate component layer.
2. Use Add interaction.
3. Set On to Tap and Action to Go to.
4. Choose the existing destination page.
5. Open Try the page or the page Preview and activate the button.

For an external link, use Open URL with an accepted URL. Other actions include scrolling, going back and controlling a Motion clip. Events intended for code need a corresponding implementation; adding an event name does not implement a business workflow.

Components and breakpoints

Edit a main component for behavior you want its instances to inherit. An instance may have its own supported overrides. Check the active variant and frame before editing: secondary breakpoint changes stay local where the property supports overrides.

Check the result

Test pointer and keyboard interaction where relevant. Hover requires a pointer and is not a substitute for a touch action. Preview is useful for gestures and navigation; native app behavior still needs a native build and device test.

See Motion clips, components and breakpoints.