Rapid prototyping

Tutorial Breakdown

It’s never too early in a project to begin prototyping and testing the experience of interacting with your product. With just a few clicks, Studio brings your static screens to life by allowing us to rapidly connect and animate interactive elements. While animations can be detailed and robust, it can help to begin linking things together early and often.

In this tutorial we’ll look at how to rapidly prototype by:

  • Creating links
  • Linking to a screen
  • Choosing an trigger
  • Choosing a preset transition

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

Arguably, the greatest thing about InVision Studio is that we can design, prototype, and create advanced animations in one place, which creates a workflow that allows us to create very high-fidelity prototypes in just a matter of minutes.

Let's start with some low-fidelity stuff first by linking these screens together. Any transition between two screens consists of two parts—we've got to have an object to interact with and a screen to link it to.

So to link this image to the artboard on the right, we can either click the Lightning Bolt icon on the toolbar at the top of the screen, or just press the letter C on the keyboard, which turns our cursor into a pickwhip so that we can choose the destination artboard.

I'll click the artboard on the right, and then we're presented with this dialog box that has us make a few choices. First, we choose what physical interaction is going to trigger this transition. For now, I'm just going to leave this on Tap, but you can start getting pretty fancy with things like swipes, holds, double taps, and even hover if you're creating a desktop prototype.

Then, we've got two major transition types. We've got the preset transitions that come built into Studio, and then we've got the Motion transition, which is where the real magic happens. (We're going to talk about that next.)

For now, we're just going to use a preset transition, and, in this case, I think Slide Left is going to be the most appropriate. So, we'll hit Save, and then we'll link it back by clicking on the large image, pressing the letter C once more, and then clicking on the first artboard so that we can link it back. And, in this case, instead of instant, I'm going to have it Slide Right to do the opposite, and press Save.

Now we're ready to preview this and see how it looks. I'll head up to the toolbar at the top of the screen, I'll hit our Play button, which brings up the preview window, and now we can click around and see how that looks. So, just like that, we've got a rapid prototype created in this same tool that we use to design it. And that is pretty sweet.

What you may have noticed is that when the preview window first opened, it opened to the second artboard instead of the first, and there's a good reason for that. The reason is—at the top, next to the artboard name, you'll see this little house. That indicates that this is the home artboard, where the prototype begins. So I think that should be the artboard on the left, so what we can do is right-click, and then choose Set Artboard as Home. Now, when we open up the preview window, it will start on that first artboard instead of the second. So, you can choose to set that home artboard and forget about it, or you can move it around as you continue prototyping to pick up from different points as you work.

You'll also find, in the preview window, that you can change the size of the device that you're previewing on, but I would only recommend doing this if you're using percentage-based measurements for your objects in creating a responsive prototype. We'll get into that in a future tutorial.

Now, I think we're ready to get into the Motion transition and do some high-fidelity prototyping.

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