Interactions allow you to create simple click-through mockups or fully animated prototypes that behave almost like the real product. Use them to quickly turn your designs into functional prototypes without a line of code.
To set an interaction, click the + button in the Interactions section at the top of the Properties Panel or click the Interactions button in the top context menu.
Each interaction consists of 3 main parts:
- an element that triggers the interaction;
- a trigger;
- an action.
Additionally, you’ll be able to add optional animations.
If an element has any interactions, instead of the + button, you’ll see an indicator with a number.
Once you click it, you can start editing added interactions or create new ones.
To edit the existing interactions, choose a proper one from the list and click it – you’ll automatically enter edit mode.
A trigger is an action a user needs to perform to initiate the interaction. There are 2 basic types of triggers in UXPin: element triggers which trigger an action when a user interacts with an element and canvas triggers which set off an action when there’s a change in the canvas state.
While adding an interaction you can choose from the following element triggers:
- Click (Tap) — triggered when a user clicks or taps on a component;
- Double-click (Double Tap) — triggered when a user double-clicks or double taps on a component;
- Right-click — triggered when a user right-clicks on a component;
- Hover — triggered when a mouse pointer enters and leaves a component;
- Mouse in — triggered when a mouse pointer enters a component;
- Mouse out — triggered when a mouse pointer leaves a component;
- Swipe Left — triggered when a user swipes horizontally in right to left direction;
- Swipe Right — triggered when a user swipes horizontally in left to right direction;
- Swipe Up — triggered when a user swipes vertically in bottom to top direction;
- Swipe Down — triggered when a user swipes vertically in top to bottom direction;
- Touch and Hold — triggered when a user taps and hold their finger for more than one second;
- Hold Release — triggered when a user holds their finger for more than one second and then releases it.
While adding an interaction to the form element, you’ll be able to choose from two additional triggers:
- Focus — triggered when a component gains focus;
- Blur — triggered when a component loses focus;
- Change — triggered when a component is updated.
If you’re adding an interaction to an element of several states you will have one more option:
- State changed — triggered when a state of the element has changed.
You can also add an interaction which is triggered when there’s a change in the canvas state. If no element is selected, choose one of the canvas-specific triggers:
- Key press — triggers an interaction when the specified key is pressed;
- Windows is scrolled to — triggers an interaction when the prototype preview is scrolled to a defined height;
- Page is loaded — triggers an interaction when the page is fully loaded;
- Variable changed — triggers an interaction when the variable value is updated.
An action is a result of the triggered interaction – it can apply to the same element as a trigger or to the other elements on the canvas.
You can choose from the following actions:
- Go to page — links to another page in your prototype;
- Hide element — turns off the visibility of the layer;
- Show element — turns on the visibility of the layer;
- 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.
- Scroll to element — scrolls the page in the preview mode to the specific layer;
- Toggle — changes the visibility of the layer;
- Move by — moves the layer by a specified number of pixels on Y and X axes;
- Move to — moves the layer to 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, stroke 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 — moves the layer in front of all other layers;
- Send to back — moves the layer behind all other layers;
If you have any states, form elements or a variable on the current page, you’ll be able to choose additional actions:
- Set State — switches the multistate to the specified state;
- Next State — switches the multistate to the next state;
- Previous State — switches the multistate to the previous state.
- Disable — disables the form element;
- Enable — enabled the form element;
- Check — marks the checkbox as checked;
- Uncheck — marks the checkbox as unchecked;
- Focus — brings the form element into focus.
- Set Variable — sets the variable as value or content of the element;
- Set Content — sets the content of the element as value or value of the variable.
Read more about variables.
Interactions can be instant or they can happen over time with some animations.
Easing helps to control how the interaction is performed over time. You can add no easing at all or 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. It helps to simulate the natural movement, similar to real-life objects which don’t start and stop moving instantly or rarely move at a steady speed. You can choose from the following curve types:
For every interaction, you can choose a delay before it runs. Delays are specified in milliseconds, so 1000ms equal 1s.
Depending on the context, you can adjust the timing to help you achieve the desired visual effect — e.g. small UI animations tend to have 200-300ms delays while more complex effects usually work better with 400-500ms ones.
Additionally, you can loop the interaction infinitely or set a limited number of repetitions — just choose Count option and specify how many times the action should be replayed.
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 “Active state” name as an item of comparison.
You can use the following conditions to compare the items:
- doesn’t equal
- is greater
- is greater or equal
- is less
- is less or equal
- 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.
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 option 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.
There are 2 ways to copy interactions in UXPin.
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.
To copy the interactions from one element into another, select the element on the canvas and choose Copy interaction option 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.
Next, select another element and choose Paste interaction option from the context menu.
You can also use the Cmd+Shift+C and Cmd+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.
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 the View options or by using the Alt+I shortcut.