Learn how to prototype web and mobile apps

Prototype with rich events: the events tab

All the event defined to a widget can be seen, edited, deleted or created through the Events tab after selecting the widget on the canvas.

The Events tab shows all the events defined for the selected item (1), grouped by User Events (2). In the Events toolbar (3), you can create a new event (‘+’), copy all the events defined for the selected element, replace all the events by the ones in the clipboard, and delete (‘X’) all the events defined for the selected element. Additionally, you can collapse/expand all the events and conditional blocks, and change how the actions will be displayed switching between the text and image modes.

Interactive wireframes: the events tab

Once you click on the option ‘Add event‘, a dialog shows up. There, in the top left-hand corner of it, you’ll find the User Events and the Actions drop-down menus, from where you can define an event for a selected widget, as we will show you in the next tutorial.

By clicking on the Gear icon next to a User Event, you can perform the following actions:

  • Create a new event under the specific type of event (1);
  • Copy all the event to paste it in a different element (2);
  • Copy all the events under this specific type of event to a different type of user event (3);
  • Add the events that are at the moment in the clipboard to the ones in the selected event (4);
  • Delete this event with all the events within (5).

Interactive prototypes: event options

By clicking on the gear icon next to an event, you can perform the following actions:

  • Modify the event’s name
  • Copy the current event
  • Move the eventto the left so it can be executed before
  • Move the eventto the right so it can be executed after
  • Delete the current event

Interactive prototypes: interaction options

Every event will consist of a possible condition and a set of actions, displayed horizontally. The actions’ execution will also have an order (from left to right), hence a particular action will not be executed until the one before has been executed.

The actions in the Events tab can be selected individually or as a group so you can copy, delete or order them.

To select an action separately, just click on it with the mouse left button. A green border around the action square will let you know when an action is selected. To select a group of actions, click on them while holding the Control button.

You can define the order of the actions by drag and drop.

A single user event can trigger several actions in sequence, and select different start variables (After previous, With previous, after previous with some delay).

Interactive prototypes: events flow

By clicking the gear button next to the word ‘Do’, you can perform the following actions:

  • Add another action that runs after the previous one;
  • Modify the current selected action;
  • Delete the current selected action(s);
  • Move the event to the left or to the right so it can be executed before or after.
  • Copy and paste the selected action(s).

Interactive prototypes: interactions

Next tutorial > List of event actions