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.
Get Figma Link to Import Your Prototype
Check out this simple guide to help you get the Figma link.
Import Your Prototype Using Our Plugin
Learn how to use the plugin effectively with this guide.
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 Your Prototype Using Figma Link
Check out this simple guide to help you import the prototype using Figma link.
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.
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.
Note: For detailed instructions on setting up this type of study, see our Website Testing Documentation.
Publish your Figma Make prototype
Click Publish in the top-right corner to host your prototype and generate a live URL for testing.
Method 2: Website Testing (Self-Hosting)
Choose this method if you want to avoid requiring participants to install a browser extension.
- 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. - Deploy: Host the app on your own server or a staging environment (e.g., Netlify, Vercel).
- UXtweak Setup: Choose the Snippet option when launching the study.
- 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.
- Move to Design: Use the button in Figma Make to copy the designs into a standard Figma Design file.
- Rebuild Logic: Code-based interactions from Figma Make do not carry over. You must manually create the prototype connections in Figma’s Prototype tab.
- 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.
Copy your designs
You can export your designs by clicking the ‘Copy design’ button in the top right of the Figma Make interface. Once copied, simply paste the screens into a standard Figma design file to begin setting up your prototype interactions.
