How do I use the Designs tab in Prototype Testing?

This section covers how to use the Design tab to:

• Build your prototype in the prototype editor
• Import your prototype from Figma with the prototype link
• Import your prototype from Figma with our plugin

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 percentages or in pixels) and alignment on the screen.
• You can replace the design with 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 are not visible to respondents; they only flash briefly when the respondent clicks a 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 are 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 Figma 

Prototype Testing makes it easy to use a prototype you’ve already created in Figma.

You can import your Figma prototype into UXtweak either by using a Figma share link or through our Figma plugin. Both options are supported.

The plugin can be especially helpful if your prototype is more complex. It lets you import just a specific flow rather than the whole Figma page, supports external components and sections, and handles structured designs more reliably. It also works without requiring you to log into Figma from within UXtweak.

Import using our plugin 

To import your prototype using the plugin, you’ll need to:

Import using the prototype link 

To import your prototype using a link, you’ll need a public sharing link to the Figma file.

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.

If your prototype preview cannot load 

If UXtweak cannot load the preview of your Figma prototype, check the link you shared.

Make sure that the sharing permissions of the design are set to “Anyone with the link can view.”

If you shared the prototype directly, return to the Design view, click Share, and set the permission to “Anyone with the link can view.”

Testing Figma Make Prototypes in UXtweak 

Figma Make creates reactive, code-based applications. Because these behave like live software rather than static design frames, they require a specific setup within UXtweak.

Choose one of the following three workflows based on your technical needs:

Method 1: Website Testing (Via Figma-Hosted URL) 

This is the most direct way to test a Figma Make app. You will treat the published prototype as a live website.

• Publish: Click Publish in the top-right corner of Figma Make to generate a public URL.
• Study Setup: Create a Website Testing study in UXtweak.
• Domain Targeting: In the Tested Website field, enter the domain or subdomain of your published link (e.g., figma.site).
• Tracking Method: Select the Browser Extension option during study launch. Since you cannot manually inject code into Figma’s servers, the extension will handle the tracking for your participants automatically.
• Important Note (SPA): Figma Make prototypes are Single Page Applications (SPAs). Because the URL usually remains the same while the user interacts with the app, you will not be able to track a user path or success rate through different URLs.

Method 2: Website Testing (Self-Hosting) 

Choose this method if you want to avoid requiring participants to install a browser extension.

1. Export & Inject: Export the code from Figma Make and manually paste the UXtweak Tracking Snippet into the <head> of your project. For more information about launching UXtweak Website Testing study, please refer to the related article.
2. Deploy: Host the app on your own server or a staging environment (e.g., Netlify, Vercel).
3. UXtweak Setup: Choose the Snippet option when launching the study.
4. Benefit: Participants can use any browser and won’t need to install anything, as the tracking is built directly into the app’s code.

Method 3: Converting to Figma Design (Prototype Testing) 

If you need specific UX metrics like Success Rates, Paths, or Lostness Metric, you should use the dedicated Prototype Testing tool.

1. Move to Design: Use the button in Figma Make to copy the designs into a standard Figma Design file.
2. Rebuild Logic: Code-based interactions from Figma Make do not carry over. You must manually create the prototype connections in Figma’s Prototype tab.
3. Standard Import: Use the UXtweak Prototype Testing tool to import the file via UXtweak Figma Plugin.
   • This bypasses the need for the browser extension or website snippets and provides the most detailed task-based analytics.