Releases3 min read

What’s New? QR Code Scanner

Make your prototypes even more expressive by adding QR code-enabled interactions. This is now possible in ProtoPie 7.6, thanks to the new QR Code Scanner.

Patricia Franciskovic
Patricia Franciskovic, Customer Success ManagerMarch 22, 2023
ProtoPie QR code scanner feature

Our new release ProtoPie 7.6 brings in an exciting feature: QR code scanner.

Scan real QR codes using ProtoPie's Camera feature and unlock a wealth of smart interactions. For example, you can scan a QR code to open a webpage or trigger a wide range of other actions in your prototype.

With the new QR code scanner, you can unleash your creativity and make your ProtoPie prototypes even more expressive and realistic!

The QR code scanner feature is available to all ProtoPie users, regardless of their plan.

How to Generate QR Codes

You can create your own QR codes for free on QR Code Generator, and scan them within ProtoPie.

How to generate QR codes on QR Code Generator
How to generate QR codes on QR Code Generator

How to Enable the QR Code Scanner in ProtoPie

Activate the QR code scanner option in either:

You can overlay an image on your QR code by placing it on top of the Camera layer.

enabling qr code scanner in ProtoPie
How to enable the QR code scanner

The QR code scanner has two capabilities:

  • Open URL Immediately
  • Keep Tracking

Let's examine in detail what each option enables.

Using “Open URL Immediately”

The "Open URL Immediately" option in ProtoPie allows you to scan a QR code and open a link directly in a web browser.

Use this feature creatively to prototype popular mobile interactions, such as scanning a QR code to open a video or initiate a payment transaction.

Open URL Immediately
Open URL Immediately

Using “Keep Tracking”

The "Keep Tracking" option enables you to monitor values stored in your QR code.

ProtoPie lets you store QR code values in predefined variables and use them dynamically in formulas.

Here is a list of the QR code predefined variables that we currently support:

  • $qrValue
  • $qrHeight
  • $qrWidth
  • $qrX
  • $qrY

Storing QR code values in predefined variables opens up many interaction design possibilities! For example, you can store a QR value and display the information it contains in another scene. Or you can animate layers based on the QR code’s position and size, as in this prototype example here below.

using the keep tracking option in ProtoPie's QR code scanner
Keep tracking

In this prototype, the overlay icon scales and moves based on the X/Y coordinates and width/height of the QR code. To see how this effect was created using the new QR code predefined variables, download the prototype here and open it in ProtoPie Studio!

Unleash your creative potential with ProtoPie

ProtoPie is a high-fidelity prototyping tool that integrates seamlessly with your designer workflow. Transform your interaction design ideas into high-fidelity prototypes for any digital product imaginable!