Build your prototype in the prototype editor ![\"Copy](\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\")
<\/a><\/h2>\n\n\n\n- The prototype editor found in the Designs tab allows you to upload your designs as images and use them to manually build your prototype.<\/li>\n\n\n\n
- 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.<\/li>\n\n\n\n
- 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.<\/li>\n<\/ul>\n\n\n\n
Click a design to edit its appearance and behavior within the prototype.<\/p>\n\n\n\n
\n- You can adjust how the design will appear by modifying its size (defined in percentages or in pixels) and alignment on the screen.<\/li>\n\n\n\n
- You can replace the design with a different image by uploading an image file in the Replace image <\/strong>field.<\/li>\n\n\n\n
- Hotspots<\/strong> 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.<\/li>\n\n\n\n
- You have the option to enable<\/strong> or disable Preview mode<\/strong>. This adjusts how hotspots<\/strong> behave while you are editing your study.<\/li>\n\n\n\n
- With Preview mode<\/strong> 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\u2019ll be redirected to the linked design, just like a respondent would be.<\/li>\n\n\n\n
- With Preview mode disabled<\/strong>, 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.<\/li>\n\n\n\n
- All created hotspots are listed below the Create hotspot<\/strong> button. You can adjust their names and target designs here.<\/li>\n\n\n\n
- Click the Show thumbnails<\/strong> to view thumbnails of all your designs and move quickly between your designs without leaving the prototype editor. You can also use the Previous<\/strong> and Next<\/strong> buttons to move between designs.<\/li>\n<\/ul>\n\n\n
Import your prototype from Figma <\/a><\/h2>\n\n\nPrototype Testing makes it easy to use a prototype you’ve already created in Figma.<\/strong><\/p>\n\n\n\n \n You can import your Figma prototype into UXtweak either by using a share link<\/strong> or through our Figma plugin<\/strong>. Both options are supported. The plugin can be especially helpful if your prototype is more complex\u2014it lets you import just a specific flow<\/strong> rather than the whole Figma page, supports external components and sections<\/strong>, and handles structured designs more reliably<\/strong>. It also works without requiring you to log into Figma<\/strong> from within UXtweak.<\/div>\n <\/div>\n\nImport using our plugin <\/a><\/h3>\n\n\nTo import your prototype using the plugin, you’ll need to:<\/p>\n\n\n\n
\n Step 1<\/span>\n\n Open the Figma file<\/strong> that contains the prototype you want to import.<\/p>\n <\/div>\n \n\n \n Step 2<\/span>\n\n Click \u201cShare\u201d<\/strong> in the top-right corner and copy the file link<\/strong>. Make sure the sharing setting is set to \u201cAnyone with the link can view.\u201d<\/strong><\/p>\n <\/div>\n \n\n \n Step 3<\/span>\n\n Go to UXtweak<\/strong> and paste the link when prompted. UXtweak will display a special plugin link.<\/p>\n <\/div>\n \n\n \n Step 4<\/span>\n\n Open the UXtweak Figma plugin<\/strong> and paste the plugin link<\/strong> into the plugin.<\/p>\n <\/div>\n \n\n \n Step 5<\/span>\n\n Select the flows you want to import<\/strong> from the current page and click \u201cImport.\u201d<\/strong><\/p>\n <\/div>\n \n\n \n Step 6<\/span>\n\n Your prototype will be automatically imported into UXtweak.<\/strong><\/p>\n <\/div>\n <\/div>\n\n\n \n \n ![\"Get](\"https:\/\/img.youtube.com\/vi\/woU834LH9Hs\/mqdefault.jpg\")
\n
Click a design to edit its appearance and behavior within the prototype.<\/p>\n\n\n\n
- \n
- You can adjust how the design will appear by modifying its size (defined in percentages or in pixels) and alignment on the screen.<\/li>\n\n\n\n
- You can replace the design with a different image by uploading an image file in the Replace image <\/strong>field.<\/li>\n\n\n\n
- Hotspots<\/strong> 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.<\/li>\n\n\n\n
- You have the option to enable<\/strong> or disable Preview mode<\/strong>. This adjusts how hotspots<\/strong> behave while you are editing your study.<\/li>\n\n\n\n
- With Preview mode<\/strong> 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\u2019ll be redirected to the linked design, just like a respondent would be.<\/li>\n\n\n\n
- With Preview mode disabled<\/strong>, 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.<\/li>\n\n\n\n
- All created hotspots are listed below the Create hotspot<\/strong> button. You can adjust their names and target designs here.<\/li>\n\n\n\n
- Click the Show thumbnails<\/strong> to view thumbnails of all your designs and move quickly between your designs without leaving the prototype editor. You can also use the Previous<\/strong> and Next<\/strong> buttons to move between designs.<\/li>\n<\/ul>\n\n\n
Import your prototype from Figma
<\/a><\/h2>\n\n\nPrototype Testing makes it easy to use a prototype you’ve already created in Figma.<\/strong><\/p>\n\n\n
\n \nYou can import your Figma prototype into UXtweak either by using a share link<\/strong> or through our Figma plugin<\/strong>. Both options are supported. The plugin can be especially helpful if your prototype is more complex\u2014it lets you import just a specific flow<\/strong> rather than the whole Figma page, supports external components and sections<\/strong>, and handles structured designs more reliably<\/strong>. It also works without requiring you to log into Figma<\/strong> from within UXtweak.<\/div>\n <\/div>\n\nImport using our plugin
<\/a><\/h3>\n\n\nTo import your prototype using the plugin, you’ll need to:<\/p>\n\n\n\n
\n Step 1<\/span>\n\nOpen the Figma file<\/strong> that contains the prototype you want to import.<\/p>\n <\/div>\n \n\n
\n Step 2<\/span>\n\nClick \u201cShare\u201d<\/strong> in the top-right corner and copy the file link<\/strong>. Make sure the sharing setting is set to \u201cAnyone with the link can view.\u201d<\/strong><\/p>\n <\/div>\n \n\n
\n Step 3<\/span>\n\nGo to UXtweak<\/strong> and paste the link when prompted. UXtweak will display a special plugin link.<\/p>\n <\/div>\n \n\n
\n Step 4<\/span>\n\nOpen the UXtweak Figma plugin<\/strong> and paste the plugin link<\/strong> into the plugin.<\/p>\n <\/div>\n \n\n
\n Step 5<\/span>\n\nSelect the flows you want to import<\/strong> from the current page and click \u201cImport.\u201d<\/strong><\/p>\n <\/div>\n \n\n
\n Step 6<\/span>\n\nYour prototype will be automatically imported into UXtweak.<\/strong><\/p>\n <\/div>\n <\/div>\n\n\n
\n\n\n - Hotspots<\/strong> 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.<\/li>\n\n\n\n