This article applies to: UserTesting
On this page:
- About Figma
- Edit prototype share settings in Figma
- Create your test in UserTesting
- Share results with the FigJam integration
- Best practices for testing Figma prototypes
- Figma is a design tool used to create interactive prototypes and build meaningful products collaboratively with your team.
- When combined with UserTesting, you can collect feedback on your Figma prototypes that generate actionable insight from your desired audience.
- The FigJam integration allows you to embed and watch UserTesting clips and session videos.
- Want to learn more about Figma? Check out the Figma Help Center.
Edit prototype share settings in Figma
- Open your design file.
- Click Play to enter presentation mode.
- In the menu bar, select Share Prototype.
- Under the Link Sharing Discovery settings, choose Anyone with the link. Refer to the Figma Help Center for security information for public links.
- Click Options in the toolbar to adjust how you want contributors to view your prototype:
- Desktop prototypes: Select Fit width.
- Mobile Prototypes: Select Fit to screen.
- Deselect these options to avoid confusion for contributors not familiar with prototypes:
- Show hotspot hints on click
- Show sidebar
- Show Figma UI
- Click Copy link to copy your prototype's URL to the clipboard.
Note: Changing any of your prototype options will change your URL.
Create your test in UserTesting
- Click Create test then Create a test.
- Choose Prototype in the What are you testing? window.
- Add your audience.
- Build your test plan.
- Remember to include any necessary context for each scenario.
- For example, prepare your contributors to interact with your prototype by explaining the following: “You will be shown a prototype, please note that not all elements on the page will be interactive.”
- For mobile tests, select the native browser requirement.
- Add the URL for your prototype to the task.
- Add as many additional tasks as you need without having to include the prototype URL for each task.
- Contributors will complete each task in the prototype URL that you initially added.
- Only add a new URL if you're using a different prototype example.
- Click Preview test plan to see the contributor view and make sure your test flows as expected.
Pro tip: Preview your test in an Incognito window to make sure it can be accessed by anyone.
- Once you've confirmed that everything is working as intended, launch your test.
Share results with the FigJam integration
- After your test is completed, bring your results to life by embedding clips, sessions, and highlight reels in your FigJam whiteboards.
- Use our FigJam integration and FigJam template.
Best practices for testing Figma prototypes
Set expectations with your contributors
- In the scenario of your test plan, tell contributors they will be interacting with a prototype that is not a fully functional site.
- Not all links will work, and the prototype may be slow to load.
Optimize the prototype for the fastest loading
- Remember that contributors are joining from their home internet connections, and not everyone has high-speed internet.
- A large, heavyweight prototype takes longer to load and can lead to contributors abandoning the test.
Create a dedicated testing file
- Duplicate your Figma file with the designs you want to test.
- In the new file, remove any pages, frames, assets, images, and elements not relevant to testing for a clean and lightweight testing file.
Set checkpoints if your prototype is complex
- If there’s an area in your prototype where someone could get lost, add checkpoints in your test.
- This prepares the user to begin each stage of your test in the right place.
- Figma supports multiple flow starting points that can achieve this.
Compress images before uploading them to Figma
- This is important if using a PNG with photographic elements that may cause large file sizes.
- Use the Downsize Figma plugin to compress large images.
Use Smart Animate sparingly
- Use Smart Animate only when needed to decrease loading time.
- Try more simple transitions that will use less RAM.
Securely share your test with contributors
- You can require your contributors to sign your company’s NDA before accepting your test if additional confidentiality is required.
- Find more information in the Figma Help Center about securely sharing public links.
Want to learn more? Check out these Knowledge Base articles...
Prefer a short video? Check out our University courses...
Need hands-on training?
Can't find your answer?
Please provide any feedback you have on this article. Your feedback will be used to improve the article and should take no more than 5 minutes to complete. Article evaluations will remain completely confidential unless you request a follow-up.