Back To Videos

Introduction to Interactions

Tutorial length - 1:27 minutes

Step-by-step

Here we'll cover how to add interactions to your layers, how to change the properties of an interaction and how they're used to interact with your prototype on a mobile device. For more information, see our User Guide chapter on Interactions.

All size, position and conditional values used are specific to a prototype designed for an iPhone 5.

Create Layer

  • Create a layer with these specifications.

Add Drag

  • Apply the Drag interaction to the layer.
  • Change the Free option to Vertical.
  • Enter 18 for Min Position.
  • Enter 550 for Max position.

Test it out

    The layer can be dragged vertically, but not horizontally and can not be dragged off the screen.

Add Rotate

  • Apply the Rotate interaction to the same layer.
  • Test by using two fingers to rotate the layer.

Add Pinch

  • Apply the Pinch interaction to the same layer.
  • Test by using two fingers to pinch scale the layer.