Previewing on a device

Tutorial Breakdown

Whether your prototype is complete or you’re still in the process of making UX and animation decisions, interacting with your product provides real clarity around how your design decisions will impact users. You can preview your work within Studio, or go even deeper into your living design by previewing it directly on your device.

In this video, we’ll look at:

  • Previewing in Studio
  • Previewing on a device

Studio project file

Download this free Studio project file to follow along—step by step—with the tutorial.

New to Studio?

Download the latest version of InVision Studio to get started

Download StudioDownload InVision Studio

Transcript

When you've created a prototype and you're ready to preview it, we've got our built-in preview window where we can click and we can view the result of what we've created on our computer screen. But to go one level further in fidelity and getting a real feel for how your prototype is going to look and work on a device, we can also mirror a preview of our prototype directly to your device using the InVision mobile app. It's a free download from the App Store. And once you've downloaded it and logged in, you'll find a button across the toolbar at the bottom that allows you to scan a QR code. In Studio, head up to the toolbar at the top of the screen and click the Device Mirroring icon. Here, you'll find the QR code that can be scanned by the mobile app. Be sure your device is on the same Wi-Fi network, and hold up your camera to scan the QR code. Studio will then make the connection to your device and give you a live preview of what's going on within the Studio canvas. And when I say live preview, I mean you can make a change within Studio and that change will update nearly immediately. There's no faster way to get a full fidelity prototype in the palm of your hand that's completely up to date with your design progress as it's made.

Read More
Free. Forever.

Push your craft to new heights.

InVision Studio—designed with you in mind.

Make your next screen your best one yet.

Download studio free Download studio