{"id":2296,"date":"2025-05-20T11:46:54","date_gmt":"2025-05-20T11:46:54","guid":{"rendered":"http:\/\/localhost:8091\/the-definitive-guide-to-creating-effective-first-click-test\/how-to-prepare-and-troubleshoot-your-figma-prototype-for-prototype-testing\/"},"modified":"2025-05-21T05:34:58","modified_gmt":"2025-05-21T05:34:58","slug":"prototype-testing-figma-optimization","status":"publish","type":"page","link":"https:\/\/www.uxtweak.com\/help\/prototype-testing-figma-optimization\/","title":{"rendered":"How to prepare and troubleshoot your Figma prototype for Prototype Testing?"},"content":{"rendered":"\n<p class=\"text-block\">Before you import your Figma prototype into UXtweak&#8217;s Prototype Testing, it&#8217;s good to make sure that everything in your prototype is in the right order and has been properly adjusted to accomodate testing. Read further to learn how to import Figma prototypes efficiently and decrease the load times of your prototype for your respondents.<\/p>\n\n\n<h2 id=\"get-your-prototype-ready-for-import\" class=\"heading-block\" tabindex=\"0\">Get your prototype ready for import<a class=\"copy-link\" title=\"Copy link\" data-id=\"get-your-prototype-ready-for-import\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Before you start preparing your Figma prototype for testing, we recommend that you<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">make a copy of your prototype that will be used in testing<\/b>. That way, you will keep the original even if you make adjustments specific to testing.<\/p>\n\n\n\n<p class=\"text-block\"><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Your prototype should be made up from Frames<\/b>. UXtweak converts individual frames on the top level into designs in Prototype Testing. All components of a design should be included inside a Frame. There shouldn&#8217;t be any elements left outside Frames, or UXtweak may not interpret them as you would expect.<\/p>\n\n\n\n<p class=\"text-block\">If your Figma file is made up of multiple Pages,<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">make sure to note down the name of the page you would like to import<\/b>. You will be asked to do so in the import process.<\/p>\n\n\n<h2 id=\"how-to-get-link-to-the-figma-prototype-that-i-can-import\" class=\"heading-block\" tabindex=\"0\">How to get link to the Figma prototype that I can import?<a class=\"copy-link\" title=\"Copy link\" data-id=\"how-to-get-link-to-the-figma-prototype-that-i-can-import\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Click the<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Share<\/b><span>\u00a0<\/span>button and make sure that<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Anyone with a link<\/b><span>\u00a0<\/span>can view your prototype.<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/1-91.png\" alt=\"Share button in Figma\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Share button in Figma<\/h4>\n                                                    <p>Click this button in your prototype in Figma to access the correct share link. Make sure that you are in the prototype, not the design file.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n\n<p class=\"text-block\">Then click <strong>Copy link<\/strong>.<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/2-72.png\" alt=\"Sharing setup\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Sharing setup<\/h4>\n                                                    <p>Here you can set up how your prototype should be shared. Make sure, that it is set to &#8220;Anyone with the link&#8221; can view.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n\n<p class=\"text-block\">If your company prohibits public sharing of prototypes, you need to follow these steps to import your prototype:<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li>Prototype is set in Figma to \u201c<b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">only people invited to this file can access<\/b>\u201d<\/li>\n\n\n\n<li><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Log in to the Figma account, which is the owner of the Prototype<\/b><span>\u00a0<\/span>in the same browser window as you have your Prototype Testing study setup opened in. These two email addresses must be the same:<\/li>\n<\/ul>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/3.jpeg\" alt=\"Prototype owner address\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Prototype owner address<\/h4>\n                                                    <p>When importing the prototype set to &#8220;only people invited to this file can access&#8221; these two email addresses &#8211; the owner of the Figma file and the account in Figma to which you are logged in, must be the same<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    \n\n    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/35.png\" alt=\"Figma login address\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Figma login address<\/h4>\n                                                    <p>When importing the prototype set to &#8220;only people invited to this file can access&#8221; these two email addresses &#8211; the owner of the Figma file and the account in Figma to which you are logged in, must be the same<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n<h2 id=\"optimize-your-prototype\" class=\"heading-block\" tabindex=\"0\">Optimize your prototype<a class=\"copy-link\" title=\"Copy link\" data-id=\"optimize-your-prototype\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">If your prototype takes longer than a minute to import, you should consider the below steps to optimize your prototype for import. These modification will make your prototype import faster during study setup, as well as load efficiently for your respondents. Quick loading helps avoid frustration. More respondents will be willing to participate if you&#8217;re respectful to their download volume (some may be using limited data plans).<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Trim unnecessary content from your prototype.<\/b><span>\u00a0<\/span>Get rid of Frames, Pages, and other elements which aren&#8217;t part of your testing and aren&#8217;t going to be seen by respondents. A bloated prototype file may take unreasonably long to import and not open for some respondents at all.<\/li>\n\n\n\n<li><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Minimize your prototype.<\/b><span>\u00a0<\/span>The more Frames, Pages and other elements your prototype has, the longer it will take to import. With huge prototypes, reconsider reorganizing your testing, by scaling down into multiple studies with smaller prototype files.<\/li>\n\n\n\n<li><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Reduce the size of images.<\/b><span>\u00a0<\/span>Images are one of the main culprits of bloated prototype files. Figma doesn&#8217;t do image compression by itself, so before you upload an image into Figma, you should make sure it isn&#8217;t in unnecessarily large resolution. If you need to insert large photos, consider using JPEG instead of PNG.<\/li>\n<\/ul>\n\n\n<h2 id=\"troubleshooting\" class=\"heading-block\" tabindex=\"0\">Troubleshooting<a class=\"copy-link\" title=\"Copy link\" data-id=\"troubleshooting\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h2>\n\n\n<p class=\"text-block\">Below you can find some of the most frequent cases, which can happen, and how to address them.<\/p>\n\n\n<h3 id=\"check-for-proper-sharing-of-the-prototype\" class=\"heading-block\" tabindex=\"0\">Check for proper sharing of the prototype<a class=\"copy-link\" title=\"Copy link\" data-id=\"check-for-proper-sharing-of-the-prototype\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h3>\n\n\n<p class=\"text-block\">When start importing your Figma prototype into your Prototype Testing study, the first step which will take place is \u201cChecking your prototype\u201d:<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/4-30.png\" alt=\"The first step of import process\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>The first step of import process<\/h4>\n                                                    <p>In this step UXtweak accesses the prototype on Figma, before downloading it. Any complications in this step are most likely connected to incorrect sharing of the prototype from Figma.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n\n<p class=\"text-block\">If the import is interrupted in this step, your prototype is most likely not shared properly.<\/p>\n\n\n\n<p class=\"text-block\">The link to your figma prototype is always structured as follows:<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">https:\/\/www.figma.com\/proto\/{PrototypeID}\/{queryparameters}<\/b>.<\/p>\n\n\n\n<p class=\"text-block\">There are<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">two checks<\/b><span>\u00a0<\/span>to confirm your prototype is shared properly. Both of these checks<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">require opening an incognito or similar window<\/b><span>\u00a0<\/span>in your browser:<\/p>\n\n\n\n<ul class=\"bullet-list\">\n<li><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Check number 1<\/b>: take the link of your prototype and<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">delete the query parameters portion<\/b>. If this edited link will load and the query parameters are automatically added back, then your prototype is shared properly. If not, then your link is most likely not publicly shared.<\/li>\n\n\n\n<li><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">Check number 2<\/b>: take the link of your prototype and<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">exchange the \/proto\/ portion of the URL for \/design\/<\/b>. If this can be accessed, it most likely means that your prototype is shared with the option \u201ccan view prototype\u201d instead of \u201ccan view\u201d .<\/li>\n<\/ul>\n\n\n<h3 id=\"password-protected-prototype\" class=\"heading-block\" tabindex=\"0\">Password protected prototype<a class=\"copy-link\" title=\"Copy link\" data-id=\"password-protected-prototype\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h3>\n\n\n<p class=\"text-block\">If you include a password in your prototype on Figma, it shouldn\u2019t influence the import in any way. However, you would need to put in the password to preview the prototype on the Designs tab or in the preview mode.<\/p>\n\n\n\n<p class=\"text-block\">The participants will need to put in the password during their participation as well. If they are using Chrome browser and never opened a Figma website on that browser before, they might need to do so in a separate tab, to agree to Figma cookies. This case can be easily identified by the participants not being able to put in the password in the Figma modal.<\/p>\n\n\n<h3 id=\"access-denied\" class=\"heading-block\" tabindex=\"0\">Access denied<a class=\"copy-link\" title=\"Copy link\" data-id=\"access-denied\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h3>\n\n\n<p class=\"text-block\">When you try to import your Figma prototype and encounter the following modal:<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/5-19.png\" alt=\"Access Denied\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>Access Denied<\/h4>\n                                                    <p>This modal shows up in cases, when you are logged in to an account in Figma, which isn&#8217;t an owner of a protected prototype, you are trying to import.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n\n<p class=\"text-block\">It means the prototype is set to<span>\u00a0<\/span><b style=\"box-sizing: inherit; -webkit-tap-highlight-color: transparent;\">\u201conly people invited to this file can access\u201d<\/b><span>\u00a0<\/span>and you are logged in a Figma account, which is not the owner of the prototype. To finish the import, you will need to switch your Figma account to the account, which is the owner of the prototype.<\/p>\n\n\n<h3 id=\"library-components\" class=\"heading-block\" tabindex=\"0\">Library components<a class=\"copy-link\" title=\"Copy link\" data-id=\"library-components\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h3>\n\n\n<p class=\"text-block\">Components imported in the Figma file from a design library are just a shallow copy from the library and aren&#8217;t included with all structure sections of the element. In this case only variant names are imported instead of the full variant children, which are necessary to properly track the interactions in the setup of paths and recording of the interactions. As a solution we suggest copying the component into the same file and creating instances of this deep copy instead of the instances from the library version of the component.<\/p>\n\n\n<h3 id=\"errors-during-prototype-import\" class=\"heading-block\" tabindex=\"0\">Errors during prototype import<a class=\"copy-link\" title=\"Copy link\" data-id=\"errors-during-prototype-import\">&nbsp;<img decoding=\"async\" src=\"https:\/\/help.uxtweak.com\/wp-content\/themes\/uxtweak\/public\/assets\/images\/icons\/link.svg\" alt=\"Copy link\" \/><\/a><\/h3>\n\n\n<p class=\"text-block\">If you encounter any errors during this portion of the import, when the designs are loaded:<\/p>\n\n\n\n<div class=\"image-block\">    <div class=\"image-instance\">\n                    <img decoding=\"async\" class=\"image\" src=\"https:\/\/help.uxtweak.com\/wp-content\/uploads\/2025\/05\/6-11.png\" alt=\"The second step of import\" \/>\n                <div class=\"right-container\">\n            <div class=\"text\">\n                                    <h4>The second step of import<\/h4>\n                                                    <p>This portion of import is the actual download of the prototype from Figma to UXtweak.<\/p>\n                            <\/div>\n            <div class=\"links\">\n\n            <\/div>\n        <\/div>\n    <\/div>\n    <\/div>\n\n\n\n<p class=\"text-block\">Please contact our support team to help you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before you import your Figma prototype into UXtweak&#8217;s Prototype Testing, it&#8217;s good to make sure that everything in your prototype is in the right order and has been properly adjusted to accomodate testing. Read further to learn how to import Figma prototypes efficiently and decrease the load times of your prototype for your respondents. Before [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":44,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-2296","page","type-page","status-publish","hentry","category-prototype-testing"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/2296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/comments?post=2296"}],"version-history":[{"count":3,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/2296\/revisions"}],"predecessor-version":[{"id":2311,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/pages\/2296\/revisions\/2311"}],"wp:attachment":[{"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/media?parent=2296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/categories?post=2296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxtweak.com\/help\/wp-json\/wp\/v2\/tags?post=2296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}