You can use Transitions to move your prototype from one Frame to another. Any interaction can trigger a Transition.

Creating a Transition

To create a Transition from a selected Frame, click on the Frame's connector, then click on the layer that you want to transition to. This will create an interaction with a Magic Motion type Transition with a Tap trigger.

You can also create a Transition from the Properties panel. Click on the + button next to Interactions, select an Interaction from the menu, then select the Transition type.

When you create a Transition, selecting the Transition's origin Frame will show an arrow connecting the origin to its target.

Tip: To see all of a project's transition arrows, select Menu > View > Show All Links.

Editing a Transition

On the Properties panel, you'll see the new Transition listed in the Frame's Interactions.

To open the Transition editor, click on the Transition.

To delete a Transition, click on the Transition's x button.


A Transition has four properties:

  • Trigger is the interaction that will start the Transition
  • Target is the layer that will be transitioned to, or "Back to Previous"
  • Type controls how the prototype should move from the origin to the target
  • Animation controls how the prototype should animate the transition


Any event can trigger a Transition. A Frame has seven triggers, each responding to different pointer actions, but you may also find Code Components with their own custom triggers.

Tip: Consider using the various Default Components and their built-in triggers. Some components, like the Input component, will have built-in triggers like typing inside the input field, or focussing the input field.


A target can be any top-level layer — a layer that is directly on the canvas. Alternatively, a Transition can target Back to Previous, in which case the prototype will transition back to the previously visited layer.

Tip: A transition with a Back to Previous target is especially useful for parts of your prototype that may be arrived at from different origins, such as the close button of a menu or modal.


You can choose from seven different Transition types that determine how the prototype should animate between the Transition's origin and target.

The Magic Motion type is special: instead of animating the origin and target layers, it will animate the children of those layers.


You can use the Animation Editor to set how a Transition should animate to its target. The Animation Editor gives you full control over the exact type of ease or spring animation you’d like to use.