When designing a product, one of the key phases is usability testing. It’s important to put your designs in front of potential users and gather feedback. To do this, you’ll no doubt need a prototype. However, not all prototypes are created equal, and there are several factors that will determine what kind of prototype you can use, and the results you’ll obtain.
In this post, we’ll look at different types of prototypes and how to go directly from Figma designs to a high-fidelity HTML prototype.
Which type of prototype is best?
When considering a high-fidelity prototype, there are typically two options: Figma or HTML. Let’s take a look at the differences between the two…
Prototyping in Figma
The main advantage of a Figma prototype is that most designers can create one without the need to know how to code. It’s usually faster and cheaper to create a Figma prototype, however it does have a few limitations…
While Figma’s prototyping features are getting more and more advanced, a Figma prototype still won’t be as realistic as an HTML prototype. For example, users won’t be able to fill out a form, or use a screen reader. This will ultimately make your research results less reliable or insightful.
Another disadvantage of prototyping in Figma is that the hand off to development isn’t always very efficient. A Figma prototype requires more effort from developers to translate your designs into actual software, and will likely lead to a lot of back and forth between teams.
Prototyping in HTML
On the flip side we have an HTML prototype. The main drawback of prototyping in HTML is that most designers don’t know how to code, making this kind of prototype more costly, and often time-consuming, to create.
The result, however, is a prototype that is much closer to reality and, in many cases, identical to what user would see with the final product. Users can interact with the prototype in the same way they would with the real thing, making the feedback much more reliable.
Because this kind of prototype already requires code, there’s a lot less work for development to turn it into the final product, and developers can get a much more accurate picture of what designers want or intend.
So now you may be wondering: how can I create an HTML prototype if I don’t know how to code? Let us show you…
How to go from Figma to HTML prototype
1. Design in Figma
Design the screens of your prototype in Figma as you would usually, using all your favorite Figma features. Make sure to use auto layout to make it responsive, so you can later test your website or product at different breakpoints.
2. Runfigma.to.website
Next, run the Figma plugin figma.to.website. Add each section with its corresponding webpage to the plugin, and configure the settings you’ll need for your website (aka HTML prototype). Before going live, you can use the preview option to see what your site will look like once it’s published.
3. Publish your site for a high-fidelity HTML prototype
When you’re ready, hit ‘Publish’. Your designs will be automatically published as a live, hosted website which you can navigate, interact with and use as a high-fidelity prototype or even as the real thing! The best part: simply share the link to your site for others to test it, without the need for any additional tools, coding or complicated set-up.
Benefits of testing with an HTML prototype
Responsive design and real content
One of the key benefits of an HTML prototype is how close it is to the real, final product. You can show actual content, and users can input real data, because the prototype is a fully-functional product or website in itself. The prototype will also be fully responsive so you can test your designs for any device and break point.
Better insights
The more realistic your prototype, the more accurate and insightful your research findings and feedback will be. When users can try your product as if they were using the real thing, you’ll quickly see where things fail and what problems need to be solved. By turning your designs into an HTML prototype with figma.to.website, all you need to do is share a link with users and they can navigate and interact with your product as if it was the real thing.
Bridge the design-development gap
Another bonus of an HTML prototype is that it makes development hand-off much more efficient. Developers get more detailed specifications and can even re-use some of the HTML in development. When publishing your designs with figma.to.website, for example, you can show developers a live, fully-functioning website, making it much easier to explain your design ideas and even do a lot of the work for them.