How to Add a Figma Prototype to Typeform

alright so today I'll be showing you two ways that you can add a Figma prototype to your survey we're going to start out in Typeform and then we're going to have a look at a survey form builder which is made specifically for Figma so starting with Typeform the way you go about it is well obviously first creating a new form that new form we're going to keep it simple is going to house a single question in which we're going to embed our Figma prototype and we're going to ask a user to rate the ease of use on a scale from 1 to 10 right it's way too basic to do any real user testing but the goal here is just to embed that figure prototype so we can actually just remove that image we're not going to need it we're going to ask rates the ease of use of the prototype it's a very generic question and obviously you need to sort of dive down into that if you want to do some real user testing but we're going to have an opinion scale here we're going to say easy no we're going to say difficult or hard and we're going to say easier than range okay now of course comes the part of actually embedding your Figma prototype so I have a took a prototype off of the community pages of this I think it's an expense app so you could tailor your question a bit more if you want to meet something very specific so for example "try to create a new expense" and then ask them to rate the ease of use but essentially we're going to hit share prototype and copy that link over here diving back into Typeform the way that you can embed that prototype is essentially by adding a link to your Typeform so that's the only way that in Typeform you can embed a Figma prototype so in this case we'll say access the prototype here and then we can add a link to this as such and then when the user is presented with your survey or your form from Typeform they can access the prototype run through it do whatever task you set them out to do go back and then rate it anyway they see fit so one of the generic questions okay so that's it for Typeform obviously that's not great ideally you would have the prototype actually render insides your survey inside your question and that's something that we're going to do with this other form building tool which is made specifically to be used by UX designers and in collaboration with Figma so we're going to dive into Figma and get going on that ends so this form building tool is called Weavely and it's available as a plugin within the Figma community pages so just like Typeform allows you to create forms and surveys so we're going to give it a name as well we're going to call it a "Figma prototype survey" we're going to start with a blank form and it's going to ask us which elements that we would want in our form so in our case we're going to have in the same sense as Typeform a scale rating and this is the crucial part we're going to add this embed HTML part to it in which we're going to be able to add our Figma prototype so we're going to click generate and what this plug in will do is it will generate us a design kit with our form elements that we can completely customize to whatever way we see fit and a number of form pages pre made that we can use to fill in we can have a multi-page form we're going to keep it simple with a single page form for this tutorial so I'm going to copy paste my question or my rating components in here we'll obviously need a submit button as well and this part is going to actually house the prototype that we're using so we're going to put it at the top and then we're going to fiddle around a bit with the auto-layout settings here make them fill our container so that we have something that looks decent we're going to say "rate the ease of use of the prototype above" we could start adding easy and uneasy here over the scale by using the auto-layout settings but I'm going to leave it at this for the moment so we're going to first slightly change the width and the height of this embed box here given that we're running with a mobile prototype that's going to make it look bit better we're going to auto layout in the center so that it's nicely centered and then we're going to dive back into our Figma prototype here get that embed code instead of the actual URL and this embed code is going to be used to embed the prototype into our form so we can paste the snippet that we got from Figma you can adjust if you want to the width and the height of your prototype so set it to 100% so that you're sure that it maximizes the screen real estates that you're provisioning here and we hit publish automatically this is going to be turned into a web form so we can go ahead copy the URL paste it into the browser and what we get out of it is of course our our scale here so we can select the ease of use but more importantly we have our prototype running and we can start actually using it have the user go through it within the actual survey so they don't need to leave the survey to run the prototype we could tweak this a bit more make the the sort of the dimensions uh match our form a bit better then we can hit the submit button and we can get that data either from within the plug in itself or we can send it to all of the tools that integrate with using Zapier so Hubspot, Notion and you name it so that's how you integrate a Figma prototype into a Typeform if you want to or into Weavely the form builder is specifically made to be used by Figma users that's all

Channel: Weavely

Views: 66

Keywords:

Id: 2d0LfQs5Zuk

Length: 6min 1sec (361 seconds)

Published: Fri Feb 02 2024