Copy link for Figma Plugin
After you paste your Figma file link into UXtweak, you’ll receive a special link. Copy it and paste it into the UXtweak Figma plugin.
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 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:
Step 1
Open the Figma file that contains the prototype you want to import.
Step 2
Click “Share” in the top-right corner and copy the file link. Make sure the sharing setting is set to “Anyone with the link can view.”
Step 3
Go to UXtweak and paste the link when prompted. UXtweak will display a special plugin link.
Step 4
Open the UXtweak Figma plugin and paste the plugin link into the plugin.
Step 5
Select the flows you want to import from the current page and click “Import.”
Step 6
Your prototype will be automatically imported into UXtweak.
Opening Figma Plugin
In Figma, go to the “Plugins & widgets” section under Actions, then search for “UXtweak.”
Pasting the link in Figma Plugin
Then, paste the link into the plugin and follow the on-screen instructions to complete the import.
Import using the prototype link
To import your prototype with a link, you’re going to need a public sharing link to your prototype first.
Step 1
Open the Figma file that contains the prototype you want to import.
Step 2
Click the “Present” button to open the prototype view.
Step 3
Click “Share prototype” and set the permissions to “Anyone with the link can view.”
Step 4
Click “Copy link.”
Step 5
Go to UXtweak, paste the link into the Prototype link field, and click “Import.”
Step 6
If prompted, log in to your Figma account and click “Allow access” which will enable an integration with Figma.
Step 7
Select the page you want to import, and you’re done!
Import options
Select the page from your Figma file you would like to import.
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.
Further prototype options
After succesfully importing Figma prototype you can choose to disable the hotspot highlighting and you can also resize the designs.
