You want to gather feedback on a design and want to embed a Figma prototype into your form or survey ? You've come to the right tutorial!
We'll start by quickly touching on the UI-design aspect of our survey. More specifically, to embed a Figma prototype into your survey you'll need to the use "Embed HTML" form element in the weavely plugin.
Visually this form element is shown as a grey rectangle once you add it to a form page in your design. The size and location of the rectangle indicate where your Figma prototype will be rendered. In our example we've also added a simple scale rating below the prototype.
Moreover, we've also created a simple two-page prototype which we'll use as an example for this tutorial.
To embed your prototype into your form you'll need to copy your prototype's "embed code" (generated by Figma). You can do this as follows:
Notice that we make sure that the prototype is set to "Fill screen".
Once you have obtained this embed code you can paste it into the "Embed HTML" form element's configuration inside the Weavely plugin as such:
Once the Figma prototype's embed code has been pasted into the form element's "Snippet" configuration we ensure that its width and height are set to "100%" to ensure that the embedding respects our survey's design.
The result for our example survey is showcased below. This simple embedding enables respondents to interact with your prototype directly inside the survey, or run it full screen and easily return to the survey.
