Interactions

Take your prototype from static to motion with Interactions in UXPin. Create simple click-through mockups or fully animated prototypes.

In UXPin, you can add interactions to elements or the canvas. To add an interaction, either use the Interactions button in the Top bar or the + at the top of the Properties Panel. Existing interactions are marked with numbers. You can edit them or create a new one.

Triggers

A trigger is an action a user needs to perform to start the interaction. There are two types of triggers in UXPin, Element triggers and Canvas triggers. Element triggers set off an action when a user interacts with an element, while canvas triggers set off an action when there’s a change in the canvas state.

Element triggerTriggers when

Click (Tap)

User clicks or taps on a component

Double-click (Double Tap)

User double-clicks or double taps on a component

Right-click

User right-clicks on a component

Hover

A mouse pointer enters and leaves a component

Mouse in

A mouse pointer enters a component

Mouse out

A mouse pointer leaves a component

Swipe left

User swipes horizontally from right to left

Swipe right

User swipes horizontally from left to right

Swipe up

User swipes vertically from bottom to top

Swipe down

User swipes vertically from top to bottom

Touch and Hold

User taps and hold their finger for more than one second

Hold Release

User holds their finger for more than one second and then releases it

Focus

A component gains focus

Blur

A component loses focus

Change

A component is updated

Option select

An option is selected on a multi-select list

Elements with States will have the State changed option available.

Canvas triggerTriggers when

Key press

When specified key is pressed

Window is scrolled to

When the prototype preview is scrolled to a defined height

Page is loaded

When page is fully loaded

Variable changed

When the variable value is updated

The order of operations for interactions starts from the deepest element. That is, the deepest member of a multi-layered group. Then, it moves to the parent elements.

If there are a few interactions on the element with the same trigger. For example, move an element On click, rotate an element On click and then change its color also On click, they will be launched based on the order of the interactions on the list – from first to the last.

You can additionally improve your prototypes with conditional interactions. It’s a system of rules that determines whether a given interaction should be performed or not.

Actions

An action is what happens after the interaction is triggered. It can apply to the same element as a trigger or to other elements on the canvas. In the Actions menu, you’ll see the following options:

  • Go to page – links to another page in your prototype
  • Hide – turns off the visibility of the layer
  • Show – turns on the visibility of the layer
  • Toggle – shows and hides a selected layer
  • Set state [available only for State elements] – switches the multistate to the specified state
  • Set variable – sets the variable as value or content of the element
  • Scroll to – scrolls to a selected layer

Click More to see more options depending on the type of elements you have on your canvas:

  • Go to URL – links to an external page;
  • Go back – links to the previous page in the sitemap.
  • API Request – allows you to make HTTP requests (GET or POST) to third party API services.
  • Move to/ Move by – moves the layer to/by the position specified on Y and X axes.
  • Opacity – changes the transparency of the layer to the given value.
  • Size – increases or decreases the size of the layer to the specified values.
  • Color – changes the fill, border or font to the specified color.
  • Rotate – rotates the layer to or by a specific value of degrees.
  • Advanced – allows to add advanced animations to elements.
  • Bring to front/ Bring to back – moves the layer in front of all other layers or behind them.
  • Next state/Previous state – switches the multistate to the next or previous state;
  • Focus – brings the form element into focus.
  • Enable/Disable – enables or disables the form element;
  • Check/Uncheck – marks the checkbox as checked or unchecked;
  • Set content – sets the content of the element as value or value of the variable. Find out more about variables.
  • Play – sets a video to play.
  • Pause – pauses a video.
  • Stop – stops a video.

Animations

Take your simple interactions to the next level with our intuitive and quick-adjust animation editor that lets you control the way each transition from start to finish.

Easing lets you control how the interaction is performed over time. Choose one of the following effects:

  • Linear – reflects constant speed and steady movement from point A to B;
  • Ease In – starts slow and accelerates at the end;
  • Ease Out – starts quickly and slows down at the end;
  • Ease In Out – starts slow, gains speed and then slows down at the end.

For each easing you can also define its curve to simulate the natural movement, similar to real-life objects.You can choose from the following curve types:

Tip

You can define the Amplitude and Springness for the Elastic curve.

Duration and Delay Use the text fields to define duration and delay.

Delays are specified in milliseconds, so 1000ms equal 1s. Small UI animations tend to have 200-300ms delays while more complex effects usually work better with 400-500ms ones.

Loop – you can loop the interaction over and over again or set a limited number of loops in the Count field.

Conditional Interactions

Conditional interactions allow creating the flows of interactions to resemble the real applications closely.

They are the system of rules to determine whether a given interaction should be performed or not. All conditions have the “if-then” structure – if the conditions are met, then the action will be executed.

In UXPin the conditions are added to specific interactions. Each interaction can have multiple conditions. In such cases, you’ll be able to specify if the interaction should be triggered once any of the conditions is met or only when all of them are fulfilled.

To add the condition, while setting the interaction click the plus icon in the Conditions section. Next, you’ll need to specify the condition settings:

  • an item to be compared – value of variable, content of the element, value or an expression;
  • the condition – the type of comparison;
  • an item to compare with – value of another variable, content of another element, another value or expression.

If you are adding an interaction to a state of an element, you will also be able to use the “Active state” name as an item of comparison.

You can use the following conditions to compare the items:

  • equals
  • doesn’t equal
  • is greater
  • is greater or equal
  • is less
  • is less or equal
  • contains
  • doesn’t contain
  • starts with
  • ends with
  • matches regex
  • doesn’t match regex
  • is empty
  • is not empty
  • is true
  • is false

Matches regex/doesn’t match regex conditions can help you validate whether the text matches the given pattern. There are seven ready-made expressions such as URL, Email, Digits, Letters, Letters and Digits, No spaces, Strong password. Also, you can specify a custom regex. See more about regular expressions in expressions tutorial.

"if-else" Conditions

Once you add a conditional interaction, you’ll be able also to determine secondary interactions triggered when the primary conditions are not met.

In order to do so, first, create another interaction for the same element which specifies what actions should be triggered in such a case (it doesn’t need to include any conditions). Next step is to connect the interactions — hover over the secondary interaction in the Interactions section and choose Else from the drop-down visible above.

As a result, the interactions will be linked and they’ll be performed according to the specified rules. This option can be used to create complex flows such as validation forms where the button is switched to different states depending on whether all fields in the form are filled or not.

In the case of “If-else” interactions, the primary interaction should always appear above the secondary one on the list. Otherwise, the conditions won’t be evaluated.

You’ll be able also to change the order of the interactions if needed — it’s enough to grab the interaction and move it to the desired place.

Copying Interactions

There are two ways to copy interactions in UXPin.

  1. To duplicate an interaction already added to an element, open the Interactions section and click the Duplicate interaction icon — this way you’ll get identical interaction set for the element and you’ll be able to edit it further.
  2. To copy an interaction from one element into another, select the element on the canvas and choose Copy interaction from the context menu. If there are more interactions added, you’ll be able to copy all of them or choose the specific one only.

Then, select another element and choose Paste interaction option from the context menu. You can also use the Ctrl "Shift" "C" and Ctrl "Shift" "V" shortcuts.

Additionally, you will be able to copy the interactions between different pages and prototypes. Please note that this option is possible only when both the trigger and the action apply to the same element.

Interaction indicator

Each interactive element placed on the canvas is marked with a Thunderbolt icon to help you easily identify which elements have interactions. The indicator is visible in the layers panel as well.

The indicator is enabled by default — you can disable it in View options or with Alt "I" .