Learn how to prepare your Figma prototype before testing it in UserTesting |
This article applies to: UserTesting
On this page:
About Figma
- 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.
-
There are two ways you can test Figma prototypes with UserTesting.
- Add the Figma task to an Interaction test to understand how users navigate. Follow the test set-up steps here.
- Create a Think-out-loud test for more qualitative feedback on your prototype.
- 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.
- Click Copy link to copy your prototype's URL to the clipboard.
Note: Changing any of your prototype options will change your URL.
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.
- We recommend reducing the size as much as possible for the best testing experience.
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.
Related content
|
|
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?
|