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.

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, 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 Figma:

All (included nested) component interaction Participant paths capture changes to all components, including those nested in others.

Basic component interactions Changes to top-level (not nested) components are captured in participant paths.

Ignore component interactions Participant paths capture just navigation between frames.

After you choose the import mode, UXtweak will do the rest of the work. You should see your prototype in a preview window. It will be fully interactive.

You can choose to disable the highlighting of hotspots in your prototype, to limit the leads provided to the participants.

Resize the designs if needed.

If you make any changes to your prototype in the prototyping tool, you can click Synchronize to update the prototype in UXtweak as well.

Clicking Unlink will remove the imported prototype and allow you to import a different prototype.