How to test your Figma prototype with UXtweak

Testing your Figma prototypes in the early stages of the design process can uncover all the downsides of your designs long before the development process and save you and your company tons of money and time. And it can be pretty simple too, all you need is the right tool! Lucky for you, testing your Figma prototype is a piece of cake with UXtweak. The whole study can be set up in just a few simple steps, and we’ll show you exactly how.

You can check out the whole process in this video, or go step by step with our guide tutorials bellow.

Importing your Figma prototype into UXtweak

Importing your prototype:

1. 1. 1. When you open your design file in Figma, click Share prototype in the upper right corner.
      2. Make sure that Anyone with a link can view the prototype.
      3. Click the Copy link button.
      4. Create a new Prototype Testing study in UXtweak.
      5. Insert the link into the Prototype link field in the Designs Tab and click Import. 
      6. You will be asked to log into your Figma account if you haven’t yet.
      7. Click Allow access so that UXtweak can download your prototype.

If you’re having trouble importing your prototype into UXtweak, please make sure to check our quick guide on How to prepare your Figma prototype for Prototype Testing.

Linking your prototype designs together 

If you haven’t yet defined the navigation flow between frames in Figma, you can now do this with Hotspots directly in UXtweak. Hotspots are invisible rectangle links between designs that let your participants explore your designs as a fully interactive prototype.

Connecting static designs to each other via hotspots:

1. 1. 1. Click on the design that you want to start with.
      2. Click-and-drag wherever on your prototype where you wish to create a hotspot. 
      3. Define which design clicking the hotspot should lead to in a popup window. 
      4. Label the hotspot in the right panel.
      5. And repeat.

Once you’re done with defining the navigation flow between your frames, you’re ready to start setting up your study.  

Defining tasks for your participants to complete

Now to the fun part! Let’s set up your tasks to see how well respondents can use the interface to achieve their goals.

Tips for writing good tasks:

1. 1. 1. Phrase them like a scenario that the respondents can imagine finding themselves in.
      2. Don’t spoon-feed your respondents a solution. Make them think about the tasks.
      3. Write the tasks instructions in a way that won’t box your respondent’s thinking in a certain way.
      4. To learn more about writing good tasks, check out our detailed guide.

Setting up your tasks:

1. 1. 1. Write the text of your task.
      2. Select on which design the task is going to start and on which design the respondent should end up to successfully complete the task.
      3. In the lostness metric, define the optimal number of designs the respondent should go through to complete the task. This will be used to calculate how much people are getting lost during the task.
      4. Adjust the tasks to match your personal needs – randomize the order of tasks, let the respondents skip tasks, etc.

Recruiting respondents for your Prototype Testing study

There are a number of ways you can recruit respondents for your research.

With UXtweak, you can choose between 3 different options for recruiting participants for your study:

1. 1. 1. To recruit your participants for the study, you can simply just copy the link to your study and share it with whomever you want to – use social media, your newsletter… Just make sure to launch your study first. 😉
      2. You may also take the advantage of UXtweak’s Recruiting Widget, which allows you to recruit your real users as study participants directly from your website for free.
      3. Another alternative is to choose from UXtweak’s 155M+ User Panel to select the exact demographics you need for your study.

Start testing today to get real user insights and create products with great UX from the very beginning of the development process!