New Business Plan with pre-paid participants! Get your participants now and save money and time.

How do I use the Designs tab in Prototype Testing?

In this help, we'll discuss how to use the Design tab to:

Build your prototype in the prototype editor
Import your prototype from a prototyping tool

Build your prototype in the prototype editor

The prototype editor found in the Designs tab allows you to upload your designs as images and use them to manually build your prototype.
To upload a design, you can drag and drop image files over the upload tile. You can also click the upload tile to open a file selection dialogue, where you can choose to upload one or multiple images at once.
Click the label below the design's thumbnail to rename the design. You can change the order of designs by dragging and dropping them by the handle in their upper left corner. To delete a design, click the trash bin icon in its upper right corner.

Click a design to edit its appearance and behavior within the prototype.

You can adjust how the design will appear by modifying its size (defined in percents or in pixels) and alignment on the screen.
You can replace the design by a different image by uploading an image file in the Replace image field.
Hotspots are interactive areas of the design that can be clicked by respondents to go to another design. Hotspots aren't visible to respondents, they only flash briefly when the respondent clicks an non-interactive area of the design, to give the respondent a hint about which areas of the design are interactive.
You have the option to enable or disable Preview mode. This adjusts how hotspots behave while you’re editing your study.
With Preview mode enabled, you can click through the prototype in the same way as respondents will be able to. When you click a hotspot with Preview mode enabled, you’ll be redirected to the linked design, just like a respondent would be.
With Preview mode disabled, you are able to draw, add, move and name hotspots. When you click a hotspot with Preview mode disabled, you will not be redirected to the linked design.
All created hotspots are listed below the Create hotspot button. You can adjust their names and target designs here.
Click the Show thumbnails to view thumbnails of all your designs and move quickly between your designs without leaving the prototype editor. You can also use the Previous and Next buttons to move between designs.

Articles in this section

Import your prototype from a prototyping tool

Prototype Testing makes it easy for you to use a prototype that you already created in a prototyping tool in your testing. Currently, Invision and Figma prototypes can be imported into UXtweak, with more tools coming soon.

First, you're going to need a public sharing link to your prototype. In InVision:

Step 1

Sign into InVision and open your document page, where you can see all of your prototypes. This should be the default page that you see after you sign in.

Step 2

Click the prototype that you want to import.

Step 3

Click the Share button.

Step 4

Click the public share link button.

Step 5

Insert the link into the Prototype link field and click Import.

In Figma:

Step 1

Sign into Figma and open your Recents page, where you can see all of your recent files. This should be the default page that you see after you sign in.

Step 2

Open the file that you want to import.

Step 3

Click the Present (play arrow icon) button located in the header

Step 4

Click Share prototype in the upper right corner.

Step 5

Make sure that Anyone with the link can view this file

Step 6

Click the Copy link button.

Step 7

Insert the link into the Prototype link field and click Import.

Step 8

You will be asked to log into your Figma account if you haven't yet. If you have, you can skip this step.

Step 9

Click Allow access so that UXtweak can download your prototype.

Step 10

Choose one of 2 presented modes in which your prototype can be displayed - One-To-One Figma mode or Simplified editable mode.

One-To-One Figma mode allows you to see all animations and transitions, exactly as they are when you view your prototype in Figma. A prototype in One-To-One Figma mode can only be edited directly in Figma, not within your Prototype Testing study itself. The speed of displaying your prototype in the study depends on Figma loading your prototype.

Simplified editable mode allows you to edit your designs directly in your study, without leaving the UXtweak app. Loading times should be faster as they don’t depend on Figma. However, simplified editable mode only supports simple navigation transitions. It cannot display complex animations and transitions.

After you choose the display mode, UXtweak will do the rest of the work. You should see your designs, including the hotspots appear in the prototype editor. (Only simple navigation transition hotspots are listed in the editor.) Please note that we cannot directly influence the loading time of your design. Loading time is dependent on several factors, such as design complexity and the prototyping tool’s server response.

If you make any changes to your prototype in the prototyping tool, you can click Synchronize to update the prototype in UXtweak as well. Note that this synchronization is one-way. Any changes that you make to designs in UXtweak will not be reflected in the prototyping tool.

If you no longer wish to synchronize your UXtweak study with a specific prototyping tool source, you can remove the connection by clicking Unlink. This will also allow you to import designs from multiple prototypes by linking each one in turn.