How to create effective UX benchmarks in Figma

Creating a UX benchmark is a crucial part of any design process. Benchmarking involves the evaluation of your website or app against a standard; such as competition, industry or even past versions. Benchmarks allow designers to not only gain inspiration, but also to compare and see how their designs stand against the rest.

However, benchmarking can be a time-consuming process. It often involves taking screenshots of each page or section that we want to include in the benchmark, and then importing those screen captures into Figma or other design tools. Plus, most benchmarks are static snapshots of a webpage, which means designers later have to recreate from scratch the elements that are interesting for their own designs.

If you’ve been tasked with a design or UX benchmark, here’s the most effective way to create one…

How to effectively create a benchmark in Figma

1. Decide what to benchmark

First step is deciding the goal of the benchmark, or what you want to measure. For example, you may redesigning the sign-up flow of your app and want to see how competitors and others in the industry have designed this flow. The most successful benchmarks are concrete in what they’re measuring or comparing.

2. Pick which websites or apps to include in the benchmark

Next step is choosing which websites or web apps you want to include in your benchmark. Most benchmarks focus on competitors or websites that are similar, however looking at industries completely different to yours can also be a great source of inspiration.

3. Run html.to.design

Look for the html.to.design plugin in Figma’s community and click ‘Try it out’. html.to.design can be a great ally for your benchmarks and helps speed up the process.

4. Enter the websites you’ve chosen

Copy the URLs for all the websites you’ve chosen to include in your benchmark and paste them into the plugin, each separated by a comma. If you need to capture a private page, for example of a web app where you need to log in, use our browser extension to import these.

5. Import

Once you’ve entered the webpages you want, click ‘Import’ and watch as all the sites are imported into Figma at once. This bulk import can save precious time as you don’t have to import each page one by one.

6. Get inspired!

You now have all the webpages or web apps you chose lined up directly in your Figma canvas. The best part? They are vectorized versions, meaning they’re fully editable so you can move elements around and extract the most interesting parts as inspiration for your own designs.

Benefits of creating benchmarks with html.to.design

Fully editable sites ✏️

Regular benchmarks using screenshots or images can only provide a static visual reference. However, benchmarks created with html.to.design offer fully editable versions of the sites, meaning you can see exactly how a particular UI effect has been made, and even extract the more interesting sections for your own designs.

Import multiple sites at once 📥

If you’re benchmarking against several websites, it can be time-consuming to import each one by hand into Figma. html.to.design offers a bulk import feature, which means you can import multiple webpages at once and have them directly lined up in your Figma canvas.

Get color and font styles 🎨

Sometimes the goal of a benchmark is to see what kind of styles other players are using, and to get inspired from the fonts and colors being used in the industry. A regular benchmark using static images doesn’t give you this information. Creating a benchmark with html.to.design does! The plugin even goes one step further and automatically creates local Figma styles for each website you imported.

No screenshots required 🖥️

We’ve already detailed why html.to.design is the best substitute for taking screenshots. The fact that you don’t need to take a single screenshot for your benchmark when using html.to.design is a big plus. No cluttered desktop or downloads folder… No need to sort through hundreds of files with similar names… No need to clean them up later when you’re done. html.to.design brings the websites you need for your benchmark straight into Figma without a single screen capture.

Ready for next-level benchmarks?

Benchmarking our website or web app against competitors and other industry players is key to improving our own designs. It’s an important part of any design process, and yet can be time-consuming when done by hand.

html.to.design offers a fast and efficient way to create design or UX benchmarks directly in Figma. In just a couple of clicks you’ll have all the websites you need lined up in your Figma canvas, ready for analysis and inspiration.

Ready to give it a try? Install the Figma plugin 👉 html.to.design