Figma: Get Greater Feedback on your Prototype

Overview

As a product manager, you are always wanting more input earlier in the development and brainstorming process to ensure you are solving the right customer pain. Now, Pendo and Figma give you the power to bring your wireframes and prototypes right where your customers live - in your app. Data shows it’s possible to get higher response rates and more precise feedback when customers are in the moment.  For example, after using Pendo to measure an area of your product you want to redesign, you can now target users that frequent that area with a Figma prototype right in your app. That segment of customers will give the best feedback as they are experts in that part of the product.

Ingredients (What You Need)

  • Pendo account with Guidance
  • Figma 

 

Benefits

  • Increase response rates to your prototype
  • Use usage and behavioral data to better target to get more meaningful feedback

 

How To Make It

In Figma:

  1. Open the file you want to embed in a Pendo Guide.
  2. To link to a specific frame in the Figma file, select the frame you'd like to embed.
  3. Click the Share button in the toolbar.
  4. Check the box to Link to selected frame (Optional)
  5. Update your Link Sharing permissions to determine who can interact with the embed (Optional).
  6. Click Get Embed Code.mceclip0.png
  7. Click the button to copy the public embed code provided.mceclip2.png

In Pendo:

  1. Log in to Pendo and navigate to the Guides section.
  2. Click the Create Guide button.mceclip4.png
  3. Select the How Can We Improve? Open Text Poll template.
    mceclip5.png
  4. Name your Guide and then select Manage in my app.mceclip7.png
  5. Enter your app’s URL and click Launch Designer.mceclip8.png
  6. Above the text box in your guide template click the blue plus sign to add a new guide section.mceclip9.png
  7. From the Advanced section of the Building Blocks palette select Code Block.mceclip10.png
  8. In the HTML section paste in your Figma Embed Code (you may need to adjust the width and height in the code to fit your guide). Click Done.mceclip11.png
  9. Make changes to the rest of the guide as needed (changes will be reflected in real-time).  Target where your guide is displayed using the Activation functionality.  When you’re happy click Save and then Exit to return to Pendo.mceclip12.png
  10. In the Segment section click Edit to choose a Pendo Segment or create a new one to view the guide.
    mceclip15.png
  11. Finally, publish the guide by changing it from Draft to Public.mceclip3.png
  12. Now your target segment of visitors will be presented with the Figma prototype directly in your app for feedback. Congratulations!